vue cli4.0项目引入typescript

Posted jiekzou

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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!");
        },
        "报警详情",
        "确定"
      );
    }
}

....

以上是关于vue cli4.0项目引入typescript的主要内容,如果未能解决你的问题,请参考以下文章

vue cli4.0 搭建项目

vue cli4.0 快速搭建项目详解

vue cli4.0 配置环境变量

Vue CLI4.0 webpack配置属性——css.sourceMap

Vue cli4.0 代理配置

Vue2.5+ Typescript 引入全面指南