一、项目搭建

视频教程

一、初始化项目

https://uniapp.dcloud.net.cn/quickstart-cli.html

通过 vue-cli 创建 uni-app 项目

# 初始化项目 使用 Vue3+Vite+javascript 版

npx degit dcloudio/uni-preset-vue#vite my-vue3-project

# 安装依赖 npm i

┌─ 
├─ components           uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─pages                 业务页面文件存放的目录
│  └─index
│          index.vue
├─static                存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
│      logo.png
├─uni_modules
│  ├─uni-transition
│  └─uni-ui
├─unpackage
│    └─dist
│  App.vue              应用配置，用来配置小程序的全局样式、生命周期函数等
│  index.html
│  main.js              Vue初始化入口文件
│  manifest.json        配置应用名称、appid、logo、版本等打包信息
│  pages.json           配置页面路径、页面窗口样式、tabBar、navigationBar 等页面类信息
└─ uni.scss

二、引用scss样式

npm install sass node-sass sass-loader@10 -D

三、语法糖插件

解决 import { ref , reactive ..... } from 'vue' 大量引入的问题

配置后可以不用引入，直接使用

npm i -D unplugin-auto-import

四、解决@路径问题

vite.config.js

import { defineConfig } from "vite"
import uni from "@dcloudio/vite-plugin-uni"
import AutoImport from "unplugin-auto-import/vite"
import path from "path"

// https://vitejs.dev/config/
export default defineConfig({
	plugins: [
		uni(),
		// 自动导入插件
		AutoImport({
			imports: ["vue", "vue-router"],
		}),
	],
	resolve: {
		// 配置路径别名
		alias: { "@": path.resolve(__dirname, "./src") },
	},
})

二、