0
点赞
收藏
分享

微信扫一扫

css实现渐变电量效果柱状图

摘要

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

举报

相关推荐

0 条评论