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

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)

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

5.使用 Unocss / Windcss / Tailwind

相关推荐
Mintopia1 分钟前
🎨 AIGC 内容过滤技术:当创作的洪流遇上理性的堤坝
前端·javascript·aigc
Shi_haoliu16 分钟前
Vue2 + Office Add-in关于用vue项目于加载项控制excel单元格内容(Demo版)
前端·javascript·vue.js·node.js·html·excel·office
计算机毕业设计木哥41 分钟前
计算机毕业设计选题推荐:基于SpringBoot和Vue的爱心公益网站
java·开发语言·vue.js·spring boot·后端·课程设计
aesthetician4 小时前
Node.js v25 重磅发布!革新与飞跃:深入探索 JavaScript 运行时的未来
javascript·node.js·vim
2501_915918416 小时前
掌握 iOS 26 App 运行状况,多工具协作下的监控策略
android·ios·小程序·https·uni-app·iphone·webview
知识分享小能手7 小时前
uni-app 入门学习教程,从入门到精通,uni-app基础扩展 —— 详细知识点与案例(3)
vue.js·学习·ui·微信小程序·小程序·uni-app·编程
demi_meng8 小时前
reactNative 遇到的问题记录
javascript·react native·react.js
MC丶科8 小时前
【SpringBoot 快速上手实战系列】5 分钟用 Spring Boot 搭建一个用户管理系统(含前后端分离)!新手也能一次跑通!
java·vue.js·spring boot·后端
千码君20168 小时前
React Native:从react的解构看编程众多语言中的解构
java·javascript·python·react native·react.js·解包·解构
2501_915909069 小时前
iOS 混淆实战,多工具组合完成 IPA 混淆与加固(源码 + 成品 + 运维一体化方案)
android·运维·ios·小程序·uni-app·iphone·webview