vue与TypeScript集成配置最简教程(推荐)

前言

Vue的官方文档没有给出与TypeScript集成的具体步骤，网上其他的教程不是存在问题就是与vue-cli建立的项目存在差异，让人无从下手。

下面我就给出vue-cli建立的项目与TypeScript集成的最简配置。

初始化项目

首先用vue-cli建立webpack项目。这里为了演示方便，没有打开router和eslint等，可以根据自身情况打开。

rush:plain;"> # vue init webpack vue-typescript

? Project name vue-typescript
? Project description A Vue.js project
? Author
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No

安装TypeScript相关依赖和项目其余依赖，用npm或cnpm

rush:bash;"> # cd /vue-typescript # npm install typescript ts-loader --save-dev # npm install

配置

修改目录下bulid/webpack.base.conf.js文件，在文件内module>rules添加以下规则

rush:js;"> { test: /\.tsx?$/,loader: 'ts-loader',exclude: /node_modules/,options: { appendTsSuffixTo: [/\.vue$/],} },

在src目录下新建一个文件vue-shims.d.ts，用于识别单文件vue内的ts代码

rush:js;"> declare module "*.vue" { import Vue from "vue"; export default Vue; }

在项目根目录下建立TypeScript配置文件tsconfig.json

rush:js;"> { "compilerOptions": { "strict": true,"module": "es2015","moduleResolution": "node","target": "es5","allowSyntheticDefaultImports": true,"lib": [ "es2017","dom" ] } }

重命名src下的main.js为main.ts

修改webpack.base.conf.js下的entry>app为'./src/main.ts'

修改src下的App.vue文件，在

rush:js;">

运行项目

rush:bash;"> # npm run dev

测试成功，现在是一个TypeScipt项目了

进阶

配置官方推荐的vue-class-component，https://cn.vuejs.org/v2/guide/typescript.html

安装开发依赖

rush:bash;"> # npm install --save-dev vue-class-component

修改ts配置文件，增加以下两项配置

rush:js;"> "allowSyntheticDefaultImports": true,"experimentalDecorators": true,

改写我们的Hello组件

rush:js;">

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。

• 上一篇：vue滚动轴插件better-scroll使用详下一篇：教你用Cordova打包Vue项目的方法