![如何用Vue+TypeScript项目配置实战?本文教你_第1张图片](http://img.e-com-net.com/image/info8/02a3412bd38a4861bf94fc8d33f87edc.webp)
❝最近想学习一下TypeScript语法,但是只是看官方文档又有些乏味,还是通过项目在实践中学习比较有趣,所以在这里记录一下我的学习历程,与Vue项目结合开发。(官方文档 请戳 >>)
❞
项目搭建
通过脚手架搭建
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
复制代码
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"); @Component export 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' @Component export 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?') } } 复制代码
// 引入 mixin
import { Component, Prop, Vue, Mixins } from 'vue-property-decorator'
import routerMixins from '@/mixins/router' @Component export default class HelloWorld extends Mixins(routerMixins) { created() { this.routerTest() } } 复制代码
第二种是在@Component
中混入。
// mixins.ts
import { Vue, Component } from 'vue-property-decorator';
declare module 'vue/types/vue' { interface Vue { value: string; } } @Component export 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 我都会尽力帮大家哦
本文的文字及图片来源于网络加上自己的想法,仅供学习、交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理
(未完待续...)