94 lines
1.8 KiB
Markdown
Executable File
94 lines
1.8 KiB
Markdown
Executable File
# uView
|
||
|
||
> uni-app配套的UI框架
|
||
|
||
官网: https://uviewui.com/
|
||
|
||
## 快速体验:
|
||
|
||
1. 安装 `uview` 依赖
|
||
|
||
```js
|
||
npm install uview-ui
|
||
```
|
||
|
||
2. 引入uView主JS库
|
||
|
||
`main.js`
|
||
|
||
```js
|
||
import uView from "uview-ui";
|
||
Vue.use(uView);
|
||
```
|
||
|
||
3. 引入 全局 scss 主题样式文件
|
||
|
||
`uni.scss`
|
||
|
||
```js
|
||
@import 'uview-ui/theme.scss';
|
||
```
|
||
|
||
4. 引入 uview的基础样式
|
||
|
||
`App.vue`
|
||
|
||
```vue
|
||
<style lang="scss">
|
||
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
|
||
@import "uview-ui/index.scss";
|
||
</style>
|
||
```
|
||
|
||
5. 配置uview组件的引入方式
|
||
|
||
`pages.json`
|
||
|
||
```js
|
||
{
|
||
"easycom": {
|
||
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
|
||
},
|
||
|
||
// 此为本身已有的内容
|
||
"pages": [
|
||
// ......
|
||
]
|
||
}
|
||
```
|
||
|
||
6. `index.vue` 中使用 uview的按钮
|
||
|
||
```vue
|
||
<view class="content">
|
||
<u-button>默认按钮</u-button>
|
||
<u-button type="primary">主要按钮</u-button>
|
||
<u-button type="success">成功按钮</u-button>
|
||
<u-button type="info">信息按钮</u-button>
|
||
<u-button type="warning">警告按钮</u-button>
|
||
<u-button type="error">危险按钮</u-button>
|
||
</view>
|
||
```
|
||
|
||
1. 可能会出现以下错误
|
||
|
||
|
||
|
||
2. 解决方法
|
||
|
||
1. 勾选 小程序的 增强编译
|
||
|
||
2. 是使用uniapp的话 不能直接修改 编译后的文件 `project.config.json`
|
||
|
||
3. 修改uniapp项目中的 `manifest.json`
|
||
|
||
```json
|
||
"mp-weixin": { /* 微信小程序特有相关 */
|
||
"appid": "wxfb52f2d7b2f6123a",
|
||
"setting": {
|
||
"urlCheck": false,
|
||
"enhance": false /* 增强编译 */
|
||
},
|
||
"usingComponents": true
|
||
},
|
||
``` |