Installation of uview component library

For more information, please view the official document uView 2.0 - uni-app ecological framework fully compatible with nvue - uni-app UI framework (uviewui.com)

// If your root directory does not have a package.json file, please execute the following command first:
// npm init -y

Install npm install [email protected]

// update
// npm update uview-ui

//Printed through `console.log`
console.log(uni.$u.config.v);

// You can check uView's configuration file to know the current version number. The specific location is:
/uview-ui/libs/config/config.js

// main.js, please note that it must be executed after the use method

Place this paragraph below import App from './App' Vue.config.productionTip = false
import uView from 'uview-ui'
Vue.use(uView)
// Configure it like this
uni.$u.config .unit = 'rpx'

Place it at the bottom of main.js
// Call the setConfig method. The object attributes will be deeply merged inside the method. You can rest assured that you can nest the configurationuni.$u.setConfig({     //
after Vue.use(uView)Modify the properties of the $u.config object     config: {         // Modify the default unit to rpx, which is equivalent to executing uni.$u.config.unit = 'rpx'         unit: 'rpx'     },     // Modify the properties of the $u.props object Attribute     props: {         // Modify the default value of the size parameter of the radio component, which is equivalent to executing uni.$u.props.radio.size = 30         radio: {             size: 15         }         // Other component attribute configurations         // .... ..     }})

//Install sass
npm i sass -D

// If your project was created by HX and there is no package.json file in the root directory, please execute the following command first:
// npm init -y

//Install
npm install [email protected]

In the project srcdirectory main.js, introduce and use uView's JS library. Note that these two lines should be placed import Vueafter.

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

 Introducing uView’s global SCSS theme file

Import this file into the project srcdirectory .uni.scss

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

 Introduce uView basic style

Notice!

Introduce it in the firstApp.vue line of the middle , and add the lang="scss" attribute to the style tag.

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

 Configure easycom component mode

This configuration needs to be done in the project srcdirectory pages.json.

Kind tips

1. For debugging performance reasons, uni-app's modified easycomrules will not take effect in real time. After configuration, you need to restart HX or recompile the project to use uView's functions normally.
2. pages.jsonPlease make sure you only have one field in yours easycom, otherwise merge multiple import rules yourself.

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

After a process is introduced, the component can be used.