使用VueCli3+TypeScript+Vuex一步步构建todoList的方法

2023-08-18 17:12:04 77

前言

Vue3.x即将来袭，使用TypeScirpt重构，TypeScript将成为vue社区的标配，出于一名程序员的焦虑，决定现在Vue2.6.x踩一波坑。

vue官方文档已经简略地对typescript的支持进行了介绍，我们使用VueCli3直接生成项目

创建项目

❓为什么使用VueCli3构建项目

官方维护，后续升级减少兼容性问题

使用以下配置进行项目的生成：

Babel对Ts进行转译
TSLint对TS代码进行规范，后续会使用prettier对项目进行编码的统一
默认安装Vuex和Router,Router使用 history模式
使用Jest进行单元测试

╭─~/otherEWokspace
╰─➤vuecreatets-vuex-demo


VueCLIv3.6.3
┌───────────────────────────┐
│Updateavailable:3.9.3│
└───────────────────────────┘
?Pleasepickapreset:Manuallyselectfeatures

?Checkthefeaturesneededforyourproject:Babel,TS,Router,Vuex,CSSP
re-processors,Linter,Unit

?Useclass-stylecomponentsyntax?Yes

?UseBabelalongsideTypeScriptforauto-detectedpolyfills?Yes

?Usehistorymodeforrouter?(Requiresproperserversetupforindexfallb
ackinproduction)Yes

?PickaCSSpre-processor(PostCSS,AutoprefixerandCSSModulesaresuppor
tedbydefault):Sass/SCSS(withnode-sass)

?Pickalinter/formatterconfig:TSLint

?Pickadditionallintfeatures:(Presstoselect,totoggleall
,toinvertselection)Lintonsave

?Pickaunittestingsolution:Jest

?WheredoyoupreferplacingconfigforBabel,PostCSS,ESLint,etc.?Inde
dicatedconfigfiles

?Savethisasapresetforfutureprojects?Yes

?Savepresetas:ts-vue-demo

看一下新项目的层级目录

╭─~/otherEWokspace/ts-vuex-demo‹master› ╰─➤tree-L2-Inode_modules . ├──README.md ├──babel.config.js ├──jest.config.js ├──package-lock.json ├──package.json ├──postcss.config.js ├──public │├──favicon.ico │└──index.html ├──src │├──App.vue │├──assets │├──components │├──main.ts │├──router.ts │├──shims-tsx.d.ts │├──shims-vue.d.ts │├──store.ts │└──views ├──tests │└──unit ├──tsconfig.json └──tslint.json

tsconfig.json

对lib、target、module进行解释

