文章目錄

• • • • • 一、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>

• 運行項目

• 效果圖
  

總結

以上是生活随笔為你收集整理的uni-app集成uview的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。