Vue cli4.0 项目引入 TypeScript

    

Vue cli4.0 项目引入 TypeScript

  现有的项目是采用vue cli4.0脚手架生成的,现在想要引入typescript。

  1.执行安装命令

npm install --save-dev typescript
npm install --save-dev @vue/cli-plugin-typescript

  2.根目录下新建 tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "allowJs": false,
    "noEmit": true,
    "types": ["webpack-env"],
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
  },
  "exclude": ["node_modules"]
}

  3.新增 shims-vue.d.ts
根目录下新建 shims-vue.d.ts,让 ts 识别 *.vue 文件,文件内容如下:

declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}

  4.修改入口文件后缀

src/main.js => src/main.ts

  5.改造 .vue 文件

  <script>替换为<script lang="ts">

  加上 lang=ts 可以让webpack识别此段代码为 typescript

  6.使用装饰器插件

  vue-class-component:强化 Vue 组件,使用 TypeScript装饰器 增强 Vue 组件,使得组件更加扁平化
  vue-property-decorator:在 vue-class-component 上增强更多的结合 Vue 特性的装饰

  Demo:

import { Vue, Component ,Watch} from 'vue-property-decorator';
@Component({
  components: { Loading }
})
export default class App extends Vue{
   old_back:object=null,
  transitionName:string = "slide-right";
  get  ...mapState("base", ["loadingStatus"]);
  @Watch('$route')
  onChangeValue(to:object, from:object){
     // console.log('$route', to, from)
      const noBack = to.meta.noBack; //  监听路由变化时的状态为前进还是后退
      // 去终节点左,从终节点过来右
      if (to.meta.last) {
        this.transitionName = "slide-left";
      } else if (from.meta.last) {
        this.transitionName = "slide-right";
      } else if (from.meta.leaf) {
        // 从其它叶子页面过来的,往右
        this.transitionName = "slide-right";
      } else {
        if (noBack) {
          // 去到不需要返回的界面往右
          this.transitionName = "slide-right";
        } else {
          this.transitionName = "slide-left";
        }
      }
  }
  @Watch('loadingStatus')
  onChangeValue(newVal: string){
     if (newVal) {
        setTimeout(_ => {
          this.setLoading(false);
        }, 1500);
      }
  }
      // 弹出系统提示对话框
    showAlert(msg:string) {
      plus.nativeUI.alert(
        msg,
        function() {
          // console.log("User pressed!");
        },
        "报警详情",
        "确定"
      );
    }
}

所有原创文章采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。
您可以自由的转载和修改,但请务必注明文章来源并且不可用于商业目的。
本站部分内容收集于互联网,如果有侵权内容、不妥之处,请联系我们删除。敬请谅解!

添加新评论

  关于博主

QQ:1960727927
E-Mail:ceet@vip.qq.com
个人主页:https://aiylqy.com
个性签名:毁掉一个人最好的方式就是放纵他的缺点。

  近期评论

生命要得到丰盛的收获,必需阳光;同时,也需要“雨”的浇灌。

人生应该树立目标,否则你的精力会白白浪费。

山涧的泉水经过一路曲折,才唱出一支美妙的歌。

如若不是为了一个人,谁肯枯守一座城。城市和爱情,总是有着这样那样的关系。我们会因为一个人,去到那座城,因为那是一座爱的城;我们也会因为一个人,离开一座城,那是一座绝望的伤城。

常求有利别人,不求有利自己。