通过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_API
break;
}
return config
},error => {
console.log(error)
})
//响应
request.interceptors.response.use(response => {
const res = response.data
if(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.2
pnpm install sass-loader@10.4.1
pnpm 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