1.使用 HBuilder X 创建uniapp vue3的基础项目
2.安装 自动导包插件 unplugin-auto-import
sh
npm install unplugin-auto-import
或者
sh
pnpm install unplugin-auto-import
2.1 根目录下创建 vite.config.js
复制粘贴以下内容
JavaScript
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import AutoImport from 'unplugin-auto-import/vite'
export default defineConfig({
plugins: [
uni(),
// 自动导入配置
AutoImport({
imports:[
// 预设
'vue',
'uni-app',
'pinia'
]
})
]
})
项目中的 js 模块可以自动引入比如 vue 的一些 api,ref,reactive 等。
3.使用 Pinia
3.1 根目录下 创建 stores
文件夹
3.2 在 main.js
中加入代码
js
import { createSSRApp } from 'vue'
import * as Pinia from 'pinia'; // Pinia
export function createApp() {
const app = createSSRApp(App)
app.use(Pinia.createPinia()) // Pinia
return {
app,
Pinia // Pinia
}
}
4.加上你自己封装的东西,配置全局变量
js
// main.js
import { createSSRApp } from 'vue'
import * as Pinia from 'pinia'; // Pinia
import tool from '@/utils'// 引入全局变量
export function createApp() {
const app = createSSRApp(App)
app.config.globalProperties.$tool = tool // 全局变量
app.use(Pinia.createPinia()) // Pinia
return {
app,
Pinia // Pinia
}
}
配置自动导入
这下就阔以在其他组件直接这样使用了 console.log($tool)