通过vite+vue3+pinia从0到1搭建一个uniapp应用
最近项目上要做一个app，选择了用uniapp作为开发框架；我大概看了一下uniapp的文档，根据文档从0到1搭了一个uniapp应用供大家参考。
因为本人习惯使用了WebStorm编译器，但是uniapp官方推荐使用HBuilder搭建，如果和我一样习惯WebStorm或者是vscode其他的编译器进行开发，可以选择官方提供的第二种方式，利用脚手架命令进行搭建，接下来我会以脚手架的方式进行搭建。
一、模板下载
npx degit dcloudio/uni-preset-vue#vite Demo-uniapp
用编辑器打开对应的文件，执行pnpm i 下载对应依赖，下载完成后，pnpm run dev:h5即可启动
//下载依赖
pnpm i//启动
pnpm run dev:h5运行后，就可以看到一个简单的uniapp应用
二、多环境配置
和pc端开发一样，我们在开发应用的时候，也会分有开发环境和生产环境，这里还是使用vite的脚本配置。
在根目录下创建.env.dev和.env.prod文件，分别对应的是开发环境和生产环境
在package.json中对应的脚本中补充命令即可，这里以h5的命令为例。
在main.js里查看打印结果，环境配置是否正确。
执行npm run dev:h5打印的是开发地址，npm run build:h5则走的是生产地址。
三、请求配置
基于第二步完成了多环境配置，那么我们就可以根据多环境，对请求进行统一的封装，这里以axios为例。
pnpm install axios创建src目录下创建utils目录，创建request.js文件，这是我大概做的请求，具体的相应code码可以根据实际情况自行添加。
import axios from "axios";const request = axios.create({timeout:30000
})//拦截
request.interceptors.request.use(config => {switch (config.requestBase){default:config.baseURL = import.meta.env.VITE_BASE_APIbreak;}return config
},error => {console.log(error)
})//响应
request.interceptors.response.use(response => {const res = response.dataif(response.status===200 && res.code){if (res.code !== 200) {uni.showToast({icon:'none',title:'系统繁忙，稍后再试！'})return Promise.reject(new Error(res.msg || 'Error'))} else {return res}}else{return response}
},error => {console.log(error)return Promise.reject(error)
})
export default request在其他页面使用请求
四、自动导入
pnpm install unplugin-auto-import -D执行上面的命令后，在vite.config.js的plugins中添加自动导入组件即可，然后每个vue组件页面里就不用再导入vue和uni了。
import {defineConfig} from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import AutoImport from 'unplugin-auto-import/vite'
// https://vitejs.dev/config/
export default defineConfig({plugins: [uni(),AutoImport({imports: ['vue', 'uni-app'],dts: true})],server: {https: false,host: '0.0.0.0',port:5174,open: true},
})
五、状态管理
状态管理我还是选择的是pinia，直接执行以下命令，在main.js文件中引入
pnpm install pinia
//main.js文件import { createSSRApp } from "vue";
import App from "./App.vue";
import {createPinia} from "pinia";
export function createApp() {const app = createSSRApp(App);const store = createPinia()app.use(store)console.log(import.meta.env.VITE_BASE_API,'---------')return {app,};
}
在src目录下创建store文件夹，创建一个store进行状态管理。
按照以下方式使用。
六、UI组件
如果uniapp内置的ui库足够你使用，那么就不用再额外下载，如果需要额外的UI组件，可参考以下步骤。
我这里以uview-plus为例，按照文档步骤进行下载即可。
uview-plus文档：https://uiadmin.net/uview-plus/components/install.html
按照以下命令进行安装相关库。
pnpm install sass@1.63.2pnpm install sass-loader@10.4.1pnpm install uview-plus
在main.js中导入uview-plus组件库。
在uni.scss中导入uview-plus/theme.scss
在App.vue导入uview-plus/index.scss
在pages.json中要配置easycom
最后就可以在组件里使用uview-plus的组件了。
七、demo代码地址
https://github.com/banyan666/Demo-uniapp