摘要
在一个已创建的Hbuilder项目中,添加uView框架插件
前置准备
-
已安装Hbuilder
-
已创建uni-app的H5默认模板项目
实现逻辑
-
在Hbuilder官网找到组件说明页面
-
下载插件并导入HbuilderX
具体实现
访问网站
或者访问官网地址
下载插件
然后点击【下载插件并导入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
文件
- uni-app为了调试性能的原因,修改
easycom
规则不会实时生效,配置完后,您需要重启HX或者重新编译项目才能正常使用uView的功能。 - 请确保您的
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>