手把手教你如何在vue項(xiàng)目中使用typeScript
1.從零開始構(gòu)建項(xiàng)目：
?? ???vue init webpack vuets? 一直 enter ...?enter ...?enter ...
2.cd vuets??? ?安裝ts所需要的依賴：
? ??cnpm i?typescript ts-loader@^3.5.0 --save-dev? ; ps(這里vue-cli要配合ts-loader@3.*.*)
3.修改項(xiàng)目配置?
? ? a.bulid/webpack.base.conf.js 添加rules
????{
? ? ? ? test: /\.(tsx|ts)?$/,
? ? ? ? loader: 'ts-loader',
? ? ? ? exclude: /node_modules/,
? ? ? ? options: {
? ? ? ? ? appendTsSuffixTo: [/\.vue$/],
? ? ? ? }
? ? ? }
? ?配圖？坐梯？？知道你想要的，哈哈
4.添加識(shí)別文件在src目錄下新建vue-shims.d.ts，內(nèi)容如下
? ??????declare module "*.vue" {
? ????????????import Vue from "vue";
? ????????????export default Vue;
? ? ? ? ? }
配圖：？黎炉？膜钓？
5.在項(xiàng)目根目錄下建立TypeScript配置文件tsconfig.json
?{
? "compilerOptions": {
? ? "strict": true,
? ? "module": "es2015",
? ? "moduleResolution": "node",
? ? "target": "es5",
? ? "allowSyntheticDefaultImports": true,
? ? "declaration": false,
? ? "noImplicitAny": true,
? ? "strictNullChecks": true,
? ? "emitDecoratorMetadata": true,
? ? "experimentalDecorators": true,
? ? "allowJs": true,
? ? "lib": [
? ? ? "es2017",
? ? ? "es2016",
? ? ? "dom"
? ? ]
? }
}
配圖：嗽交？？颂斜？
6.重命名主入口文件src/ main.js 改為main.ts,同時(shí)修改 build/webpack.base.conf.js 中?entry中的main.js>>main.ts
??
7.修改src/App.vue 的script標(biāo)簽的lang屬性 <script lang='ts'>
8.修改main.ts中? App組件的引入 后綴要帶上.vue 因?yàn)閠s只識(shí)別 .ts結(jié)尾的
9.安裝vue官方推薦插件?vue-class-component
cnpm i?vue-class-component --save
10.驗(yàn)證奇跡的時(shí)候到了夫壁？？沃疮？迫不及待修改HelloWorld.vue
? ? 直接上圖? ? 盒让？？
11.npm run dev 直接看效果司蔬。若有幫助邑茄，點(diǎn)贊啊大胸弟?
12.github地址：https://github.com/woheV6/vue-cli-typescript? ?歡迎star