{ "compilerOptions":{ "target":"esnext", "module":"esnext", "strict":true, "jsx":"preserve",//开启对jsx的支持 "importHelpers":true, "moduleResolution":"node", "experimentalDecorators":true, "esModuleInterop":true, "allowSyntheticDefaultImports":true, "sourceMap":true, "baseUrl":".", "types":[ "webpack-env", "jest" ], "paths":{ "@/*":[ "src/*" ] }, "lib":[ "esnext", "dom", "dom.iterable", "scripthost" ] }, "include":[ "src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx" ], "exclude":[ "node_modules" ] }

target---被tsc编译后生成js文件代码风格

module---被tsc编译后生成js文件的模块风格

lib---原ts文件支持的代码库

我们来看一下示例：

//index.ts exportconstGreeter=(name:string)=>`Hello${name}`;

"module":"commonjs","target":"es5"

//index.js "usestrict"; Object.defineProperty(exports,"__esModule",{value:true}); exports.Greeter=function(name){return"Hello"+name;};

"module":"es2015","target":"es5"

//index.js exportvarGreeter=function(name){return"Hello"+name;};

"module":"es2015","target":"es6"

//index.js exportconstGreeter=(name)=>`Hello${name}`;

"module":"commonjs","target":"es6"

//index.js "usestrict"; Object.defineProperty(exports,"__esModule",{value:true}); exports.Greeter=(name)=>`Hello${name}`;

如果lib没有指定默认注入的库的列表。默认注入的库为：

针对于target:ES5：DOM，ES5，ScriptHost

针对于target:ES6：DOM，ES6，DOM.Iterable，ScriptHost

tslint

类似于eslint，对ts代码进行检测。

vscode需要安装tslint插件，并在vscode的用户配置中加入以下配置，用来在保存时自动解决ts的错误。

//settings.json "editor.codeActionsOnSave":{ "source.fixAll.tsLint":true }

❗️vuecli3已经安装了tslint依赖

使用prettier插件，对项目进行代码风格的统一和规范

npmitslint-config-prettier-D

添加tslint.json extends字段如下：

"extends":["tslint:recommended","tslint-config-prettier"]

设置vscode

勾选tslintIntegration，使prittier支持格式化ts文件

"editor.formatOnSave":true保存时自动格式化

也可以使用shift+option+f进行格式化

在根目录下添加.prttierrc文件（应对prittier格式化vue文件中的ts文件时，没办法使用tslint规则进行格式化，需要对它单独处理，以免tslint报错）

{"singleQuote":true}

shims-vue.d.ts

declaremodule"*.vue"{ importVuefrom"vue"; exportdefaultVue; }

声明所有以.vue结尾的文件，默认导入vue，默认导出Vue，用以在项目中ts文件识别.vue结尾文件。

在main.ts中，引入一个vue组件必须以.vue结尾。

importVuefrom'vue'; importAppfrom'./App.vue'; importrouterfrom'./router'; importstorefrom'./store'; Vue.config.productionTip=false; newVue({ router, store, render:(h)=>h(App), }).$mount('#app');

Vueclass

vue-property-decorator

写一个todolist组件顺便来介绍vue-property-decorator,为了方便页面构建，使用element-ui

element-ui使用ts开发，默认有.d.ts的声明文件

npmielement-ui

//main.ts importElementUIfrom'element-ui'; import'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);

在/src/compenents/新建todoList.vue,代码如下:

import{Component,Prop,Vue,Emit}from'vue-property-decorator'; @Component exportdefaultclassHelloWorldextendsVue{ publictodo:string=''; @Prop({default:[]})privatereadonlytodoList!:string[]; gettodoLength():number{ returnthis.todoList.length; } @Emit() privateaddItem():string|undefined{ if(this.todo){ returnthis.todo; } } @Emit('removeItem') privateremoveItem(index:number):number{ returnindex; } }

.todo_list{ display:flex; justify-content:center; flex-direction:column; align-items:center; .box-card{ width:480px; } .text{ font-size:14px; text-align:left; } .item{ margin-bottom:18px; } }

对ts代码的用法指出以下几点：

prop建议写成xxx!:type的形式，不然要写成xxx:type|undefined

@Emit可以不传参数，emit出去的事件名默认是修饰的函数名，但是当函数的命名规则为camelCase时需要注册的函数名必须是kebab-case

@Emit传参是由修饰的函数returnvalue

改造Home.vue如下：

import{Component,Vue}from'vue-property-decorator'; importtodoListfrom'@/components/todoList.vue';//@isanaliasto/src import{State,Getter,Action}from'vuex-class'; @Component({ components:{ todoList } }) exportdefaultclassHomeextendsVue{ publicaddTodoList(val:string){ console.log(val); } privatecreated(){ console.log('iaddlifecyclefunciton--created'); } privateaddTodoLisItem(index:number){ console.log(index); } }

Vuex

有关ts中的vuex的写法要从vuex-class说起，在官方的vue-property-decorator中也推荐使用该库。

npmivuex-class

在src文件夹中新建store文件夹,在store新建index.ts,todoList.ts

//index.ts importVuefrom'vue'; importVuexfrom'vuex'; importtodolistfrom'./todoList'; Vue.use(Vuex); exportdefaultnewVuex.Store({ modules:{todolist} });

//todoList.ts import{Commit,Dispatch,GetterTree,ActionTree,MutationTree}from'vuex'; constADD_TODOLIST='ADD_TODOLIST'; constREMOVE_ITEM='REMOVE_ITEM'; exportinterfaceRootState{ version:string; } interfacePayload{ [propName:string]:any; } interfaceTodoListType{ todoList:string[]; } interfaceContext{ commit:Commit; dispatch:Dispatch; } constdataSource:TodoListType={ todoList:[] }; constgetters:GetterTree={ getTodoList(state:TodoListType):string[]{ returnstate.todoList; } }; constmutations:MutationTree={ ADD_TODOLIST:(state:TodoListType,item:string)=>{ console.log(item); state.todoList.push(item); }, REMOVE_ITEM:(state:TodoListType,removeIndex:number)=>{ state.todoList=state.todoList.filter((item:string,index:number)=>{ returnremoveIndex!==index; }); } }; constactions:ActionTree={ addList:async({commit}:Context,item:string)=>{ awaitPromise.resolve( setTimeout(()=>{ commit(ADD_TODOLIST,item); },100) ); }, removeItem:async({commit}:Context,{index}:Payload)=>{ awaitPromise.resolve( setTimeout(()=>{ commit(REMOVE_ITEM,index); },100) ); } }; exportdefault{ namespaced:true, state:dataSource, getters, mutations, actions };

删除原来与main.ts同级的store.ts

对todoList.ts需要注意以下几点：

对于getters、mutations、actions响应的type可以使用command+左键点击进入声明文件查看，也可以不指定type，但是建议写上

对于Payload解构 tslint报错的，可以为Payload添加类型声明

interfacePayload{ [propName:string]:any; }

代码中的dataSource本意为state,但是不能用state命名，tslint会和形参state冲突

改造/views/Home.vue如下：

import{Component,Vue}from'vue-property-decorator'; importtodoListfrom'@/components/todoList.vue';//@isanaliasto/src import{State,Getter,Action}from'vuex-class'; @Component({ components:{ todoList } }) exportdefaultclassHomeextendsVue{ @State(state=>state.todolist.todoList)privatetodoList!:string[]; @Action('todolist/addList')privateaddList!:(val:string)=>void; @Action('todolist/removeItem')privateremoveItem!:(index:number)=>void; publicaddTodoList(val:string){ console.log(val); this.addList(val); } privatecreated(){ console.log('iaddlifecyclefunciton--created'); } privateaddTodoLisItem(index:number){ this.removeItem(index); } }

有关vuex-class的调用有以下几点注意

@State如果有分模块，必须使用state=>state.xxx.xxx的形式获取state

@Action中函数的声明，形参必须和方法保持一致

所有的代码到此为止，使用npmrunserve即可查看应用，保留原有routes文件，保持应用的健壮性。

写在最后

本文只是介绍了一个简单构建ts-vue应用的例子，对于框架的健壮和可扩展性有需要慢慢考虑，比如webpack的配置，适应测试，生产等各种环境的区分，axois的封装，等等。

对于vue+ts的配方，文章还有很多vue的特性没有去兼容，比如this.refs的使用，比如vue-property-decorator其他特性的使用。

由于官方文档对ts的介绍有限，所以以上代码肯定有不足的地方，希望大家指正。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

上一篇
Java面试题从源码角度分析HashSet实现原理下一篇
Mysql优化技巧之Limit查询的优化分析

热门推荐

1 毛坯房验收经验和常识看了之后再验房心里有底

2 二手房收房如何交接二手房收房注意问题

3 专业验收毛坯房的价格商品房验收合格的标准

4 精装房怎么验收精装房请验房师有用吗

5 一般要到哪里找验房师验房师有哪些作用呢

6 请人验房一般是多少钱验房师费用是多少

7 怎样测量房子面积建筑面积和使用面积怎么算

8 收房需要注意什么仔细检查不松懈

9 收房时三书一证一表是什么主要作用介绍

10 交房时交房税费有哪些本文为你一一讲解

11 验房都需要验什么要做哪些准备呢

12 毛坯房验房师有必要请吗毛坯房装修完如何验收

13 地下室防水工程质量验收规范详解

14 水性涂料、油性涂料区别介绍

15 零基础布艺DIY工坊教你做超萌猫头鹰钥匙包

16 三棵树漆怎么样？三棵树漆官方网站

17 家庭“装修套餐”中猫腻你知道吗？

18 小空间大浴望卫浴间装修巧支招

使用VueCli3+TypeScript+Vuex一步步构建todoList的方法

热门推荐

随机推荐