uView UI密任，是uni-app生態(tài)最優(yōu)秀的UI框架扼仲，全面的組件和便捷的工具會(huì)讓您信手拈來虎锚，如魚得水壁查。
框架文檔地址：https://www.uviewui.com
Dcloud官方已將 uView ui?列為 uni-app項(xiàng)目開發(fā)的推薦框架（并獲得 Dcloud 2020?插件大賽一等獎(jiǎng)）焰盗，
官方社區(qū)推薦文章地址：https://ask.dcloud.net.cn/article/35489
小編榮幸的分享了本篇教程璧尸，小編作為 uView ui 框架的開發(fā)組成員之一（給自己的簡歷狠狠的抹上這一筆極度膨脹的色彩）。
uView UI?框架有?下載安裝?和 npm安裝 兩種方式熬拒，本篇文章介紹 npm?安裝的方式爷光。
下載安裝教程請(qǐng)閱讀本篇教程的姊妹篇《如何快速上手uni-app生態(tài)的uView UI框架》。小編更推薦大家使用?下載安裝?方式澎粟。
本篇教程正式開始
一蛀序、安裝?HBuilderX?開發(fā)工具
uni-app?項(xiàng)目需要在?HBuilderX?開發(fā)工具中運(yùn)行欢瞪，HBuilderX下載地址：https://www.dcloud.io/hbuilderx.html，下載 App開發(fā)版徐裸。
二遣鼓、創(chuàng)建 uni-app?項(xiàng)目
打開?HBuilderX?開發(fā)工具，新建一個(gè) uni-app?項(xiàng)目重贺，使用 “默認(rèn)模板”骑祟，參考下圖
三、使用 npm包管理器下載 uView ui
注意事項(xiàng)：
npm包管理器气笙，需要安裝 Node.js?語言開發(fā)環(huán)境次企，Node.js下載地址：https://nodejs.org/zh-cn/。
安裝完 Node.js語言開發(fā)環(huán)境后潜圃，在終端輸入 npm -v?能查看到 npm?版本號(hào)?則成功抒巢，若無法查看到 npm?的版本號(hào)可以重新啟動(dòng)電腦試一試，或者重新安裝一次秉犹。
打開?HBuilderX?開發(fā)工具的終端輸入下方示例代碼蛉谜，下載uView ui?框架文件。
// 如果您的項(xiàng)目是 HBuilderX 創(chuàng)建的崇堵，根目錄又沒有 package.json 文件的話型诚，請(qǐng)先執(zhí)行如下命令：
// npm init -y
// 安裝
npm i uview-ui
不喜歡或者不知道?HBuilderX?開發(fā)工具的終端在那打開的伙伴可以使用電腦操作系統(tǒng)終端(命令提示符)進(jìn)入到當(dāng)前項(xiàng)目文件夾目錄。
cnpm?安裝目前有未知問題鸳劳，目前僅支持使用 npm?安裝
四狰贯、配置 uView ui?框架
1.引入uView主JS庫
在項(xiàng)目根目錄中的 main.js 中，引入并使用 uView 的 JS 庫赏廓，注意這兩行要放在 import Vue 之后涵紊。
import uView from "uview-ui";
Vue.use(uView);
2.在引入uView的全局SCSS主題文件
在項(xiàng)目根目錄的 uni.scss 中引入此文件。
@import 'uview-ui/theme.scss';
3.引入uView基礎(chǔ)樣式
注意事項(xiàng)：
因?yàn)閡View ui 的使用了 scss?做為 css?的擴(kuò)展語言幔摸，所以我們需要在 HBuilderX開發(fā)工具中安裝scss的插件摸柄。
安裝步驟： HBuilderX開發(fā)工具菜單欄“工具” > “插件安裝” > “sass/scss編譯” > “安裝”，見下圖
在 App.vue 中首行的位置引入既忆，注意給 style標(biāo)簽 加入 lang="scss" 屬性
<style lang="scss">
/* 注意要寫在第一行驱负，同時(shí)給style標(biāo)簽加入lang="scss"屬性 */
@import "uview-ui/index.scss";
</style>
4.配置easycom組件模式
此配置需要在項(xiàng)目根目錄的 pages.json 中進(jìn)行。
{
? ? "easycom": {
? ? ? ? "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
? ? },
? ? // 此為本身已有的內(nèi)容
? ? "pages": [
? ? ? ? // ......
? ? ]
}
五患雇、使用 uView ui?框架
當(dāng)你進(jìn)行到這一步時(shí)跃脊，恭喜你前面不開心的過程已經(jīng)結(jié)束，接下來可以盡量了享受 uView ui?框架帶來的優(yōu)質(zhì)體驗(yàn)苛吱。
運(yùn)行效果：
示例源碼：
<template>
<view>
<u-button type="success">
<text>{{title}} 框架真好</text>
<u-icon name="thumb-up-fill" color="#ffffff" size="28"></u-icon>
</u-button>
</view>
</template>
<script>
export default {
data() {
return {
title: 'uView ui'
}
},
onLoad() {
},
methods: {
}
}
</script>
<style lang="scss">
</style>
————————————————
版權(quán)聲明：本文為CSDN博主「黃河愛浪」的原創(chuàng)文章酪术，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明翠储。
原文鏈接：https://blog.csdn.net/u013350495/article/details/106042826/
