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,129 @@
|
||||
# uni-app-x CLI 命令模板
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档：https://uniapp.dcloud.net.cn/quickstart-cli.html
|
||||
|
||||
## 项目创建命令
|
||||
|
||||
### 使用官方模板
|
||||
|
||||
```bash
|
||||
# 创建项目
|
||||
npx degit dcloudio/uni-preset-vue-x my-project
|
||||
|
||||
# 或使用官方脚手架
|
||||
npm create uni-app-x@latest my-project
|
||||
```
|
||||
|
||||
### 使用 HBuilderX
|
||||
|
||||
1. 文件 → 新建 → 项目
|
||||
2. 选择 **uni-app x**
|
||||
3. 选择模板
|
||||
4. 填写项目信息
|
||||
5. 点击创建
|
||||
|
||||
## 项目运行命令
|
||||
|
||||
### 开发环境
|
||||
|
||||
```bash
|
||||
# H5 平台
|
||||
npm run dev:h5
|
||||
|
||||
# 微信小程序
|
||||
npm run dev:mp-weixin
|
||||
|
||||
# App（需要 HBuilderX）
|
||||
npm run dev:app
|
||||
```
|
||||
|
||||
### 生产环境
|
||||
|
||||
```bash
|
||||
# H5 平台
|
||||
npm run build:h5
|
||||
|
||||
# 微信小程序
|
||||
npm run build:mp-weixin
|
||||
|
||||
# App（需要 HBuilderX）
|
||||
npm run build:app
|
||||
```
|
||||
|
||||
## 常用命令
|
||||
|
||||
### 安装依赖
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
### 类型检查
|
||||
|
||||
```bash
|
||||
# TypeScript 类型检查
|
||||
npm run type-check
|
||||
|
||||
# 或使用 tsc
|
||||
npx tsc --noEmit
|
||||
```
|
||||
|
||||
### 代码检查
|
||||
|
||||
```bash
|
||||
# ESLint 检查
|
||||
npm run lint
|
||||
|
||||
# 自动修复
|
||||
npm run lint:fix
|
||||
```
|
||||
|
||||
## 一键创建项目脚本
|
||||
|
||||
```bash
|
||||
#!/bin/bash
|
||||
# create-uniappx-project.sh
|
||||
|
||||
PROJECT_NAME=$1
|
||||
|
||||
if [ -z "$PROJECT_NAME" ]; then
|
||||
echo "Usage: ./create-uniappx-project.sh <project-name>"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
echo "Creating uni-app-x project: $PROJECT_NAME"
|
||||
npx degit dcloudio/uni-preset-vue-x $PROJECT_NAME
|
||||
cd $PROJECT_NAME
|
||||
npm install
|
||||
echo "Project created successfully!"
|
||||
echo "Run 'npm run dev:h5' to start development server"
|
||||
```
|
||||
|
||||
## 项目初始化完整流程
|
||||
|
||||
```bash
|
||||
# 1. 创建项目
|
||||
npx degit dcloudio/uni-preset-vue-x 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
|
||||
```
|
||||
|
||||
## 参考资源
|
||||
|
||||
- uni-app-x 文档：https://doc.dcloud.net.cn/uni-app-x/
|
||||
- TypeScript 文档：https://www.typescriptlang.org/
|
||||
- Vite 文档：https://cn.vitejs.dev/
|
||||
@@ -0,0 +1,245 @@
|
||||
# uni-app-x 项目模板
|
||||
|
||||
## 官方文档
|
||||
|
||||
参考官方文档：https://uniapp.dcloud.net.cn/quickstart-cli.html
|
||||
|
||||
## 标准项目结构
|
||||
|
||||
```
|
||||
my-uniappx-project/
|
||||
├── src/
|
||||
│ ├── pages/ # 页面目录
|
||||
│ │ ├── index/
|
||||
│ │ │ └── index.vue
|
||||
│ │ └── ...
|
||||
│ ├── components/ # 组件目录
|
||||
│ │ └── ...
|
||||
│ ├── static/ # 静态资源
|
||||
│ ├── utils/ # 工具函数
|
||||
│ ├── api/ # API 接口
|
||||
│ ├── store/ # 状态管理（Pinia）
|
||||
│ ├── App.vue # 应用入口
|
||||
│ └── main.ts # TypeScript 入口
|
||||
├── manifest.json # 应用配置
|
||||
├── pages.json # 页面路由配置
|
||||
├── vite.config.ts # Vite 配置
|
||||
├── tsconfig.json # TypeScript 配置
|
||||
└── package.json
|
||||
```
|
||||
|
||||
## manifest.json 模板
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "my-uniappx",
|
||||
"appid": "",
|
||||
"description": "uni-app-x 项目",
|
||||
"versionName": "1.0.0",
|
||||
"versionCode": "100",
|
||||
"transformPx": false,
|
||||
"uni-app-x": {
|
||||
"compilerVersion": "1.0.0",
|
||||
"vueVersion": "3",
|
||||
"typescript": true
|
||||
},
|
||||
"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-x",
|
||||
"navigationBarBackgroundColor": "#F8F8F8",
|
||||
"backgroundColor": "#F8F8F8"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 页面模板（TypeScript + Composition API）
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<text class="title">{{ title }}</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { onLoad, onShow, onReady, onHide, onUnload } from '@dcloudio/uni-app'
|
||||
|
||||
const title = ref<string>('Hello uni-app-x')
|
||||
|
||||
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>
|
||||
```
|
||||
|
||||
## 组件模板（TypeScript）
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="my-component">
|
||||
<text>{{ message }}</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
interface Props {
|
||||
message?: string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
message: 'Hello'
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update', value: string): void
|
||||
(e: 'delete'): void
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.my-component {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## App.vue 模板
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view id="app">
|
||||
<!-- 应用内容 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
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.ts 模板
|
||||
|
||||
```typescript
|
||||
import { createSSRApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
|
||||
export function createApp() {
|
||||
const app = createSSRApp(App)
|
||||
return {
|
||||
app
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## vite.config.ts 模板
|
||||
|
||||
```typescript
|
||||
import { defineConfig } from 'vite'
|
||||
import uni from '@dcloudio/vite-plugin-uni'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [uni()],
|
||||
server: {
|
||||
port: 3000,
|
||||
open: true
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## tsconfig.json 模板
|
||||
|
||||
```json
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"module": "ESNext",
|
||||
"lib": ["ES2020", "DOM"],
|
||||
"jsx": "preserve",
|
||||
"moduleResolution": "node",
|
||||
"strict": true,
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"types": ["@dcloudio/types"]
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
```
|
||||
Reference in New Issue
Block a user