Vue與Typescript建置項目
- php中世界最好的语言原創
- 2018-03-19 17:01:012633瀏覽
這次帶給大家Vue與Typescript建置項目，Vue與Typescript建置專案的注意事項有哪些，以下就是實戰案例，一起來看一下。
Typescript 在前端圈已經逐漸普及，Vue 2.5.0 改進了類型聲明，使得對TypeScript 更加友好
不過要想在專案中直接使用TypeScript 仍然需要對專案進行一些改造
PS: 建議使用 Visual Studio Code 進行開發
一、安裝相依
首先還是用vue-cli 產生專案
vue init webpack demo
然後安裝必要依賴項：typescript、ts-loader、vue-class-component
npm install typescript vue-class-component -D
npm install ts-loader@3.3.1 -D
上面安裝ts-loader 的時候，指定了版本3.3.1
#這是因為在寫這篇部落格的時候（2018-03- 14），在安裝ts-loader 的最新版4.0.1 的情況下，啟動專案會報錯
另外還有幾個函式庫可以按需引入：
tslint: 規格ts 程式碼，需要配合tsllint-loader 使用，最好再加上tslint-config-standard;
vue-property-decorator: vue-class-component 的擴展，增加了幾個結合Vue 特性的裝飾器（@Emit，@Prop 等）；
vuex-class: 在vue-class-component 基礎上加強了對vuex 的支援。
二、設定Webpack
然後修改./build/webpack.base.conf.js 檔案：
在resolve.extension 中加入'.ts'，使引入ts 檔案時不用寫.ts 後綴
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/]
}
}
在module.rules 中新增webpack 對ts 檔案的解析
三、其他設定
在專案根目錄下建立tsconfig.json 檔案：
// tsconfig.json{ "compilerOptions": { // 与 Vue 的浏览器支持保持一致
"target": "es5", // 这可以对 `this` 上的数据属性进行更严格的推断
"strict": true, // 如果使用 webpack 2+ 或 rollup，可以利用 tree-shake:
"module": "es2015", "moduleResolution": "node"
}
} 完整的tsconfig.json 配置項目可以參考官方文檔
在./src 目錄建立vue-shim.d.ts 文件，讓ts 識別.vue 文件：
// vue-shim.d.tsdeclare module "*.vue" {
import Vue from "vue";
export default Vue;
}
四、檔案改造
將src 目錄下的所有js 檔案後綴改為.ts
然後將webpack 設定檔./build/webpack.base.conf.js 中的入口entry 修改為main.ts
改造之後的ts 檔案不會辨識.vue 檔，所以在引入.vue 檔案的時候，需要手動新增.vue 後綴
在所有 .vue 檔案中，都需要在