Vue、Typescript 的项目实践-白红宇

安装

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

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

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

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

配置

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

entry: {    app: './src/main.js'}复制代码

改为：

entry: {    app: './src/main.ts'}复制代码

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

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

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

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

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

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

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

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

error  in ./src/main.tsModule 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复制代码

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

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

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

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']  }),  // ...}复制代码

在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"]  }}复制代码

代码修改

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

declare module "*.vue" {  import Vue from "vue";  export default Vue;}复制代码

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

src/App.vue文件改为：

复制代码

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

修改所有的对*.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

项目参考地址：