记录一次搭建uniapp-vue3的底子项目

1.使用 HBuilder X 创建uniapp vue3的底子项目

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

1. npm install unplugin-auto-import

复制代码

或者

1. pnpm install unplugin-auto-import

复制代码

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

1. import { defineConfig } from 'vite'
2. import uni from '@dcloudio/vite-plugin-uni'
3. import AutoImport from 'unplugin-auto-import/vite'
5. export default defineConfig({
6.     plugins: [
7.         uni(),        
8.         // 自动导入配置
9.         AutoImport({
10.             imports:[
11.                 // 预设
12.                 'vue',
13.                 'uni-app',
14.                 'pinia'
15.             ]
16.         })
17.     ]   
18. })

复制代码

项目中的 js 模块可以主动引入比如 vue 的一些 api，ref，reactive 等。

3.使用 Pinia

3.1 根目录下 创建 stores 文件夹
3.2 在 main.js 中参加代码

1. import { createSSRApp } from 'vue'
2. import * as Pinia from 'pinia'; // Pinia
3. export function createApp() {
4.   const app = createSSRApp(App)
5.   app.use(Pinia.createPinia()) // Pinia
6.   return {
7.     app,
8.     Pinia // Pinia
9.   }
10. }

复制代码

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

1. // main.js
2. import { createSSRApp } from 'vue'
3. import * as Pinia from 'pinia'; // Pinia
4. import tool from '@/utils'// 引入全局变量
5. export function createApp() {
6.   const app = createSSRApp(App)
7.   app.config.globalProperties.$tool = tool // 全局变量
8.   app.use(Pinia.createPinia()) // Pinia
9.   return {
10.     app,
11.     Pinia // Pinia
12.   }
13. }

复制代码

配置主动导入

这下就阔以在其他组件直接如许使用了 console.log($tool)
基本到这里竣事了         以下为可选内容（持续更新）

5.使用 Unocss / Windcss / Tailwind


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。