uniapp's UI framework component library - uView

When writing the uniapp project, the style library recommended by the official cannot meet the daily needs, and it is impossible to write the corresponding style by yourself, which is time-consuming and laborious, so we usually use the third-party component library UI, just like in vue The elementUI component library we are familiar with is the same. The component library we use in uniapp is uView

1. The use of component libraries 

Official website of uView component: https://xuqu.gitee.io/

Its interface is very similar to that of elementui. If you have used elementui, you will definitely use uView 

Then install uView

// 如果您的项目是HX创建的，根目录又没有package.json文件的话，请先执行如下命令：
// npm init -y

// 安装
npm install uview-ui

// 更新
npm update uview-ui

configuration steps

# 1. Import uView main JS library

In the root directory of the project main.js, import and use the uView JS library. Note that these two lines should be placed import Vueafter.

// main.js
import uView from "uview-ui";
Vue.use(uView);

# 2. Import the global SCSS theme file of uView

uni.scssIntroduce this file in the project root directory .

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

# 3. Introduce uView basic style

Notice!

Introduced at the firstApp.vue line of , pay attention to add the lang="scss" attribute to the style tag

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

# 4. Configure easycom component mode

This configuration needs to pages.jsonbe done in the root directory of the project.

Kind tips

For uni-app debugging performance reasons, the modified easycomrules will not take effect in real time. After configuration, you need to restart HX or recompile the project to use uView functions normally.

// pages.json
{
	"easycom": {
		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
	},
	
	// 此为本身已有的内容
	"pages": [
		// ......
	]
}

 Then you can use the corresponding demand style according to the components on the right.