记录一次搭建uniapp-vue3的基础项目

1.使用 HBuilder X 创建uniapp vue3的基础项目

2.安装 自动导包插件 unplugin-auto-import

npm install unplugin-auto-import

或者

pnpm install unplugin-auto-import

2.1 根目录下创建 vite.config.js 复制粘贴以下内容

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 中加入代码

import { createSSRApp } from 'vue'
import * as Pinia from 'pinia'; // Pinia
export function createApp() {const app = createSSRApp(App)app.use(Pinia.createPinia()) // Piniareturn {app,Pinia // Pinia}
}

4.加上你自己封装的东西，配置全局变量

// 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()) // Piniareturn {app,Pinia // Pinia}
}

配置自动导入

这下就阔以在其他组件直接这样使用了 console.log($tool)

基本到这里结束了         以下为可选内容（持续更新）

5.使用 Unocss / Windcss / Tailwind