文章目录
- 一、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>
- 运行项目
- 效果图
