一. 从 HbuilderX 中的 [工具] —— [插件安装] 进行安装 uView 插件
1.1 第一步
![](https://i-blog.csdnimg.cn/blog_migrate/593b880c97645df06c1a705f386f0dde.png)
image.png
![](https://i-blog.csdnimg.cn/blog_migrate/d340de10b8d5814be2d87be4f142d4e6.png)
image.png
1.2 第二步 在 DCloud的插件市场 中搜索 uView ,找到下面的这个名字的插件
![](https://i-blog.csdnimg.cn/blog_migrate/4411e57ac6447d023d9f3a7a7f6dd11f.png)
image.png
根据需求下载或导入插件都可
![](https://i-blog.csdnimg.cn/blog_migrate/dca6f90481d353de77e461e02e641430.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 插件 的准备工作
![](https://i-blog.csdnimg.cn/blog_migrate/ed4d1069f5a609c56b7fcc770949c153.png)
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>
页面效果:
![](https://i-blog.csdnimg.cn/blog_migrate/f42622b6d9f96326addd09c3511b097e.png)
image.png