用vue+typescript项目配置实战
项目搭建
通过脚手架搭建
1. 通过vue cli 3 创建vue项目
vue create vue-typescript// 在此选择typescript支持? check the features needed for your project: () babel () typescript ( ) progressive web app (pwa) support () router () vuex >() css pre-processors () linter / formatter ( ) unit testing ( ) e2e testing 我是08年出道的高级前端架构师，有问题或者交流经验可以进我的扣扣裙 519293536 我都会尽力帮大家哦
// 引入 vue-class-component 插件 // 以下大概是我的选择 ? use class-style component syntax? (y/n) y ? use babel alongside typescript (required for modern mode, auto-detected polyfills, transpiling jsx)? yes ? use history mode for router? (requires proper server setup for index fallback in production) yes ? pick a css pre-processor (postcss, autoprefixer and css modules are supported by default): sass/scss (with node-sass) ? pick a linter / formatter config: prettier ? pick additional lint features: lint on save ? where do you prefer placing config for babel, eslint, etc.? in dedicated config files ? save this as a preset for future projects? (y/n) n
相关推荐：《js高级教程》
2. 启动项目
yarn run serve
能跑起来吗，能跑就是好项目
3.项目配置
此时其实脚手架已经帮我们配置好了大多数的配置，但还是需要熟悉一下配置。
tsconfig.json
在项目根目录下创建tsconfig.json。
{ // 编译选项 "compileroptions": { // 输出目录 "outdir": "./output", // 是否包含可以用于 debug 的 sourcemap "sourcemap": true, // 以严格模式解析 "strict": true, // 采用的模块系统 "module": "esnext", // 如何处理模块 "moduleresolution": "node", // 编译输出目标 es 版本 "target": "es5", // 允许从没有设置默认导出的模块中默认导入 "allowsyntheticdefaultimports": true, // 将每个文件作为单独的模块 "isolatedmodules": false, // 启用装饰器 "experimentaldecorators": true, // 启用设计类型元数据（用于反射） "emitdecoratormetadata": true, // 在表达式和声明上有隐含的any类型时报错 "noimplicitany": false, // 不是函数的所有返回路径都有返回值时报错。 "noimplicitreturns": true, // 从 tslib 导入外部帮助库: 比如__extends，__rest等 "importhelpers": true, // 编译过程中打印文件名 "listfiles": true, // 移除注释 "removecomments": true, "suppressimplicitanyindexerrors": true, // 允许编译javascript文件 "allowjs": true, // 解析非相对模块名的基准目录 "baseurl": "./", // 指定特殊模块的路径 "paths": { "jquery": [ "node_modules/jquery/dist/jquery" ] }, // 编译过程中需要引入的库文件的列表 "lib": [ "dom", "es2015", "es2015.promise" ] }}
tslint.json
在根路径下创建tslint.json文件,就是 引入 ts 的 standard 规范。
如果已经引入了eslint的配置文件，这一步其实也可以不做。
{ "extends": "tslint-config-standard", "globals": { "require": true }}
复制代码
附上一个脚手架自动生成的eslint的默认配置 eslintrc.js。
module.exports = { root: true, env: { node: true }, extends: [ "plugin:vue/essential", "eslint:recommended", "@vue/typescript/recommended", "@vue/prettier", "@vue/prettier/@typescript-eslint" ], parseroptions: { ecmaversion: 2020 }, rules: { "no-console": process.env.node_env === "production" ? "warn" : "off", "no-debugger": process.env.node_env === "production" ? "warn" : "off" }};
4.支持es6 / es7
在 tsconfig.json中，添加对es6 / es7的支持，更多的配置请见tsconfig - 编译选项。
"lib": [ "dom", "es5", "es6", "es7", "es2015.promise"]
5.配置vuex
首先当然是先安装依赖啦。
yarn add vuex vuex-class
复制代码
vuex：在 vue 中集中管理应用状态
vuex-class ：在 vue-class-component 写法中 绑定 vuex。
引用了vuex-class之后还是和原来的写法有点儿区别的。
vuex store 中该怎么写，还怎么写，引用的时候如下：
import { component, prop, vue } from "vue-property-decorator";import { state, getter, action, mutation, namespace } from "vuex-class";// 声明使用的是哪个模块const commonmodule = namespace("common");@componentexport default class helloworld extends vue { @prop() private msg!: string; // 获取vuex中的数据 @commonmodule.state("token") token!: string; @commonmodule.getter("gettoken") gettoken!: string; @commonmodule.action("settoken") actionsettoken: (arg0: string) => void; @commonmodule.mutation("settoken") mutationsettoken: unknown; // @state token // @getter("token") gettertoken; // @action("token") actiontoken; // @mutation("token") mutationtoken; created() { this.actionsettoken("123"); alert(this.token); }}
6.支持 vue mixin 函数
在src下新建mixins目录，根据业务复用模块划分结构。
在使用vue进行开发时我们经常要用到混合,结合typescript之后一般有两种mixins的方法。
一种是vue-property-decorator提供的
// 定义 routermixins.ts文件// mixin router 公共方法import vue from 'vue'import component from 'vue-class-component'@componentexport default class mymixins extends vue { /** * @author: wangxinyu * @describe: 浏览器后退事件 * @param: {} * @return: **/ goback() { this.$router.go(-1) } /** * @author: wangxinyu * @describe: test * @param: {} * @return: **/ routertest() { console.log('are you ok?') }}
// 引入 mixinimport { component, prop, vue, mixins } from 'vue-property-decorator'import routermixins from '@/mixins/router'@componentexport default class helloworld extends mixins(routermixins) { created() { this.routertest() }}
第二种是在@component中混入。
// mixins.tsimport { vue, component } from 'vue-property-decorator';declare module 'vue/types/vue' { interface vue { value: string; }}@componentexport default class mymixins extends vue { value: string = 'hello'}
// 混入import { vue, component, prop } from 'vue-property-decorator';import mymixins from '@/mixins/mymixins';@component({ mixins: [mymixins]})export default class mycomponent extends vue{ created(){ console.log(this.value) // => hello }}
都会了吗？如果不懂 ，记住我 。我是08年出道的高级前端架构师，有问题或者交流经验可以进我的扣扣裙 519293536 我都会尽力帮大家哦
本文的文字及图片来源于网络加上自己的想法,仅供学习、交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理
（未完待续...）
以上就是用vue+typescript项目配置实战的详细内容。