记录一次搭建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

相关推荐
ggdpzhk17 分钟前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
小曲曲1 小时前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
学不会•2 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS3 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
活宝小娜5 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点5 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow5 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o5 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
Random_index5 小时前
#Uniapp篇:支持纯血鸿蒙&发布&适配&UIUI
uni-app·harmonyos
刚刚好ā6 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue