网站开发 男生,如何在百度上推广自己,深圳中瑞建设集团官方网站,合肥市建设工程市场信息价文章目录一、uni_modules方式1. 创建uni-app项目2. 安装uview3. 安装SCSS插件二、配置步骤2.1. 引入uView主JS库2.2. 引入主题文件2.3. 引入uView基础样式2.4. 配置easycom组件模式2.5. 实战三、zip方式3.1. 创建uni-app项目3.2. 下载uview3.3. 解压重命名3.4. 拷贝UI3.5. 安装…
文章目录一、uni_modules方式1. 创建uni-app项目2. 安装uview3. 安装SCSS插件二、配置步骤2.1. 引入uView主JS库2.2. 引入主题文件2.3. 引入uView基础样式2.4. 配置easycom组件模式2.5. 实战三、zip方式3.1. 创建uni-app项目3.2. 下载uview3.3. 解压重命名3.4. 拷贝UI3.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?id1593 3. 安装SCSS插件
前提 安装SCSS插件 https://ext.dcloud.net.cn/plugin?id2046
二、配置步骤
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标签加入langscss属性 style langscss/* 注意要写在第一行同时给style标签加入langscss属性 */import /uni_modules/uview-ui/index.scss;
/style2.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的内容替换如下内容
templateview!-- 注意如果需要兼容微信小程序最好通过setRules方法设置rules规则 --u--formlabelPositionleft:modelmodel1:rulesrulesrefform1u-form-itemlabel姓名propuserInfo.nameborderBottomrefitem1u--inputv-modelmodel1.userInfo.namebordernone/u--input/u-form-itemu-form-itemlabel性别propuserInfo.sexborderBottomclickshowSex true; hideKeyboard()refitem1u--inputv-modelmodel1.userInfo.sexdisableddisabledColor#ffffffplaceholder请选择性别bordernone/u--inputu-iconslotrightnamearrow-right/u-icon/u-form-item/u--formu-action-sheet:showshowSex:actionsactionstitle请选择性别description如果选择保密会报错closeshowSex falseselectsexSelect/u-action-sheet/view
/templatescript
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?id1593
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?id2046
四、配置步骤
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标签加入langscss属性 style langscss/* 注意要写在第一行同时给style标签加入langscss属性 */import /uview-ui/index.scss;/*每个页面公共css */
/style4.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的内容替换如下内容
templateview!-- 注意如果需要兼容微信小程序最好通过setRules方法设置rules规则 --u--formlabelPositionleft:modelmodel1:rulesrulesrefform1u-form-itemlabel姓名propuserInfo.nameborderBottomrefitem1u--inputv-modelmodel1.userInfo.namebordernone/u--input/u-form-itemu-form-itemlabel性别propuserInfo.sexborderBottomclickshowSex true; hideKeyboard()refitem1u--inputv-modelmodel1.userInfo.sexdisableddisabledColor#ffffffplaceholder请选择性别bordernone/u--inputu-iconslotrightnamearrow-right/u-icon/u-form-item/u--formu-action-sheet:showshowSex:actionsactionstitle请选择性别description如果选择保密会报错closeshowSex falseselectsexSelect/u-action-sheet/view
/templatescript
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运行项目 效果图
