Vue、Typescript 的项目实践

安装

1. 创建vue项目文件，保留vue-router，参考
   vue init webpack Vue-TypeScript-Template

2. 安装typescript :
   npm install --save-dev typescript ts-loader

3. 安装tslint静态语法检查:
   npm i --save-dev tslint tslint-loader tslint-config-standard

4. 运行，访问host测试：
   npm run dev

配置

1. build/webpack.base.conf.js中的：

entry: {
    app: './src/main.js'
}

改为：

entry: {
    app: './src/main.ts'
}

src/index.js文件名也改成相应的src/index.ts。

2. build/webpack.base.conf.js中的resolve.extensions改为:

resolve: {
    extensions: ['.ts', '.js', '.vue', '.json'],
    alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': resolve('src'),
    }
}

3. 配置ts-loader，build/webpack.base.conf.js中的module.rules添加：

{
    test: /\.tsx?$/,
    use: [{
        loader: 'babel-loader'
      }, {
        loader: 'ts-loader',
        options: {
          appendTsSuffixTo: [/\.vue$/]
        }
      }
    ],
    exclude: /node_modules/
}

4. 项目根目录下添加tsconfig.json文件，文件内容为：

{
  "compilerOptions": {
    "strict": true,
    "module": "es2015",
    "moduleResolution": "node",
    "target": "es6",
    "allowSyntheticDefaultImports": true,
    "lib": [
      "es2017",
      "dom"
    ]
  },
  "include": [
    "./src/*"
  ]
}

5. 运行测试npm run dev，如果发现控制台报这个错误时：

error  in ./src/main.ts

Module build failed: TypeError: Cannot read property 'afterCompile' of undefined
    at successfulTypeScriptInstance (/Users/baidu/Github/Vue-TypeScript-Template/node_modules/ts-loader/dist/instances.js:147:28)
    at Object.getTypeScriptInstance (/Users/baidu/Github/Vue-TypeScript-Template/node_modules/ts-loader/dist/instances.js:48:12)
    at Object.loader (/Users/baidu/Github/Vue-TypeScript-Template/node_modules/ts-loader/dist/index.js:16:41)

 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.ts

ts-loader官方问题issue，修改package.json中版本"ts-loader": "3.5.0"，重新安装解决，不过这也是个临时的解决方式，后续等官方兼容解决后记得要升级。

6. 配置tslint，在build/webpack.base.conf.js中的module.rules添加：

{
    test: /\.tsx?$/,  // tslint 代码检查, 打开注释可用
    loader: 'tslint-loader',
    enforce: 'pre',
    include: [resolve('src'), resolve('test')],
    exclude: /node_modules/
}

7. build/vue-loader.conf.js文件中修改为：

// ...
const merge = require('webpack-merge')

module.exports = {
  loaders: merge(utils.cssLoaders({
    sourceMap: sourceMapEnabled,
    extract: isProduction
  }), {
    ts: ['ts-loader', 'tslint-loader']
  }),
  // ...
}

8. 在src/文件夹下添加tslint.json文件，文件内容为：

{
  "extends": "tslint:recommended",
  "globals": {
    "require": true
  },
  "rulesDirectory": ["src/"],
  "rules": {
    "no-consecutive-blank-lines": false,
    "object-literal-sort-keys": false,
    "no-trailing-whitespace": false,
    "no-unused-expression": [true, "allow-new"]
  }
}

代码修改

1. 在src/文件下创建vue-shims.d.ts文件，内容为：

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

2. src/文件中所有的.js改为.ts

3. src/App.vue文件改为：

<script lang="ts">
import Vue from "vue";
const App = Vue.extend({
  name: "App",
});
export default App;
</script>

定义组件的时候要先在<srcipt>标签里添加<script lang="ts">，按照这种写法创建类Vue.extend({})

4. 修改所有的对*.vue文件的引用：

import App from "./App";
import HelloWorld from "../components/HelloWorld";

改为：

import App from "./App.vue";
import HelloWorld from "@/components/HelloWorld.vue";

所有的引用*.vue 结尾的都要写全*.vue

运行测试

运行npm run dev 测试效果

总结

以上的配置过程，是基于vue官方脚手架创建vue项目后，在项目中逐步添加typescript、ts-loader、tslint的过程，并且运行成功。后续会把vuex加入进来，再将vue-class-component、vuex-class、vue-property-decorator等整合到项目中，进一步做项目实践。

Github

项目参考地址：github.com/liuchunhui/…