uniApp新模式∶ 使用Vue3 + Vite4 + Pinia + Axios技术栈构建 点击关注公众号，“技术干货”及时达！ 背景使用Vue3 + Vite4 + Pinia + Axios + Vscode模式开发之后，感叹真香！不用再单独去下载HBuilderX。废话不多说，直接上干货！ 版本号node: v16.18.0vue: ^3.3.4,vite: 4.1.4sass: ^1.62.1pinia: 2.0.36pinia-plugin-unistorage: ^0.0.17axios: ^1.4.0axios-miniprogram-adapter: ^0.3.5unplugin-auto-import: ^0.16.4如遇到问题，请检查版本号是否一致!!! 项目目录结构└──src#主目录 ├──api#存放所有api接口文件 │├──user.js#用户接口 ├──config#配置文件 │├──net.config.js#axios请求配置 ├──pinia-store#配置文件 │├──user.js#axios请求配置 ├──utils#工具类文件 │├──request.js#axios请求封装 开发流程建议去uni-preset-vue仓库下载vite分支zip包，熟练ts的童鞋下载vite-ts 安装下载之后进入项目cduni-preset-vue 安装依赖#pnpm pnpminstall #yarn yarn #npm npmi 运行pnpmdev:mp-weixin 打开微信开发者工具，找到dist/dev/mp-weixin运行，可以看到默认的页面 安装piniapnpmaddpinia 使用pinia在src目录下构建 pinia-store/user.js文件 /** *@description用户信息数据持久化 */ import{defineStore}from'pinia' exportconstuseUserStore=defineStore('user',{ state(){ return{ userInfo:{} } }, actions:{ setUserInfo(data){ this.userInfo=data } } }) 修改main.js文件import{ createSSRApp }from"vue"; import*asPiniafrom'pinia'; importAppfrom"./App.vue"; exportfunctioncreateApp(){ constapp=createSSRApp(App); conststore=Pinia.createPinia(); app.use(store); return{ app, Pinia } pinia数据持久化安装pinia-plugin-unistorage pnpmaddpinia-plugin-unistorage 修改main.js文件,增加如下代码： //pinia数据持久化 import{createUnistorage}from'pinia-plugin-unistorage' store.use(createUnistorage()); app.use(store); 完整代码如下： import{createSSRApp}from"vue"; import*asPiniafrom'pinia'; //pinia数据持久化 import{createUnistorage}from'pinia-plugin-unistorage' importAppfrom"./App.vue"; exportfunctioncreateApp(){ constapp=createSSRApp(App); conststore=Pinia.createPinia(); store.use(createUnistorage()); app.use(store); return{ app, Pinia } 在页面中使用： scriptsetup import{useUserStore}from'@/pinia/user.js' constuser=useUserStore() //设置用户信息 constdata={userName:'snail'} user.setUser(data) //打印用户信息 console.log(user.userInfo) /script 安装axiospnpm add axios 适配小程序，需要另外安装axios-miniprogram-adapter插件 pnpmaddaxios-miniprogram-adapter 使用axios在utils创建utils/request.js文件 importaxiosfrom'axios'; importmpAdapterfrom"axios-miniprogram-adapter"; axios.defaults.adapter=mpAdapter; import{netConfig}from'@/config/net.config'; const{baseURL,contentType,requestTimeout,successCode}=netConfig; lettokenLose=true; constinstance=axios.create({ baseURL, timeout:requestTimeout, headers:{ 'Content-Type':contentType, }, }); //requestinterceptor instance.interceptors.request.use( (config)={ //dosomethingbeforerequestissent returnconfig; }, (error)={ //dosomethingwithrequesterror returnPromise.reject(error); } ); //responseinterceptor instance.interceptors.response.use( /** *Ifyouwanttogethttpinformationsuchasheadersorstatus *Pleasereturnresponse=response */ (response)={ constres=response.data; //请求出错处理 //-1超时、token过期或者没有获得授权 if(res.status===-1tokenLose){ tokenLose=false; uni.showToast({ title:'服务器异常', duration:2000 returnPromise.reject(res); } if(successCode.indexOf(res.status)!==-1){ returnPromise.reject(res); } return }, (error)={ returnPromise.reject(error); } ); exportdefaultinstance; 其中net.config.js文件需要在src/config目录下创建，完整代码如下： /** *@description配置axios请求基础信息 *@authorhu-snail1217437592@qq.com */ exportconstnetConfig={ //axios基础url地址 baseURL:'https://xxx.cn/api', //为开发服务器配置 CORS。默认启用并允许任何源，传递一个选项对象来调整行为或设为 false 表示禁用 cors:true, //根据后端定义配置 contentType:'application/json;charset=UTF-8', //消息框消失时间 messageDuration:3000, //最长请求时间 requestTimeout:30000, //操作正常code，支持String、Array、int多种类型 successCode:[200,0], //登录失效code invalidCode:-1, //无权限code noPermissionCode:-1, 在src目录下创建src/api/user.jsapi文件 importrequestfrom'@/utils/request' /** *@description授权登录 *@param{*}data */ exportfunctionwxLogin(data){ returnrequest({ url:'/wx/code2Session', method:'post', params:{}, data }) } /** *@description获取手机号 *@param{*}data */ exportfunctiongetPhoneNumber(data){ returnrequest({ url:'/wx/getPhoneNumber', method:'post', params:{}, data }) } 在页面中使用 scriptsetup import{wxLogin,getPhoneNumber}from'@/api/user.js' /** *@description微信登录 */ constonWxLogin=async()={ uni.login({ provider:'weixin', success:loginRes={ state.wxInfo=loginRes constjsCode=loginRes.code wxLogin({jsCode}).then((res)={ const{openId}=res.data user.setUserInfo({openId}) }) } }) } /script 配置vue自动导入安装unplugin-auto-import插件 pnpmaddunplugin-auto-import-D 修改vite.config.js文件： importAutoImportfrom'unplugin-auto-import/vite' plugins:[ AutoImport({ imports:["vue"] }) ], 页面中使用，需要注意的事每次导入新的vue指令，需要重新运行！！ scriptsetup onBeforeMount(()={ console.log('----onBeforeMount---') }) /script 安装uni-uipnpmadd@dcloudio/uni-ui 使用uni-ui修改pages.json文件，增加如下代码： "easycom":{ "autoscan":true, "custom":{ "^uni-(.*)":"@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue" } }, 在页面中使用 template uni-iconstype="bars"size="16"/uni-icons /template 到此已基本可以完成程序的开发，其他功能按照自己的需求做增删改查即可！ 点击关注公众号，“技术干货”及时达！ 阅读原文