手把手教你如何在vue项目中使用typeScript
1.从零开始构建项目：
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.修改项目配置
a.bulid/webpack.base.conf.js 添加rules
{
test: /\.(tsx|ts)?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/],
}
}
配图？？？知道你想要的，哈哈
4.添加识别文件在src目录下新建vue-shims.d.ts，内容如下
declare module "*.vue" {
import Vue from "vue";
export default Vue;
}
配图：？？？
5.在项目根目录下建立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,同时修改 build/webpack.base.conf.js 中 entry中的main.js>>main.ts
7.修改src/App.vue 的script标签的lang属性 <script lang='ts'>
8.修改main.ts中 App组件的引入 后缀要带上.vue 因为ts只识别 .ts结尾的
9.安装vue官方推荐插件 vue-class-component
cnpm i vue-class-component --save
10.验证奇迹的时候到了？？？迫不及待修改HelloWorld.vue
直接上图 ？？
11.npm run dev 直接看效果。若有帮助，点赞啊大胸弟
12.github地址：https://github.com/woheV6/vue-cli-typescript 欢迎star
