5分钟为vue-cli2构建项目添加typescript
2020/2/26 11:15:40
本文主要是介绍5分钟为vue-cli2构建项目添加typescript,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
去年我们将基于 vue-cli2 构建的项目中的 webpack3 升级到 webpack4。今年我们继续升(zhe
)级(teng
),添加 typescript
。
目前市场上大部分脚手架在生成项目时都会提示是否要安装 typescript. 比如 vue-cli3+。但还是有很多老项目或者是通过 vue-cli2 构建的项目一直在被维护中。如果你想对这些老项目重新改造、以旧换新,为其添加 typescript
支持的话,Give me five minutes Plz。
只需要以下 6 小步。
1. 安装相关依赖
$ npm install typescript ts-loader vue-property-decorator -D 复制代码
typescript
必须安装,你要问能不能不安装它,哼哼~你究竟干啥来的!
ts-loader
告诉 webpack 我是 ts.
vue-property-decorator
让 vue 支持修饰器,这里也可以使用 vue-class-component
. 至于用法这里不讲,想了解可以点击开发教程进行阅读.
2. 修改 webpack 配置
在 build
目录下找到 webpack.base.config.js
文件. 新增一个 rule
配置.
module: { rules: [ ... { test: /\.tsx?$/i, use: [{ loader: 'ts-loader', options: { appendTsSuffixTo: [/\.vue$/] } }], exclude: /node_modules/ }, ... 复制代码
3. 创建 vue 声明文件
在 src
目录下创建一个 shims-vue.d.ts
文件,这里叫啥无所谓,但是必须要以 .d.ts
为后缀.
declare module '*.vue' { import Vue from 'vue' export default Vue } 复制代码
其作用是让TS编译器识别 vue 文件.
4. 创建 tsconfig.json
在项目根目录下创建 tsconfig.json
文件. 这个文件可以使用 tsc
命令创建.
$ tsc --init 复制代码
如果提示没有 tsc
,你需要在全局安装 typescript
$ npm install typescript -g 复制代码
文件配置如下:
{ "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" ] }, "include": ["src/**/*.*"], "exclude": ["node_modules", "build", "dist"] } 复制代码
这里不对配置一一进行介绍,想要了解可以点击编译选项进行阅读.
5. 用 ts 替换 js 文件
有 4 处文件需要修改
- src/App.vue
<script lang="ts"> import { Vue, Component } from 'vue-property-decorator' @Component export default class App extends Vue { } </script> 复制代码
- src/components/HelloWorld.vue
<script lang="ts"> import { Vue, Component } from 'vue-property-decorator' @Component export default class HelloWorld extends Vue { msg: string = 'Welcome to Your Vue.js App' } </script> 复制代码
- src/router/index.ts
import Vue from 'vue' import Router, { RouteConfig } from 'vue-router' import HelloWorld from '@/components/HelloWorld.vue' Vue.use(Router) const routes: RouteConfig[] = [ { path: '/', component:HelloWorld } ] export default new Router({ routes }) 复制代码
- src/main.ts
import Vue from 'vue' import App from './App.vue' import router from './router/index' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' }) 复制代码
6. 修改 entry
回到 webpack.base.config.js
配置文件,讲入口的 main.js
修改为 main.ts
即可.
module.exports = { entry: { app: './src/main.ts' } ... } 复制代码
到这里对 vue-cli2 添加 typescript 升级改造大(qing
)功(er
)告(yi
)成(ju
).
相关链接
最后相关示例和总结双手奉上.
这篇关于5分钟为vue-cli2构建项目添加typescript的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04package.json 文件位置在哪?-icode9专业技术文章分享
- 2024-10-01Craco.js学习:从入门到实践指南
- 2024-10-01Create-React-App学习:入门与实践指南
- 2024-10-01CSS-in-JS学习:从入门到实践指南
- 2024-09-30JSX语法学习:从入门到初步掌握
- 2024-09-30Mock.js学习:入门教程与实战演练
- 2024-09-30React Hooks学习:从入门到实践
- 2024-09-30受控组件学习:React中的基础入门教程
- 2024-09-29JS定时器教程:初学者必看指南
- 2024-09-29JS对象教程:初学者的全面指南