uniapp npm introduces uView component library

NPM installation method configuration

---

About SCSS

uView relies on SCSS, you must install this plug-in, otherwise it will not work properly.

• If your project is created by HBuilder X, it is believed that the scss plug-in has been installed. If not, please find the "scss/sass compilation" plug-in in the HX menu Tools -> Plug-in Installation to install it. If it does not take effect, restart HX.

• If your project is created by vue-cli, please install support for sass (scss) through the following command, if it is already installed, please skip it.

// 安装sass
npm i sass -D// 安装sass-loader，注意需要版本10，否则可能会导致vue与sass的兼容问题而报错
npm i sass-loader@10-D

Preparation

Before configuring, please make sure you have npm installed uView according to the steps in the installation , if not, please perform the installation first:

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

configuration steps

1. Import uView main JS library

In the main.js in the src directory of the project, import and use the uView JS library. Note that these two lines should be placed after import Vue.

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

2. Import the global SCSS theme file of uView

Introduce this file in uni.scss in the project src directory.

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

3. Introduce uView basic style

Notice!

Introduce it at the first line in App.vue , 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 be done in pages.json in the project src directory.

Kind tips

1. In order to debug the performance of uni-app, modifying the easycom rules will not take effect in real time. After configuration, you need to restart HX or recompile the project to use uView functions normally.

2. Please make sure you have only one easycom field in your pages.json, otherwise please combine multiple import rules yourself.

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

5. Additional configuration in Cli mode

If you are a project in vue-cli mode, you also need to configure the following in the vue.config.js file in the project root directory:

// vue.config.js，如没有此文件则手动创建
module.exports ={transpileDependencies:['uview-ui']}