安装ts依赖
添加ts配置
配置webpack
改造.vue
改造Vue-router
安装ts依赖
npm install ts-loader typescript --save-dev
npm vue-class-component --save
- ts-loader: typescript for webpack, 让webpack识别.ts,.tsx文件;
- typescript: intalling for using typescript;
- vue-class-component: Typescript decorator for class-style Vue components
添加ts配置
在项目根目录添加tsconfig.json配置文件，来指定ts编译的一些参数信息,ts给出其定义文件。
{
"compilerOptions": {
"lib": ["dom", "es5", "es2015", "es7", "es2015.promise"],
"target": "es5",
// "module": "es2015",
"module": "esnext",
"moduleResolution": "node",
"sourceMap": true,
"experimentalDecorators": true,
},
"include": [
"src/**/*.ts",
"src/**/*.vue"
],
"exclude": [
"node_modules",
"./dist",
"./static"
]
}
include: 编译时所包含的文件
exclude: 编译时所排除的文件
compilerOptions: 指定typesctipt编译器如何编译.ts文件
- module: 指定模块代码的生成方式：'none', 'commonjs', 'amd', 'system', 'umd', 'es2015' or 'esnext'。
vue-router懒加载使用到了动态加载模块，为es6以后版本的特性（TODO:查明是哪个版本）,所以本配置为：esnext; - experimentalDecorators: Enables experimental support for ES7 decorators。我们上文用了typescript decorator,所以本配置设置为：true;
- target: 编译后ECMAScript的目标版本，与vue的浏览器支持保持一致;
webpack配置
找到webpack.base.conf.js，更改其中的配置。
entry配置
将入口文件改为'./src/main.ts',同时将main.js的扩展名改为.ts
entry: {
app: './src/main.ts'
},
resolve.extension配置
在resolve.extensions数组中添加.ts，从而在引入ts文件时可以不写.ts后缀名
resolve: {
extensions: ['.ts','.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
