通过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