Hbuilder本地调试微信H5项目（二）--添加UView框架插件

摘要

在一个已创建的Hbuilder项目中，添加uView框架插件

前置准备

1. 已安装Hbuilder

2. 已创建uni-app的H5默认模板项目

实现逻辑

1. 在Hbuilder官网找到组件说明页面

2. 下载插件并导入HbuilderX

具体实现

访问网站

访问网址Hbuilder的uView1.8.6版本说明页

或者访问官网地址

下载插件

然后点击【下载插件并导入HbuilderX】

这时会提示启动Hbuilder，并让选择项目

这里必须要注意：先在项目中新建【uni_modules】目录，如果已经有了就不会出现该菜单，这样下载的插件就会自动在这个目录下，否则会下到根目录下

下载成功后的目录结构

修改配置文件

本文使用的是下载安装方式，配置参数和官网配置说明中有些不一样（主要是目录指定）

下载安装方式配置

修改main.js

在项目根目录中的main.js中，引入并使用uView的JS库，注意这两行要放在import Vue之后。

// main.js
import uView from "@/uni_modules/uview-ui";
Vue.use(uView);

修改uni.scss文件

在项目根目录的uni.scss中引入此文件。

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

修改App.vue文件

在App.vue中首行的位置引入，注意给style标签加入lang="scss"属性

<style lang="scss">
	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
	@import "@/uni_modules/uview-ui/index.scss";
</style>

修改pages.json文件

1. uni-app为了调试性能的原因，修改easycom规则不会实时生效，配置完后，您需要重启HX或者重新编译项目才能正常使用uView的功能。
2. 请确保您的pages.json中只有一个easycom字段，否则请自行合并多个引入规则。

{
	"easycom": {
		"^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue"
	},
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"uniIdRouter": {}
}

这时我们在页面中直接使用就可以了，比如我将按钮示例添加到代码中，就可以看到组件了

		<template>
			<u-button >默认按钮</u-button>
			<u-button type="primary">主要按钮</u-button>
			<u-button type="success">成功按钮</u-button>
			<u-button type="info">信息按钮</u-button>
			<u-button type="warning">警告按钮</u-button>
			<u-button type="error">危险按钮</u-button>
		</template>