---

創(chuàng)建 UniApp 項目

首先，確保你已經(jīng)安裝好了 Node.js 和 HBuilderX（或者使用其他支持 UniApp 的開發(fā)環(huán)境）。

1. 安裝 HBuilderX：如果你還沒有安裝 HBuilderX，可以到官網(wǎng)下載并安裝：HBuilderX 官網(wǎng)。

2. 創(chuàng)建 UniApp 項目：

   • 打開 HBuilderX，選擇「新建項目」。
   • 選擇「UniApp」，然后點擊「下一步」。
   • 輸入項目名稱和路徑，選擇模板（比如「默認模板」），然后點擊「完成」創(chuàng)建項目。

前情步驟，可查看以下文章
[巨詳細]安裝HBuilder-X教程

[巨詳細]使用HBuilder-X新建uniapp項目教程

下載uView UI

官網(wǎng)地址：uView UI 官網(wǎng)：https://uviewui.com/
下載地址：uView UI下載：https://ext.dcloud.net.cn/plugin?id=1593

uView UI 目前分為下載安裝和npm安裝兩種，各有利弊具體區(qū)別看官網(wǎng)

下載安裝方式

步驟 1: 安裝 uView UI

點擊下載地址：uView UI下載：https://ext.dcloud.net.cn/plugin?id=1593

點擊下載并導入hbuilder

選擇合適的項目，點擊確定安裝

出現(xiàn)導入成功就是安裝成功了。

步驟 2: 查看uView UI是否下載成功

有uni_modules文件夾或者uview-ui文件夾在根目錄就是下載成功了。

步驟 3: 引入 uView 主 JS 庫

在項目根目錄中的 main.js 文件中引入并使用 uView 的 JS 庫。

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

步驟 4: 引入 uView 的全局 SCSS 主題文件

在項目根目錄的 uni.scss 文件中引入 uView 的 SCSS 主題文件。

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

步驟 5: 引入 uView 基礎樣式

在 App.vue 中的 <style> 標簽中的首行位置引入 uView 的基礎樣式，確保給 <style> 標簽加入 lang="scss" 屬性。

<!-- App.vue -->
<style lang="scss">/* 注意要寫在第一行，同時給style標簽加入lang="scss"屬性 */@import "uview-ui/index.scss";
</style>

步驟 6: 配置 easycom 組件模式

在項目根目錄的 pages.json 文件中配置 easycom 組件模式，確保 uView 的組件可以在項目中被正確引用。

// pages.json
{"easycom": {"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"},// 此為本身已有的內(nèi)容"pages": [// ......]
}

注意事項

• 確保在 main.js 中引入 uView 的操作放在 import Vue from 'vue'; 之后。
• 需要重啟或重新編譯項目以使 easycom 的配置生效。
• 檢查 uni.scss 和 App.vue 中的樣式引入語句是否正確，確保路徑和文件名與實際 uView 所在位置一致。

通過以上步驟，你已經(jīng)成功地將 uView UI 集成到了你的 UniApp 項目中，并可以開始使用其提供的豐富組件和樣式來構建界面。

NPM方式

安裝和使用 uView UI 在 UniApp 中是相對簡單的過程，下面我來為你提供一個基本的教程。

步驟 1: 安裝 uView UI

接下來，我們需要在 UniApp 項目中安裝 uView UI。

1. 打開終端：

   • 在 HBuilderX 中，點擊菜單欄的「工具」->「開發(fā)者工具」->「終端」，這樣就可以打開終端。

2. 使用 npm 安裝 uView UI：

   • 在終端中輸入以下命令來安裝 uView UI：

     npm install uview-ui

• 或者使用 yarn 安裝：

     yarn add uview-ui

步驟 2: 配置 uView UI

安裝完成 uView UI 后，需要在項目中進行配置。

• 在 pages.json 文件中，將 uview-ui 的樣式文件引入到 globalStyle 字段中，例如：

     "globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8","app-plus": {"preload": {"preloadRule": {"path": "pages/index/index.vue","style": {"loading": true}}}},"usingComponents": {"u-loading": "uview-ui/components/u-loading/u-loading"}}

• 在需要使用 uView UI 的頁面中，例如 index.vue，可以像使用其他組件一樣直接使用 uView UI 的組件，例如：

     <template><view><u-loading :show="true" :type="'chiaroscuro'" :color="'#007AFF'" :text="'加載中...'"></u-loading></view></template><script>export default {data() {return {}}}</script>

• 上述代碼中，我們使用了 uView UI 的 u-loading 組件來展示一個加載中的提示。

使用uView UI組件

用按鈕為案例

復制到文檔中

    <u-button type="primary" text="確定"></u-button><u-button type="primary" :plain="true" text="鏤空"></u-button>

項目展示效果：

您好，我是肥晨。
歡迎關注我獲取前端學習資源，日常分享技術變革，生存法則；行業(yè)內(nèi)幕，洞察先機。