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,170 @@
|
||||
# Easycom Configuration
|
||||
|
||||
## Easycom 配置
|
||||
|
||||
easycom 是 UniApp 的自动引入机制，配置后可以自动引入 uView 组件，无需手动 import。
|
||||
|
||||
### 基本配置
|
||||
|
||||
在 `pages.json` 中配置 easycom：
|
||||
|
||||
```json
|
||||
{
|
||||
"easycom": {
|
||||
"autoscan": true,
|
||||
"custom": {
|
||||
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 配置说明
|
||||
|
||||
- `autoscan: true`：开启自动扫描
|
||||
- `custom`：自定义规则
|
||||
- `^u-(.*)`：匹配以 `u-` 开头的组件名
|
||||
- `uview-ui/components/u-$1/u-$1.vue`：组件路径，`$1` 是匹配的内容
|
||||
|
||||
### 使用示例
|
||||
|
||||
配置后，可以直接使用组件，无需引入：
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<!-- 直接使用，无需 import -->
|
||||
<u-button type="primary">按钮</u-button>
|
||||
<u-input v-model="value" placeholder="请输入"></u-input>
|
||||
<u-form :model="form">
|
||||
<u-form-item label="用户名">
|
||||
<u-input v-model="form.username"></u-input>
|
||||
</u-form-item>
|
||||
</u-form>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
form: {
|
||||
username: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 完整 pages.json 示例
|
||||
|
||||
```json
|
||||
{
|
||||
"easycom": {
|
||||
"autoscan": true,
|
||||
"custom": {
|
||||
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
|
||||
}
|
||||
},
|
||||
"pages": [
|
||||
{
|
||||
"path": "pages/index/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "首页"
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationBarTitleText": "UniApp",
|
||||
"navigationBarBackgroundColor": "#ffffff",
|
||||
"backgroundColor": "#f5f5f5"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 自定义组件路径
|
||||
|
||||
如果 uView 安装在不同位置，需要调整路径：
|
||||
|
||||
#### npm 安装
|
||||
|
||||
```json
|
||||
{
|
||||
"easycom": {
|
||||
"autoscan": true,
|
||||
"custom": {
|
||||
"^u-(.*)": "node_modules/uview-ui/components/u-$1/u-$1.vue"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### uni_modules 安装
|
||||
|
||||
```json
|
||||
{
|
||||
"easycom": {
|
||||
"autoscan": true,
|
||||
"custom": {
|
||||
"^u-(.*)": "uni_modules/uview-ui/components/u-$1/u-$1.vue"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 禁用 easycom
|
||||
|
||||
如果不想使用 easycom，可以手动引入：
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<u-button>按钮</u-button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uButton from 'uview-ui/components/u-button/u-button.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
uButton
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 验证配置
|
||||
|
||||
创建测试页面验证 easycom 是否生效：
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-button type="primary" @click="test">测试 Easycom</u-button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
test() {
|
||||
console.log('Easycom 配置成功！')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
如果按钮正常显示且无报错，说明 easycom 配置成功。
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. **路径必须正确**：确保组件路径与实际安装位置一致
|
||||
2. **组件名称**：uView 组件都以 `u-` 开头
|
||||
3. **重启项目**：修改 easycom 配置后需要重启项目
|
||||
4. **优先级**：easycom 优先级高于手动引入
|
||||
5. **性能**：easycom 不会影响性能，按需加载组件
|
||||
@@ -0,0 +1,171 @@
|
||||
# Installation
|
||||
|
||||
## 在 UniApp 项目中安装 uView UI
|
||||
|
||||
uView UI 是专为 UniApp 设计的 UI 组件库，需要正确集成到 UniApp 项目中。
|
||||
|
||||
### 方式一：通过 DCloud 插件市场安装（推荐）
|
||||
|
||||
1. 访问 DCloud 插件市场：https://ext.dcloud.net.cn/plugin?id=1593
|
||||
2. 在 HBuilderX 中：
|
||||
- 打开项目
|
||||
- 点击"工具" → "插件安装"
|
||||
- 搜索 "uView UI" 或直接输入插件 ID: 1593
|
||||
- 点击"导入插件"
|
||||
3. 插件会自动导入到 `uni_modules/uview-ui` 目录
|
||||
|
||||
### 方式二：通过 npm 安装
|
||||
|
||||
```bash
|
||||
npm install uview-ui
|
||||
```
|
||||
|
||||
安装后，uView UI 位于 `node_modules/uview-ui` 目录。
|
||||
|
||||
### 方式三：手动下载安装
|
||||
|
||||
1. 从 GitHub 下载：https://github.com/umicro/uView
|
||||
2. 将下载的文件解压到项目的 `uni_modules/uview-ui` 目录
|
||||
|
||||
## UniApp 项目配置
|
||||
|
||||
### 1. 在 main.js 中引入
|
||||
|
||||
```javascript
|
||||
// main.js
|
||||
import App from './App'
|
||||
import uView from 'uview-ui'
|
||||
|
||||
// #ifdef VUE3
|
||||
import { createSSRApp } from 'vue'
|
||||
export function createApp() {
|
||||
const app = createSSRApp(App)
|
||||
app.use(uView)
|
||||
return {
|
||||
app
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
|
||||
// #ifndef VUE3
|
||||
import Vue from 'vue'
|
||||
Vue.use(uView)
|
||||
Vue.config.productionTip = false
|
||||
App.mpType = 'app'
|
||||
const app = new Vue({
|
||||
...App
|
||||
})
|
||||
app.$mount()
|
||||
// #endif
|
||||
```
|
||||
|
||||
### 2. 在 App.vue 中引入样式
|
||||
|
||||
```vue
|
||||
<!-- App.vue -->
|
||||
<style lang="scss">
|
||||
/* 引入 uView 基础样式 */
|
||||
@import "uview-ui/index.scss";
|
||||
</style>
|
||||
```
|
||||
|
||||
### 3. 在 uni.scss 中引入主题变量（可选）
|
||||
|
||||
```scss
|
||||
/* uni.scss */
|
||||
@import "uview-ui/theme.scss";
|
||||
```
|
||||
|
||||
### 4. 配置 easycom（重要）
|
||||
|
||||
在 `pages.json` 中配置 easycom，实现组件自动引入：
|
||||
|
||||
```json
|
||||
{
|
||||
"easycom": {
|
||||
"autoscan": true,
|
||||
"custom": {
|
||||
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
|
||||
}
|
||||
},
|
||||
"pages": [
|
||||
// ... 页面配置
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### 5. 验证安装
|
||||
|
||||
创建测试页面 `pages/index/index.vue`：
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-button type="primary">uView 按钮</u-button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
padding: 20rpx;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
如果按钮正常显示，说明安装成功。
|
||||
|
||||
## 目录结构
|
||||
|
||||
安装后的项目结构：
|
||||
|
||||
```
|
||||
uniapp-project/
|
||||
├── uni_modules/
|
||||
│ └── uview-ui/ # uView UI 插件
|
||||
│ ├── components/ # 组件目录
|
||||
│ ├── index.scss # 基础样式
|
||||
│ └── theme.scss # 主题变量
|
||||
├── pages/ # 页面目录
|
||||
├── static/ # 静态资源
|
||||
├── App.vue # 应用入口
|
||||
├── main.js # 主入口文件
|
||||
├── pages.json # 页面配置
|
||||
├── manifest.json # 应用配置
|
||||
└── uni.scss # 全局样式变量
|
||||
```
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. **SCSS 支持**：确保项目支持 SCSS，在 HBuilderX 中创建项目时选择支持 SCSS
|
||||
2. **easycom 配置**：必须配置 easycom，否则需要手动引入每个组件
|
||||
3. **路径问题**：如果使用 npm 安装，注意路径可能需要调整
|
||||
4. **版本兼容**：确保 uView UI 版本与 UniApp 版本兼容
|
||||
5. **Vue 版本**：uView UI 支持 Vue 2 和 Vue 3，注意对应的使用方式
|
||||
|
||||
## 常见问题
|
||||
|
||||
### 组件找不到
|
||||
|
||||
- 检查 easycom 配置是否正确
|
||||
- 检查组件名称是否正确（u-button, u-input 等）
|
||||
- 检查是否在 main.js 中注册了 uView
|
||||
|
||||
### 样式不生效
|
||||
|
||||
- 检查是否在 App.vue 中引入了 `uview-ui/index.scss`
|
||||
- 检查 style 标签是否设置了 `lang="scss"`
|
||||
- 检查项目是否支持 SCSS
|
||||
|
||||
### 主题变量不生效
|
||||
|
||||
- 检查是否在 uni.scss 中引入了 `uview-ui/theme.scss`
|
||||
- 检查变量名称是否正确
|
||||
- 检查 SCSS 语法是否正确
|
||||
@@ -0,0 +1,264 @@
|
||||
# Project Setup
|
||||
|
||||
## UniApp 项目配置
|
||||
|
||||
配置 UniApp 项目以正确使用 uView UI。
|
||||
|
||||
### 项目结构
|
||||
|
||||
标准的 UniApp + uView 项目结构：
|
||||
|
||||
```
|
||||
uniapp-project/
|
||||
├── uni_modules/
|
||||
│ └── uview-ui/ # uView UI 插件
|
||||
├── pages/ # 页面目录
|
||||
│ ├── index/
|
||||
│ │ └── index.vue
|
||||
│ └── ...
|
||||
├── components/ # 自定义组件
|
||||
├── static/ # 静态资源
|
||||
├── utils/ # 工具函数
|
||||
├── App.vue # 应用入口
|
||||
├── main.js # 主入口文件
|
||||
├── pages.json # 页面配置
|
||||
├── manifest.json # 应用配置
|
||||
└── uni.scss # 全局样式变量
|
||||
```
|
||||
|
||||
### 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 lang="scss">
|
||||
/* 引入 uView 基础样式 */
|
||||
@import "uview-ui/index.scss";
|
||||
|
||||
/* 全局样式 */
|
||||
page {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### main.js 配置
|
||||
|
||||
#### Vue 2 项目
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
import App from './App'
|
||||
import uView from 'uview-ui'
|
||||
|
||||
Vue.use(uView)
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
App.mpType = 'app'
|
||||
|
||||
const app = new Vue({
|
||||
...App
|
||||
})
|
||||
app.$mount()
|
||||
```
|
||||
|
||||
#### Vue 3 项目
|
||||
|
||||
```javascript
|
||||
import { createSSRApp } from 'vue'
|
||||
import App from './App'
|
||||
import uView from 'uview-ui'
|
||||
|
||||
export function createApp() {
|
||||
const app = createSSRApp(App)
|
||||
app.use(uView)
|
||||
return {
|
||||
app
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### pages.json 配置
|
||||
|
||||
```json
|
||||
{
|
||||
"easycom": {
|
||||
"autoscan": true,
|
||||
"custom": {
|
||||
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
|
||||
}
|
||||
},
|
||||
"pages": [
|
||||
{
|
||||
"path": "pages/index/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "首页",
|
||||
"navigationStyle": "default",
|
||||
"navigationBarBackgroundColor": "#ffffff",
|
||||
"navigationBarTextStyle": "black"
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationBarTitleText": "UniApp",
|
||||
"navigationBarBackgroundColor": "#ffffff",
|
||||
"backgroundColor": "#f5f5f5"
|
||||
},
|
||||
"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": "首页"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### uni.scss 配置
|
||||
|
||||
```scss
|
||||
/* uni.scss */
|
||||
/* 引入 uView 主题变量 */
|
||||
@import "uview-ui/theme.scss";
|
||||
|
||||
/* 自定义全局变量 */
|
||||
$uni-color-primary: #409EFF;
|
||||
$uni-bg-color: #f5f5f5;
|
||||
```
|
||||
|
||||
### manifest.json 配置要点
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "uniapp-uview-project",
|
||||
"appid": "",
|
||||
"description": "",
|
||||
"versionName": "1.0.0",
|
||||
"versionCode": "100",
|
||||
"transformPx": false,
|
||||
"app-plus": {
|
||||
"usingComponents": true
|
||||
},
|
||||
"h5": {
|
||||
"router": {
|
||||
"mode": "hash"
|
||||
}
|
||||
},
|
||||
"mp-weixin": {
|
||||
"appid": "",
|
||||
"setting": {
|
||||
"urlCheck": false
|
||||
},
|
||||
"usingComponents": true
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 开发环境配置
|
||||
|
||||
### HBuilderX 配置
|
||||
|
||||
1. **启用 SCSS 支持**：
|
||||
- 创建项目时选择支持 SCSS
|
||||
- 或在项目设置中启用 SCSS 编译
|
||||
|
||||
2. **配置编译器**：
|
||||
- 工具 → 选项 → HBuilderX → 编译器
|
||||
- 确保启用 SCSS 编译
|
||||
|
||||
### 条件编译
|
||||
|
||||
使用条件编译处理平台差异：
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<!-- #ifdef H5 -->
|
||||
<view>H5 平台特有内容</view>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view>微信小程序特有内容</view>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<view>App 平台特有内容</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
## 验证配置
|
||||
|
||||
创建测试页面验证配置是否正确：
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-navbar title="测试页面"></u-navbar>
|
||||
<view class="content">
|
||||
<u-button type="primary" @click="test">测试按钮</u-button>
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
test() {
|
||||
this.$u.toast('配置成功！')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 20rpx;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. **easycom 必须配置**：否则需要手动引入每个组件
|
||||
2. **SCSS 必须支持**：uView 依赖 SCSS
|
||||
3. **路径正确性**：确保引入路径正确
|
||||
4. **版本兼容**：确保 UniApp 和 uView 版本兼容
|
||||
5. **平台测试**：在不同平台测试功能
|
||||
Reference in New Issue
Block a user