Vue3。2项目架构详解

　　前言随着vue3。2版本的更新，最新vue全家桶技术栈也发生了部分改变
　　老版本全家桶：vue2。6vueroutervuexvuecliaxios
　　新版本全家桶：vue3。2vuerouter4。xpiniavite2TypeScriptaxios
　　接下来我们开始一起搭建一个移动端vue3。2的项目吧1。快速创建项目yarncreatevitemyvueapptemplatevuets快速初始化项目yarn安装项目所有三方包yarndev运行项目
　　2。vite配置
　　vite。config。js配置
　　安装path模块配置快捷路径yarnaddtypesnodeDimport｛defineConfig｝fromviteimportvuefromvitejspluginvueimport｛resolve｝frompathhttps：vitejs。devconfigexportdefaultdefineConfig（｛plugins：〔vue（）〕，resolve：｛alias：｛：resolve（dirname，src）设置指向src目录｝｝，base：。，设置打包路径｝）3。vuerouter路由配置
　　安装vuerouter4版本yarnaddvuerouter4
　　创建srcrouterindex。ts路由配置文件import｛createRouter，createWebHistory，RouteRecordRaw｝fromvuerouterconstroutes：ArrayRouteRecordRaw〔｛path：，redirect：home｝，｛path：home，name：home，component：（）import（viewshomeHome。vue）｝，｛path：about，name：about，component：（）import（viewsaboutAbout。vue）｝〕constroutercreateRouter（｛history：createWebHistory（），routes｝）exportdefaultrouter
　　将路由配置文件注册到顶级对象中main。tsimport｛createApp｝fromvueimportAppfrom。App。vueimportrouterfrom。routerindexconstappcreateApp（App）；挂载路由：一定要先创建app然后注册路由，最后才是挂载app的dom节点【必须有先后顺序】app。use（router）；app。mount（app）4。pinia替代vuex
　　官网地址：https：pinia。vuejs。orgpinia是新一代状态管理仓库，是和vue3连用的新型状态管理仓库。
　　尤雨溪：pinia相当于就是vuex5，未来vuex不会再进行更新和升级。
　　pinia有非常强的类型推断特点，不必再为了类型的定义烦恼vuex：五大核心配置：stategettersmutations（同步修改数据）actions（异步修改数据）modules
　　pinia：四大核心配置：stategettersactions【修改数据的方法】modules4。1安装piniayarnaddpinia4。2创建文件srcstoreindex。tsimport｛defineStore｝frompiniadefineStore函数参数1：模块名保证整个状态管理中的唯一参数2：对象包含核心配置exportconsttestStoredefineStore（test，｛state：（）｛return｛num：100，｝｝，getters：｛getNewNum（）：string｛return最新的数字是：this。num；｝｝，actions：｛setNewNum（num：number）｛this。numnum；｝｝｝）4。3main。ts挂载import｛createApp｝fromvueconstappcreateApp（App）导入pinia状态管理import｛createPinia｝frompiniaconststorecreatePinia（）；注册piniaapp。use（store）4。4使用数据
　　使用数据2种方法导入定义好的状态管理类import｛testStore｝from。。。。store；通过testStore创建一个一个实例consttesttestStore（）使用方式1：需要使用时获取console。log（test。num）；使用方式2：加入computed每次改变自动拿到最新数据computed获取最新数据constnumcomputed（（）｛returntest。num；｝）4。5修改状态管理中的数据
　　修改数据的2种方法import｛testStore｝from。。。。store；通过testStore创建一个一个实例consttesttestStore（）方式1：修改状态管理库中的数据constaddNum（）｛直接修改数据test。patch（｛num：test。num1｝）｝方式2：借助actions方法覆盖数据constsetNum（）｛test。setNewNum（2000）；｝4。6getters装饰器使用import｛testStore｝from。。。。store；通过testStore创建一个一个实例consttesttestStore（）letgetterNumtest。getNewNum；console。log（getterNum）；最新的数字是：1005。使用vant4
　　官网地址：https：vantcontrib。gitee。iovantv4zhCNhome安装最新版vantui（vue3版本）npmivant或yarnaddvant5。1导入所有组件【不推荐】
　　不推荐原因：vant封装了太多业务组件，如果一次性导入所有的组件，项目打包时会打包非常多用不到的组件，浪费性能。main。tsimport｛createApp｝fromvueconstappcreateApp（App）导入vantuiimportVantfromvant；importvantlibindex。css；app。use（Vant）；5。2按需导入【推荐】main。ts按需导入vantuiimportvantlibindex。css；import｛Button，Field｝fromvant；注册组件app。use（Button）。use（Field）；组件使用templatevanbuttontypeprimary主要按钮vanbuttonhrvanfieldvmodelnamelabel文本placeholder请输入用户名hrtemplate
　　6。使用antdesignvue3
　　官网地址：https：www。antdv。comcomponentsoverview
　　UI框架一般只选择一个，真实项目中vant和antd选择一个即可安装npmisaveantdesignvue或yarnaddantdesignvue6。1全局导入所有组件
　　另外两种注册方案：按需全局注册（和vant按需引入方法一致）和组件局部注册使用方案，请移步官方文档。import｛createApp｝fromvueconstappcreateApp（App）全局导入antdimportAntdfromantdesignvue；importantdesignvuedistantd。css；app。use（Antd）组件使用templatePrimaryButtonabuttontemplate7。使用elementplus
　　最新版element导入使用：https：elementplus。gitee。iozhCN
　　UI框架一般只选择一个，真实项目中vantantd和element选择一个即可
　　注意：vue3的管理系统中elementplus有很多细节的bug，使用时一定要注意！！！安装npminstallelementplussave或yarnaddelementplus7。1全局注册所有组件import｛createApp｝fromvueconstappcreateApp（App）全局导入elementimportElementPlusfromelementplusimportelementplusdistindex。cssapp。use（ElementPlus）组件使用templateelbuttontypeprimaryPrimaryelbuttonelinputvmodelnameplaceholderPleaseinputtemplate8。axios三层封装
　　两个接口均为测试mock数据接口安装yarnaddaxios或npmiaxios8。1全局配置层
　　主要完成全局默认配置，拦截器配置等
　　创建：srcutilsrequest。tsimportaxiosfromaxios；服务器地址axios。defaults。baseURLhttps：api。example。com；添加请求拦截器axios。interceptors。request。use（function（config）｛在发送请求之前做些什么returnconfig；｝，function（error）｛对请求错误做些什么returnPromise。reject（error）；｝）；添加响应拦截器axios。interceptors。response。use（function（response）｛对响应数据做点什么returnresponse；｝，function（error）｛对响应错误做点什么returnPromise。reject（error）；｝）；8。2接口对应层
　　完成与后端接口一一对应的函数封装
　　创建srcapitest。tsimportrequestfrom。。utilsrequest；get请求exportconstwishList（params：any）｛returnrequest（｛url：wishlist，method：get，params｝）｝post请求exportconstcookerList（data：any）｛returnrequest（｛url：userscookerList，method：post，data｝）｝8。3接口调用层
　　调用时异步转同步直接获取返回数据asyncawaittemplatetemplate