ToB企服应用市场:ToB评测及商务社交产业平台

标题: [保姆级教程]uniapp安装使用uViewUI教程 [打印本页]

---

作者: 不到断气不罢休    时间: 2024-7-21 19:57
标题: [保姆级教程]uniapp安装使用uViewUI教程

  

---

创建 UniApp 项目

起首，确保你已经安装好了 Node.js 和 HBuilderX（大概使用其他支持 UniApp 的开发环境）。

• 安装 HBuilderX：假如你还没有安装 HBuilderX，可以到官网下载并安装：HBuilderX 官网。
  
• 创建 UniApp 项目：
  
  
  
  • 打开 HBuilderX，选择「新建项目」。
    
  • 选择「UniApp」，然后点击「下一步」。
    
  • 输入项目名称和路径，选择模板（比如「默认模板」），然后点击「完成」创建项目。
    
  
  

前情步调，可检察以下文章
[巨详细]安装HBuilder-X教程
[巨详细]使用HBuilder-X新建uniapp项目教程
下载uView UI

官网地点：uView UI 官网：https://uviewui.com/
下载地点：uView UI下载：https://ext.dcloud.net.cn/plugin?id=1593
uView UI 目前分为下载安装和npm安装两种，各有利弊详细区别看官网
下载安装方式

步调 1: 安装 uView UI

点击下载地点：uView UI下载：https://ext.dcloud.net.cn/plugin?id=1593

点击下载并导入hbuilder

选择符合的项目，点击确定安装

出现导入成功就是安装成功了。
步调 2: 检察uView UI是否下载成功

有uni_modules文件夹大概uview-ui文件夹在根目录就是下载成功了。

步调 3: 引入 uView 主 JS 库

在项目根目录中的 main.js 文件中引入并使用 uView 的 JS 库。

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

复制代码

步调 4: 引入 uView 的全局 SCSS 主题文件

在项目根目录的 uni.scss 文件中引入 uView 的 SCSS 主题文件。

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

复制代码

步调 5: 引入 uView 底子样式

在 App.vue 中的 <style> 标签中的首行位置引入 uView 的底子样式，确保给 <style> 标签参加 lang="scss" 属性。

1. <!-- App.vue -->
2. <style lang="scss">
3.   /* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
4.   @import "uview-ui/index.scss";
5. </style>

复制代码

步调 6: 配置 easycom 组件模式

在项目根目录的 pages.json 文件中配置 easycom 组件模式，确保 uView 的组件可以在项目中被精确引用。

1. // pages.json
2. {
3.   "easycom": {
4.     "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
5.   },
6.   
7.   // 此为本身已有的内容
8.   "pages": [
9.     // ......
10.   ]
11. }

复制代码

注意事项

• 确保在 main.js 中引入 uView 的操作放在 import Vue from 'vue'; 之后。
  
• 需要重启或重新编译项目以使 easycom 的配置生效。
  
• 查抄 uni.scss 和 App.vue 中的样式引入语句是否精确，确保路径和文件名与实际 uView 所在位置同等。
  

通过以上步调，你已经成功地将 uView UI 集成到了你的 UniApp 项目中，并可以开始使用其提供的丰富组件和样式来构建界面。
NPM方式

安装和使用 uView UI 在 UniApp 中是相对简单的过程，下面我来为你提供一个基本的教程。
步调 1: 安装 uView UI

接下来，我们需要在 UniApp 项目中安装 uView UI。

• 打开终端：
  
  
  
  • 在 HBuilderX 中，点击菜单栏的「工具」->「开发者工具」->「终端」，这样就可以打开终端。
    
  
  
• 使用 npm 安装 uView UI：
  
  
  
  • 在终端中输入以下命令来安装 uView UI：
    
  
  

1.      npm install uview-ui

复制代码

• 大概使用 yarn 安装：
  

1.      yarn add uview-ui

复制代码

步调 2: 配置 uView UI

安装完成 uView UI 后，需要在项目中进行配置。

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

1.      "globalStyle": {
2.          "navigationBarTextStyle": "black",
3.          "navigationBarTitleText": "uni-app",
4.          "navigationBarBackgroundColor": "#F8F8F8",
5.          "backgroundColor": "#F8F8F8",
6.          "app-plus": {
7.              "preload": {
8.                  "preloadRule": {
9.                      "path": "pages/index/index.vue",
10.                      "style": {
11.                          "loading": true
12.                      }
13.                  }
14.              }
15.          },
16.          "usingComponents": {
17.              "u-loading": "uview-ui/components/u-loading/u-loading"
18.          }
19.      }

复制代码

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

1.      <template>
2.        <view>
3.          <u-loading :show="true" :type="'chiaroscuro'" :color="'#007AFF'" :text="'加载中...'"></u-loading>
4.        </view>
5.      </template>
6.      
7.      <script>
8.      export default {
9.        data() {
10.          return {
11.            
12.          }
13.        }
14.      }
15.      </script>

复制代码

• 上述代码中，我们使用了 uView UI 的 u-loading 组件来展示一个加载中的提示。
  

使用uView UI组件

用按钮为案例

复制到文档中

1.     <u-button type="primary" text="确定"></u-button>
2.     <u-button type="primary" :plain="true" text="镂空"></u-button>

复制代码

项目展示效果：

   您好，我是肥晨。
欢迎关注我获取前端学习资源，一样平常分享技术变革，生存法则；行业黑幕，洞察先机。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4