HBuilderX 安装使用uview

安装方式： npm

步骤：

1. 安装uview

 2. 引入uview库

3. `App.vue`引入基础样式

4. `uni.scss`引入全局scss变量文件

5. `pages.json`配置easycom规则(按需引入)

6. 页面中使用

1. 安装uview

打开HB的终端

npm i uview-ui

安装成功后可以看到项目中多了node_modules文件夹

 

 2. 引入uview库

在main.js插入

import uView from 'uview-ui';
Vue.use(uView);

3. `App.vue`引入基础样式

4. `uni.scss`引入全局scss变量文件

@import "uview-ui/theme.scss";

5. `pages.json`配置easycom规则(按需引入)

{
	"easycom": {
		// npm安装的方式不需要前面的"@/"，下载安装的方式需要"@/"
		// npm安装方式
		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
		// 下载安装方式
		// "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
	},
	// 此为本身已有的内容
	"pages": [
		// ......
	]
}

6. 页面中使用

找到一个vue文件，在页面中直接使用

实际效果：