安裝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'),
}
},
