摘要

在一个已创建的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>