uniapp导入uView组件库_代码007(未授权)

本文介绍: uView依赖SCSS，您必须要安装此插件，否则无法正常运行。的位置引入，注意给style标签加入lang=”scss”属性。中的步骤对uView进行了下载安装，如果没有，请先下载安装。中，引入并使用uView的JS库，注意这两行要放在。的形式进行安装，此安装方式可以方便您后续在。在进行配置之前，请确保您已经根据。对uView进行一键升级。Hbuilder X方式。此配置需要在项目根目录的。此安装方式必须要按照。中的说明配置了才可用。开发的用户，您可以在。

准备工作

1. 新建一个项目

2. 导入uview组件库

3. 关于SCSS

// 安装sass
npm i sass -D

// 安装sass-loader
npm i sass-loader -D

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

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

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

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

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

此配置需要在项目根目录的pages.json中进行。

// pages.json
{
	// 如果您是通过uni_modules形式引入uView，可以忽略此配置
	"easycom": {
		"^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue"
	},
	
	// 此为本身已有的内容
	"pages": [
		// ......
	]
}

<template>
	<view class="content">

		首页
<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>

	</view>
</template>