一. 从 HbuilderX 中的 [工具] —— [插件安装] 进行安装 uView 插件

1.1 第一步

image.png image.png

1.2 第二步 在 DCloud的插件市场 中搜索 uView ，找到下面的这个名字的插件

image.png

根据需求下载或导入插件都可

image.png

1.3 第三步 使用uView插件，还需安装 scss预处理器

进入 DCloud的插件市场 中搜索 scss，进行安装插件即可

1.4 通过 npm 方式安装 uView 插件

• npm包管理器，需要安装 Node.js 语言开发环境，Node.js下载地址：https://nodejs.org/zh-cn/。
• 安装完 Node.js语言开发环境后，快捷键 window + R ，输入 cmd 进入终端。在终端输入 npm -v 能查看到 npm 版本号 则成功，若无法查看到 npm 的版本号可以重新启动电脑试一试，或者重新安装一次。

打开 HBuilderX 开发工具的终端输入下方示例代码，下载uView ui 框架文件。

// 如果你的项目是 HBuilderX 创建的，根目录又没有 package.json 文件的话，请先执行如下命令：
// npm init -y
 
// 安装
npm install uview-ui

二. 使用 uView 插件 的准备工作

image.png

2.1 在创建的项目下的 App.vue 文件中 ，添加如下代码

App.vue 文件中添加代码
<style lang="scss">
    @import "uview-ui/index.scss";
</style>

2.2 在 创建的项目下的 main.js 文件中 ，添加如下代码

main.js 文件中 ，添加如下代码
// 引入全局uView
import uView from 'uview-ui'
Vue.use(uView)

2.3 在 创建的项目下的 pages.json 文件中 ，配置easycom组件模式，添加如下代码

`pages.json文件中的 "pages" 字段上方 ，添加如下代码

"easycom": {
    "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
}

2.4 在 创建的项目下的 uni.scss 文件中 ，添加如下代码

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

三. 开始使用 uView 中的组件

使用uView中的组件时，根据需求来传递参数
如：

<template>
    <u-button type="success">
        <text>{{title}} 框架真好</text>
        <u-icon name="thumb-up-fill" color="#ffffff" size="28"></u-icon>
    </u-button>
</template>
<script>
    export default {
        data() {
            return {
                title: 'uView ui'
            }
        }
    }
</script>
<style lang="scss">
</style>

页面效果：

image.png