vue+typescript

新手上路（同新手）

1.安装vue-cli

2.安装ts依赖

    a.安装vue的官方插件 npm i vue-class-component vue-property-decorator --save

    b.安装ts-loader  npm i ts-loader typescript tslint tslint-loader tslint-config-standard --save-dev

       划重点了：注意如果你不是webpack4如果是webpack3那么你安装的ts-loader的版本号是“3.5.0”（我就是掉在了坑里，爬了好久）

3.配置webpack

首先到 ./build/webpack.base.conf.js    

第一步：   找到entery 将里面的内容改成

            entry: {

                    app: './src/main.ts'

                      },

第二步：找到model rules添加这几项（主要是为了打包的时候可以解析后缀名是.ts的文件）

         {

        test: /\.ts$/,

        exclude: /node_modules/,

        enforce: 'pre',

        loader: 'tslint-loader'

      },

      {

        test: /\.tsx?$/,

        exclude: /node_modules/,

        use: [

          "babel-loader",

          {

            loader: "ts-loader",

            options: { appendTsxSuffixTo: [/\.vue$/] }

          }

        ]

      },

第三部：添加tsconfig.json文件（注意：要在文件根部录下添加）

我直接将案例里面的tsconfig文件内容拷贝了下来

 可以参考github地址：https://github.com/Microsoft/TypeScript-Vue-Starter

第四步：在根目录下添加tslint.json文件

        {

              "extends": "tslint-config-standard",

                 "globals": {

                "require": true

          }

       }

第五步：在src下面添加vue-shim.d.ts文件

        declare module "*.vue" {

            import Vue from "vue";

            export default Vue;

        }

      (意思是告诉 TypeScript *.vue 后缀的文件可以交给 vue 模块来处理。)

第六步：将main.js改为main.ts

（终于好了，撒花）

参考链接：https://segmentfault.com/a/1190000011878086