mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-09-12 16:40:40 +08:00
refactor: 架构升级
This commit is contained in:
小莫唐尼
@@ -0,0 +1,294 @@
|
||||
# uni-app CLI 命令模板
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档：https://uniapp.dcloud.net.cn/quickstart-cli.html
|
||||
|
||||
## 项目创建命令
|
||||
|
||||
### 使用 Vue CLI
|
||||
|
||||
```bash
|
||||
# 安装 Vue CLI（如果未安装）
|
||||
npm install -g @vue/cli
|
||||
|
||||
# 创建 uni-app 项目
|
||||
vue create -p dcloudio/uni-preset-vue my-project
|
||||
|
||||
# 选择 Vue 版本
|
||||
# - Vue 2
|
||||
# - Vue 3
|
||||
```
|
||||
|
||||
### 使用 degit（推荐，更快）
|
||||
|
||||
```bash
|
||||
# 创建 Vue 2 项目
|
||||
npx degit dcloudio/uni-preset-vue my-project
|
||||
|
||||
# 创建 Vue 3 项目
|
||||
npx degit dcloudio/uni-preset-vue#vite-ts my-project
|
||||
|
||||
# 创建空项目
|
||||
npx degit dcloudio/uni-preset-vue#empty my-project
|
||||
```
|
||||
|
||||
### 使用官方 CLI
|
||||
|
||||
```bash
|
||||
# 安装 uni-app CLI
|
||||
npm install -g @dcloudio/uvm
|
||||
|
||||
# 创建项目
|
||||
npx degit dcloudio/uni-preset-vue my-project
|
||||
```
|
||||
|
||||
## 项目运行命令
|
||||
|
||||
### 开发环境
|
||||
|
||||
```bash
|
||||
# H5 平台
|
||||
npm run dev:h5
|
||||
|
||||
# 微信小程序
|
||||
npm run dev:mp-weixin
|
||||
|
||||
# 支付宝小程序
|
||||
npm run dev:mp-alipay
|
||||
|
||||
# 百度小程序
|
||||
npm run dev:mp-baidu
|
||||
|
||||
# 字节跳动小程序
|
||||
npm run dev:mp-toutiao
|
||||
|
||||
# QQ 小程序
|
||||
npm run dev:mp-qq
|
||||
|
||||
# 快手小程序
|
||||
npm run dev:mp-kuaishou
|
||||
|
||||
# App（需要 HBuilderX）
|
||||
npm run dev:app-plus
|
||||
|
||||
# 快应用
|
||||
npm run dev:quickapp-webview
|
||||
```
|
||||
|
||||
### 生产环境
|
||||
|
||||
```bash
|
||||
# H5 平台
|
||||
npm run build:h5
|
||||
|
||||
# 微信小程序
|
||||
npm run build:mp-weixin
|
||||
|
||||
# 支付宝小程序
|
||||
npm run build:mp-alipay
|
||||
|
||||
# 百度小程序
|
||||
npm run build:mp-baidu
|
||||
|
||||
# 字节跳动小程序
|
||||
npm run build:mp-toutiao
|
||||
|
||||
# QQ 小程序
|
||||
npm run build:mp-qq
|
||||
|
||||
# 快手小程序
|
||||
npm run build:mp-kuaishou
|
||||
|
||||
# App（需要 HBuilderX）
|
||||
npm run build:app-plus
|
||||
|
||||
# 快应用
|
||||
npm run build:quickapp-webview
|
||||
```
|
||||
|
||||
## 常用命令
|
||||
|
||||
### 安装依赖
|
||||
|
||||
```bash
|
||||
# 安装项目依赖
|
||||
npm install
|
||||
|
||||
# 或使用 yarn
|
||||
yarn install
|
||||
|
||||
# 或使用 pnpm
|
||||
pnpm install
|
||||
```
|
||||
|
||||
### 清理构建
|
||||
|
||||
```bash
|
||||
# 清理 dist 目录
|
||||
npm run clean
|
||||
|
||||
# 或手动删除
|
||||
rm -rf dist
|
||||
```
|
||||
|
||||
### 代码检查
|
||||
|
||||
```bash
|
||||
# ESLint 检查
|
||||
npm run lint
|
||||
|
||||
# 自动修复
|
||||
npm run lint:fix
|
||||
```
|
||||
|
||||
## 一键创建项目脚本
|
||||
|
||||
### 创建 Vue 2 项目
|
||||
|
||||
```bash
|
||||
#!/bin/bash
|
||||
# create-vue2-project.sh
|
||||
|
||||
PROJECT_NAME=$1
|
||||
|
||||
if [ -z "$PROJECT_NAME" ]; then
|
||||
echo "Usage: ./create-vue2-project.sh <project-name>"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
echo "Creating Vue 2 uni-app project: $PROJECT_NAME"
|
||||
npx degit dcloudio/uni-preset-vue $PROJECT_NAME
|
||||
cd $PROJECT_NAME
|
||||
npm install
|
||||
echo "Project created successfully!"
|
||||
echo "Run 'npm run dev:h5' to start development server"
|
||||
```
|
||||
|
||||
### 创建 Vue 3 项目
|
||||
|
||||
```bash
|
||||
#!/bin/bash
|
||||
# create-vue3-project.sh
|
||||
|
||||
PROJECT_NAME=$1
|
||||
|
||||
if [ -z "$PROJECT_NAME" ]; then
|
||||
echo "Usage: ./create-vue3-project.sh <project-name>"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
echo "Creating Vue 3 uni-app project: $PROJECT_NAME"
|
||||
npx degit dcloudio/uni-preset-vue#vite-ts $PROJECT_NAME
|
||||
cd $PROJECT_NAME
|
||||
npm install
|
||||
echo "Project created successfully!"
|
||||
echo "Run 'npm run dev:h5' to start development server"
|
||||
```
|
||||
|
||||
## 快速命令别名
|
||||
|
||||
在 `~/.bashrc` 或 `~/.zshrc` 中添加：
|
||||
|
||||
```bash
|
||||
# uni-app 快速创建
|
||||
alias uniapp-create="npx degit dcloudio/uni-preset-vue"
|
||||
|
||||
# uni-app 运行 H5
|
||||
alias uniapp-dev-h5="npm run dev:h5"
|
||||
|
||||
# uni-app 运行微信小程序
|
||||
alias uniapp-dev-weixin="npm run dev:mp-weixin"
|
||||
|
||||
# uni-app 构建 H5
|
||||
alias uniapp-build-h5="npm run build:h5"
|
||||
|
||||
# uni-app 构建微信小程序
|
||||
alias uniapp-build-weixin="npm run build:mp-weixin"
|
||||
```
|
||||
|
||||
使用：
|
||||
|
||||
```bash
|
||||
# 创建项目
|
||||
uniapp-create my-project
|
||||
|
||||
# 运行 H5
|
||||
uniapp-dev-h5
|
||||
|
||||
# 构建微信小程序
|
||||
uniapp-build-weixin
|
||||
```
|
||||
|
||||
## 项目初始化完整流程
|
||||
|
||||
```bash
|
||||
# 1. 创建项目
|
||||
npx degit dcloudio/uni-preset-vue my-project
|
||||
|
||||
# 2. 进入项目目录
|
||||
cd my-project
|
||||
|
||||
# 3. 安装依赖
|
||||
npm install
|
||||
|
||||
# 4. 初始化 Git（可选）
|
||||
git init
|
||||
git add .
|
||||
git commit -m "Initial commit"
|
||||
|
||||
# 5. 运行项目
|
||||
npm run dev:h5
|
||||
```
|
||||
|
||||
## 多平台同时运行
|
||||
|
||||
```bash
|
||||
# 使用 concurrently 同时运行多个平台
|
||||
npm install -g concurrently
|
||||
|
||||
# 同时运行 H5 和微信小程序
|
||||
concurrently "npm run dev:h5" "npm run dev:mp-weixin"
|
||||
```
|
||||
|
||||
## 自定义构建命令
|
||||
|
||||
在 `package.json` 中添加：
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"dev": "npm run dev:h5",
|
||||
"build": "npm run build:h5",
|
||||
"dev:all": "concurrently \"npm run dev:h5\" \"npm run dev:mp-weixin\"",
|
||||
"build:all": "npm run build:h5 && npm run build:mp-weixin"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 常见问题解决
|
||||
|
||||
### 端口被占用
|
||||
|
||||
```bash
|
||||
# 修改端口（在 vite.config.js 或 webpack 配置中）
|
||||
# 或使用环境变量
|
||||
PORT=3000 npm run dev:h5
|
||||
```
|
||||
|
||||
### 清除缓存
|
||||
|
||||
```bash
|
||||
# 清除 node_modules 和重新安装
|
||||
rm -rf node_modules package-lock.json
|
||||
npm install
|
||||
|
||||
# 清除构建缓存
|
||||
rm -rf dist .cache
|
||||
```
|
||||
|
||||
## 参考资源
|
||||
|
||||
- Vue CLI 文档：https://cli.vuejs.org/
|
||||
- npm 文档：https://docs.npmjs.com/
|
||||
- uni-app CLI 文档：https://uniapp.dcloud.net.cn/quickstart-cli.html
|
||||
@@ -0,0 +1,501 @@
|
||||
# uni-app 项目模板
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档：https://uniapp.dcloud.net.cn/quickstart-cli.html
|
||||
|
||||
## 标准项目结构
|
||||
|
||||
```
|
||||
my-uniapp-project/
|
||||
├── pages/ # 页面目录
|
||||
│ ├── index/
|
||||
│ │ └── index.vue # 首页
|
||||
│ └── ...
|
||||
├── components/ # 组件目录
|
||||
│ └── ...
|
||||
├── static/ # 静态资源
|
||||
│ ├── images/
|
||||
│ ├── icons/
|
||||
│ └── ...
|
||||
├── uni_modules/ # uni_modules 插件
|
||||
├── utils/ # 工具函数
|
||||
│ ├── request.js # 网络请求封装
|
||||
│ └── ...
|
||||
├── api/ # API 接口
|
||||
│ └── ...
|
||||
├── store/ # 状态管理（Vuex/Pinia）
|
||||
│ └── ...
|
||||
├── App.vue # 应用入口
|
||||
├── main.js # 入口文件
|
||||
├── manifest.json # 应用配置
|
||||
├── pages.json # 页面路由配置
|
||||
├── uni.scss # 全局样式
|
||||
└── package.json # 项目依赖
|
||||
```
|
||||
|
||||
## manifest.json 模板
|
||||
|
||||
### 基础配置
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "my-uniapp",
|
||||
"appid": "",
|
||||
"description": "uni-app 项目",
|
||||
"versionName": "1.0.0",
|
||||
"versionCode": "100",
|
||||
"transformPx": false,
|
||||
"app-plus": {
|
||||
"usingComponents": true,
|
||||
"nvueStyleCompiler": "uni-app",
|
||||
"compilerVersion": 3,
|
||||
"splashscreen": {
|
||||
"alwaysShowBeforeRender": true,
|
||||
"waiting": true,
|
||||
"autoclose": true,
|
||||
"delay": 0
|
||||
},
|
||||
"modules": {},
|
||||
"distribute": {
|
||||
"android": {
|
||||
"permissions": [
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
|
||||
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
|
||||
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
||||
]
|
||||
},
|
||||
"ios": {},
|
||||
"sdkConfigs": {}
|
||||
}
|
||||
},
|
||||
"quickapp": {},
|
||||
"mp-weixin": {
|
||||
"appid": "",
|
||||
"setting": {
|
||||
"urlCheck": false
|
||||
},
|
||||
"usingComponents": true
|
||||
},
|
||||
"mp-alipay": {
|
||||
"usingComponents": true
|
||||
},
|
||||
"mp-baidu": {
|
||||
"usingComponents": true
|
||||
},
|
||||
"mp-toutiao": {
|
||||
"usingComponents": true
|
||||
},
|
||||
"h5": {
|
||||
"router": {
|
||||
"mode": "hash",
|
||||
"base": "/"
|
||||
}
|
||||
},
|
||||
"vueVersion": "2"
|
||||
}
|
||||
```
|
||||
|
||||
### Vue 3 配置
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "my-uniapp-vue3",
|
||||
"appid": "",
|
||||
"description": "uni-app Vue 3 项目",
|
||||
"versionName": "1.0.0",
|
||||
"versionCode": "100",
|
||||
"transformPx": false,
|
||||
"vueVersion": "3",
|
||||
"app-plus": {
|
||||
"usingComponents": true,
|
||||
"compilerVersion": 3
|
||||
},
|
||||
"h5": {
|
||||
"router": {
|
||||
"mode": "hash",
|
||||
"base": "/"
|
||||
}
|
||||
},
|
||||
"mp-weixin": {
|
||||
"appid": "",
|
||||
"setting": {
|
||||
"urlCheck": false
|
||||
},
|
||||
"usingComponents": true
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## pages.json 模板
|
||||
|
||||
### 基础配置
|
||||
|
||||
```json
|
||||
{
|
||||
"pages": [
|
||||
{
|
||||
"path": "pages/index/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "首页"
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationBarTitleText": "uni-app",
|
||||
"navigationBarBackgroundColor": "#F8F8F8",
|
||||
"backgroundColor": "#F8F8F8"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 带 TabBar 配置
|
||||
|
||||
```json
|
||||
{
|
||||
"pages": [
|
||||
{
|
||||
"path": "pages/index/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "首页"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/category/category",
|
||||
"style": {
|
||||
"navigationBarTitleText": "分类"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/cart/cart",
|
||||
"style": {
|
||||
"navigationBarTitleText": "购物车"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/user/user",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的"
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationBarTitleText": "uni-app",
|
||||
"navigationBarBackgroundColor": "#F8F8F8",
|
||||
"backgroundColor": "#F8F8F8"
|
||||
},
|
||||
"tabBar": {
|
||||
"color": "#7A7E83",
|
||||
"selectedColor": "#3cc51f",
|
||||
"borderStyle": "black",
|
||||
"backgroundColor": "#ffffff",
|
||||
"list": [
|
||||
{
|
||||
"pagePath": "pages/index/index",
|
||||
"iconPath": "static/tab-home.png",
|
||||
"selectedIconPath": "static/tab-home-current.png",
|
||||
"text": "首页"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/category/category",
|
||||
"iconPath": "static/tab-category.png",
|
||||
"selectedIconPath": "static/tab-category-current.png",
|
||||
"text": "分类"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/cart/cart",
|
||||
"iconPath": "static/tab-cart.png",
|
||||
"selectedIconPath": "static/tab-cart-current.png",
|
||||
"text": "购物车"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/user/user",
|
||||
"iconPath": "static/tab-user.png",
|
||||
"selectedIconPath": "static/tab-user-current.png",
|
||||
"text": "我的"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 页面模板
|
||||
|
||||
### Vue 2 页面模板
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<text class="title">{{ title }}</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'Hello uni-app'
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
console.log('页面加载', options)
|
||||
},
|
||||
onShow() {
|
||||
console.log('页面显示')
|
||||
},
|
||||
onReady() {
|
||||
console.log('页面初次渲染完成')
|
||||
},
|
||||
onHide() {
|
||||
console.log('页面隐藏')
|
||||
},
|
||||
onUnload() {
|
||||
console.log('页面卸载')
|
||||
},
|
||||
methods: {
|
||||
// 方法
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
padding: 20px;
|
||||
}
|
||||
.title {
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### Vue 3 页面模板（Composition API）
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<text class="title">{{ title }}</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onLoad, onShow, onReady, onHide, onUnload } from '@dcloudio/uni-app'
|
||||
|
||||
const title = ref('Hello uni-app')
|
||||
|
||||
onLoad((options) => {
|
||||
console.log('页面加载', options)
|
||||
})
|
||||
|
||||
onShow(() => {
|
||||
console.log('页面显示')
|
||||
})
|
||||
|
||||
onReady(() => {
|
||||
console.log('页面初次渲染完成')
|
||||
})
|
||||
|
||||
onHide(() => {
|
||||
console.log('页面隐藏')
|
||||
})
|
||||
|
||||
onUnload(() => {
|
||||
console.log('页面卸载')
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
padding: 20px;
|
||||
}
|
||||
.title {
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## 组件模板
|
||||
|
||||
### Vue 2 组件模板
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="my-component">
|
||||
<text>{{ message }}</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'MyComponent',
|
||||
props: {
|
||||
message: {
|
||||
type: String,
|
||||
default: 'Hello'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 数据
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 方法
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.my-component {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### Vue 3 组件模板（Composition API）
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="my-component">
|
||||
<text>{{ message }}</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
message: {
|
||||
type: String,
|
||||
default: 'Hello'
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update', 'delete'])
|
||||
|
||||
// 响应式数据
|
||||
const count = ref(0)
|
||||
|
||||
// 方法
|
||||
const handleClick = () => {
|
||||
emit('update', 'new value')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.my-component {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## App.vue 模板
|
||||
|
||||
### Vue 2 App.vue
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view id="app">
|
||||
<!-- 应用内容 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onLaunch: function() {
|
||||
console.log('App Launch')
|
||||
},
|
||||
onShow: function() {
|
||||
console.log('App Show')
|
||||
},
|
||||
onHide: function() {
|
||||
console.log('App Hide')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* 全局样式 */
|
||||
</style>
|
||||
```
|
||||
|
||||
### Vue 3 App.vue
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view id="app">
|
||||
<!-- 应用内容 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onLaunch, onShow, onHide } from '@dcloudio/uni-app'
|
||||
|
||||
onLaunch(() => {
|
||||
console.log('App Launch')
|
||||
})
|
||||
|
||||
onShow(() => {
|
||||
console.log('App Show')
|
||||
})
|
||||
|
||||
onHide(() => {
|
||||
console.log('App Hide')
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* 全局样式 */
|
||||
</style>
|
||||
```
|
||||
|
||||
## main.js 模板
|
||||
|
||||
### Vue 2 main.js
|
||||
|
||||
```javascript
|
||||
import { createSSRApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
|
||||
export function createApp() {
|
||||
const app = createSSRApp(App)
|
||||
return {
|
||||
app
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Vue 3 main.js
|
||||
|
||||
```javascript
|
||||
import { createSSRApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
|
||||
export function createApp() {
|
||||
const app = createSSRApp(App)
|
||||
return {
|
||||
app
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 使用说明
|
||||
|
||||
1. 根据项目类型选择合适的模板
|
||||
2. 复制模板代码到对应文件
|
||||
3. 根据项目需求修改配置
|
||||
4. 添加页面和组件
|
||||
Reference in New Issue
Block a user