uni-app集成uview

文章目录

一、uni_modules方式
- 1. 创建uni-app项目
- 2. 安装uview
- 3. 安装SCSS插件
二、配置步骤
- 2.1. 引入uView主JS库
- 2.2. 引入主题文件
- 2.3. 引入uView基础样式
- 2.4. 配置easycom组件模式
- 2.5. 实战
三、zip方式
- 3.1. 创建uni-app项目
- 3.2. 下载uview
- 3.3. 解压+重命名
- 3.4. 拷贝UI
- 3.5. 安装SCSS插件
四、配置步骤
- 4.1. 引入uView主JS库
- 4.2. 引入uView 主题文件
- 4.3. 引入uView基础样式
- 4.4. 配置组件模式
- 4.5. 实战

uview 官网
https://www.uviewui.com/components/install.html
安装方式

一、uni_modules方式

1. 创建uni-app项目

2. 安装uview

链接：https://ext.dcloud.net.cn/plugin?id=1593

3. 安装SCSS插件

前提：
安装SCSS插件
https://ext.dcloud.net.cn/plugin?id=2046

二、配置步骤

2.1. 引入uView主JS库

在项目根目录中的main.js中，引入并使用uView的JS库，注意这两行要放在import Vue之后。

// main.js
import uView from '@/uni_modules/uview-ui'
Vue.use(uView)

2.2. 引入主题文件

在引入uView的全局SCSS主题文件
在项目根目录的uni.scss中引入此文件。

/* uni.scss */
@import '@/uni_modules/uview-ui/theme.scss';

2.3. 引入uView基础样式

注意！
在App.vue中首行的位置引入，注意给style标签加入lang="scss"属性

<style lang="scss">/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */@import "@/uni_modules/uview-ui/index.scss";
</style>

2.4. 配置easycom组件模式

此配置需要在项目根目录的pages.json中进行,咱们是通过uni_modules形式引入uView，可以忽略此配置。

温馨提示:
uni-app为了调试性能的原因，修改easycom规则不会实时生效，配置完后，您需要重启HX或者重新编译项目才能正常使用uView的功能。
请确保您的pages.json中只有一个easycom字段，否则请自行合并多个引入规则。
如果您是通过uni_modules形式引入uView，可以忽略此配置

// pages.json
{// 如果您是通过uni_modules形式引入uView，可以忽略此配置"easycom": {"^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue"},// 此为本身已有的内容"pages": [// ......]
}

2.5. 实战

将pages/index/index.vue的内容替换如下内容

<template><view><!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 --><u--formlabelPosition="left":model="model1":rules="rules"ref="form1"><u-form-itemlabel="姓名"prop="userInfo.name"borderBottomref="item1"><u--inputv-model="model1.userInfo.name"border="none"></u--input></u-form-item><u-form-itemlabel="性别"prop="userInfo.sex"borderBottom@click="showSex = true; hideKeyboard()"ref="item1"><u--inputv-model="model1.userInfo.sex"disableddisabledColor="#ffffff"placeholder="请选择性别"border="none"></u--input><u-iconslot="right"name="arrow-right"></u-icon></u-form-item></u--form><u-action-sheet:show="showSex":actions="actions"title="请选择性别"description="如果选择保密会报错"@close="showSex = false"@select="sexSelect"></u-action-sheet></view>
</template><script>
export default {data() {return {showSex: false,model1: {userInfo: {name: 'uView UI',sex: '',},},actions: [{name: '男',},{name: '女',},{name: '保密',},],rules: {'userInfo.name': {type: 'string',required: true,message: '请填写姓名',trigger: ['blur', 'change']},'userInfo.sex': {type: 'string',max: 1,required: true,message: '请选择男或女',trigger: ['blur', 'change']},},radio: '',switchVal: false};},methods: {sexSelect(e) {this.model1.userInfo.sex = e.namethis.$refs.form1.validateField('userInfo.sex')},},
};
</script>

运行项目

效果图

三、zip方式

3.1. 创建uni-app项目

3.2. 下载uview

链接：https://ext.dcloud.net.cn/plugin?id=1593

3.3. 解压+重命名

解压uview-ui_2.0.20.zip
将uview-ui_2.0.20重命名为uview-ui

3.4. 拷贝UI

将uview-ui文件夹复制到项目中

3.5. 安装SCSS插件

前提：
安装SCSS插件
https://ext.dcloud.net.cn/plugin?id=2046

四、配置步骤

4.1. 引入uView主JS库

在项目根目录中的main.js中，引入并使用uView的JS库，注意这两行要放在import Vue之后。

// main.js
import uView from '@/uview-ui'
Vue.use(uView)

4.2. 引入uView 主题文件

在引入uView的全局SCSS主题文件
在项目根目录的uni.scss中引入此文件。

/* uni.scss */
@import '@/uview-ui/theme.scss';

4.3. 引入uView基础样式

注意！
在App.vue中首行的位置引入，注意给style标签加入lang="scss"属性

<style lang="scss">/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */@import "@/uview-ui/index.scss";/*每个页面公共css */
</style>

4.4. 配置组件模式

配置easycom组件模式
此配置需要在项目根目录的pages.json中进行。

温馨提示
uni-app为了调试性能的原因，修改easycom规则不会实时生效，配置完后，您需要重启HX或者重新编译项目才能正常使用uView的功能。
请确保您的pages.json中只有一个easycom字段，否则请自行合并多个引入规则。
如果您是通过uni_modules形式引入uView，可以忽略此配置

// pages.json
{// 如果您是通过uni_modules形式引入uView，可以忽略此配置"easycom": {"^u-(.*)": "@uview-ui/components/u-$1/u-$1.vue"},// 此为本身已有的内容"pages": [// ......]
}

4.5. 实战

将pages/index/index.vue的内容替换如下内容

<template><view><!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 --><u--formlabelPosition="left":model="model1":rules="rules"ref="form1"><u-form-itemlabel="姓名"prop="userInfo.name"borderBottomref="item1"><u--inputv-model="model1.userInfo.name"border="none"></u--input></u-form-item><u-form-itemlabel="性别"prop="userInfo.sex"borderBottom@click="showSex = true; hideKeyboard()"ref="item1"><u--inputv-model="model1.userInfo.sex"disableddisabledColor="#ffffff"placeholder="请选择性别"border="none"></u--input><u-iconslot="right"name="arrow-right"></u-icon></u-form-item></u--form><u-action-sheet:show="showSex":actions="actions"title="请选择性别"description="如果选择保密会报错"@close="showSex = false"@select="sexSelect"></u-action-sheet></view>
</template><script>
export default {data() {return {showSex: false,model1: {userInfo: {name: 'uView UI',sex: '',},},actions: [{name: '男',},{name: '女',},{name: '保密',},],rules: {'userInfo.name': {type: 'string',required: true,message: '请填写姓名',trigger: ['blur', 'change']},'userInfo.sex': {type: 'string',max: 1,required: true,message: '请选择男或女',trigger: ['blur', 'change']},},radio: '',switchVal: false};},methods: {sexSelect(e) {this.model1.userInfo.sex = e.namethis.$refs.form1.validateField('userInfo.sex')},},
};
</script>

运行项目

效果图