安裝typescript及l(fā)oader
- npm 安裝包依賴
npm install typescript ts-loader --save-dev
- 修改extensions
位置build/webpack.base.conf.js
自動(dòng)補(bǔ)全的擴(kuò)展名
extensions: ['.js', '.vue', '.json', '.ts'],
修改rules
位置 build/webpack.base.conf.js
loader
{
test: /\.tsx$/,
exclude: /node_modules/,
enforce: 'pre',
loader: 'tslint-loader',
},
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/],
}
},
聲明vue模塊
為每個(gè)文件聲明全局模塊.vue，這樣每個(gè)單文件組件就可以被自動(dòng)被聲明了掸茅。
在src目錄下新建文件 typings/vue.d.ts：
declare module '*.vue' {
import Vue from 'vue'
export default Vue
}
新建tsconfig.json
位置 根目錄
{
"compilerOptions": {
"jsx": "preserve",
"lib": [
"dom",
"es5",
"es2015",
"es2015.promise"
],
"allowJs": false,
"module": "es2015",
"moduleResolution": "node",
"target": "es5",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"allowSyntheticDefaultImports": true,
"isolatedModules": false,
"declaration": false,
"noImplicitAny": true,
"removeComments": true,
"strictNullChecks": true,
},
"compileOnSave": false
}
將js改為ts
將.js后綴改為.ts
.vue單文件組間中 script lang ='ts'
修改入口文件
entry: {
app: './src/main.ts'
},
