《Uniapp - 导入引用Uview2.0 ui 库》

        uView 2.0 是一款功能强大的UI框架，专为UniApp开发设计，提供了丰富的组件和工具，帮助开发者提升开发效率和UI设计水平。本文将详细介绍如何通过插件市场安装uView 2.0，并在UniApp项目中进行配置和使用。

1. 使用插件市场安装uView 2.0

        1.1 打开HBuilderX并创建项目

        首先，确保你已安装HBuilderX，并创建一个UniApp项目。如果你没有安装HBuilderX，可以前往 HBuilderX官网 下载并安装。

        1.2 进入插件市场

1. 打开HBuilderX，进入你的UniApp项目。
2. 在左侧栏找到 插件市场，点击进入。
3. 在插件市场搜索框中输入 “uView”，并找到 uView UI 插件（版本2.0及以上）
    
4. 

        1.3 安装uView插件

        点击插件右侧的 下载插件并导入 按钮，HBuilderX会自动下载并安装uView UI框架到你的项目中。

 

2. 配置uView 2.0

2.1 配置 manifest.json

安装完成后，需要在项目的 manifest.json 文件中进行相关配置，确保uView框架能够正常加载。

1.打开 manifest.json 文件。

2.找到 "App配置" 部分，在 “app-plus” 配置下添加如下内容：

"usingComponents": true

 这样就配置了可以在页面中使用uView的组件。

2.2 引入uView 2.0

接下来，在 main.js 文件中引入并注册uView UI框架：

1. 打开项目中的 main.js 文件。

2. 在文件顶部引入uView，并使用 Vue 插件：
    

   import Vue from 'vue';
   import App from './App';
   import uView from 'uview-ui';  // 引入uView UI
   import 'uview-ui/theme.scss';   // 引入uView主题样式（可选）
   
   Vue.use(uView);  // 使用uView插件
   Vue.config.productionTip = false;
   
   const app = new Vue({
     ...App
   });
   app.$mount();
   

   2.3 添加全局样式

   为了确保样式生效，建议在 App.vue 中添加 uView 的基础样式：
    

   /* App.vue */
   <style>
   @import url('~uview-ui/theme.scss'); /* 引入uView默认主题样式 */
   </style>
   

   3. 使用uView 2.0组件

   安装和配置完成后，即可在项目中使用uView 2.0提供的丰富组件。以下是使用uView按钮组件的示例。

   3.1 示例：使用按钮组件

   在页面中使用uView按钮组件非常简单，代码示例如下：|
    

   <template>
     <view class="content">
       <u-button type="primary" @click="handleClick">点击我</u-button>
     </view>
   </template>
   
   <script>
   export default {
     methods: {
       handleClick() {
         uni.showToast({
           title: '按钮点击成功',
           icon: 'success'
         });
       }
     }
   };
   </script>
   
   <style scoped>
   .content {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100vh;
   }
   </style>
   

   在上述代码中，u-button 是uView提供的按钮组件，@click 用于绑定点击事件，uni.showToast 显示一个提示框。

 

3.2 示例：使用弹窗组件

        uView还提供了弹窗组件（如 u-popup），可以用来展示自定义弹窗。以下是一个简单的弹窗使用示例：
 

<template>
  <view class="content">
    <u-button type="primary" @click="showPopup">显示弹窗</u-button>
    <u-popup v-model="popupVisible" mode="center">
      <view class="popup-content">
        <text>这是一个弹窗</text>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      popupVisible: false
    };
  },
  methods: {
    showPopup() {
      this.popupVisible = true;
    }
  }
};
</script>

<style scoped>
.content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.popup-content {
  padding: 20px;
  background-color: #fff;
}
</style>

4. 自定义主题（可选）

uView 2.0支持自定义主题，你可以根据项目需求自定义组件的颜色、大小等样式。要启用自定义主题，你只需要修改 theme.scss 文件中的变量即可。

例如，可以修改按钮的默认颜色：
 

// theme.scss
$u-button-primary-color: #FF5733; // 修改主按钮颜色

5. 结语

通过上述步骤，你已经成功地在UniApp项目中安装并配置了uView 2.0框架。uView提供了大量的UI组件和功能，可以大大提高开发效率，改善用户体验。更多的组件和功能，可以参考 uView官方文档，以便深入了解和灵活使用。