手把手教你如何在vue项目中使用typeScript

1.从零开始构建项目：

      vue init webpack vuets  一直 enter ... enter ... enter ...

2.cd vuets     安装ts所需要的依赖：

    cnpm i typescript ts-loader@^3.5.0 --save-dev  ; ps(这里vue-cli要配合ts-loader@3.*.*)

3.修改项目配置 

    a.bulid/webpack.base.conf.js 添加rules

    {

        test: /\.(tsx|ts)?$/,

        loader: 'ts-loader',

        exclude: /node_modules/,

        options: {

          appendTsSuffixTo: [/\.vue$/],

        }

      }

   配图？？？知道你想要的，哈哈

4.添加识别文件在src目录下新建vue-shims.d.ts，内容如下

        declare module "*.vue" {

              import Vue from "vue";

              export default Vue;

          }

配图：？？？

5.在项目根目录下建立TypeScript配置文件tsconfig.json

 {

  "compilerOptions": {

    "strict": true,

    "module": "es2015",

    "moduleResolution": "node",

    "target": "es5",

    "allowSyntheticDefaultImports": true,

    "declaration": false,

    "noImplicitAny": true,

    "strictNullChecks": true,

    "emitDecoratorMetadata": true,

    "experimentalDecorators": true,

    "allowJs": true,

    "lib": [

      "es2017",

      "es2016",

      "dom"

    ]

  }

}

配图：？？？

6.重命名主入口文件src/ main.js 改为main.ts,同时修改 build/webpack.base.conf.js 中 entry中的main.js>>main.ts

  

7.修改src/App.vue 的script标签的lang属性 <script lang='ts'>

8.修改main.ts中  App组件的引入 后缀要带上.vue 因为ts只识别 .ts结尾的

9.安装vue官方推荐插件 vue-class-component

cnpm i vue-class-component --save

10.验证奇迹的时候到了？？？迫不及待修改HelloWorld.vue

    直接上图    ？？

.

11.npm run dev 直接看效果。若有帮助，点赞啊大胸弟 

12.github地址：https://github.com/woheV6/vue-cli-typescript   欢迎star