Introduce uview into uni app

stay uni-app Introduction in uView There are two ways ：

adopt npm download

//  If your root directory does not package.json Word of the file , Please execute the following command first ：
// npm init -y
 
npm install uview-ui
 
//  to update 
// npm update uview-ui

Configuration steps

1. introduce uView Lord JS library

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

// main.js
//  IMPORT Global  uView  frame 
import uView from 'uview-ui';
Vue.use(uView);

2. In the introduction of uView Overall situation SCSS topic file

At the root of the project uni.scss To introduce this file .

/* uni.scss introduce view The theme style  */
@import 'uview-ui/theme.scss';

3. introduce uView Basic style

Be careful ： stay App.vue The position of the first line in the... Is introduced , Pay attention to style Label to join lang="scss" attribute

<style lang="scss">
	/*  Pay attention to the first line , At the same time style Label to join lang="scss" attribute  */
	@import "uview-ui/index.scss";
</style>

4. To configure easycom Component mode
stay pages.json To configure ,uni-app For performance reasons , modify easycom The rules will not take effect in real time , After the configuration , You need to restart Hbuilder X Or recompile the project to work properly uView The function of . Please make sure your pages.json Only one of them easycom Field , Otherwise, please merge multiple import rules by yourself .

"easycom": {
		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
	},

Install through the plug-in market

If you use Hbuilder X Development , You can go to uni-app Plug in market adopt uni_modules Install in the form of .
1. Click Import

2. open hbuilderX

3. Select project

4. Start the download

5. Make sure that... Is installed scss/sass compiler
Found in tool “ Plug in installation ”

Configuration steps

1. introduce uView Lord JS library

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

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

2. In the introduction of uView Overall situation SCSS topic file

At the root of the project uni.scss To introduce this file .

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

3. introduce uView Basic style

Be careful ： stay App.vue The position of the first line in the... Is introduced , Pay attention to style Label to join lang="scss" attribute

<style lang="scss">
	/*  Pay attention to the first line , At the same time style Label to join lang="scss" attribute  */
	@import "@/uni_modules/uview-ui/index.scss";
</style>

4. To configure easycom Component mode
stay pages.json To configure ,uni-app For performance reasons , modify easycom The rules will not take effect in real time , After the configuration , You need to restart Hbuilder X Or recompile the project to work properly uView The function of . Please make sure your pages.json Only one of them easycom Field , Otherwise, please merge multiple import rules by yourself .uni_modules Way to introduce uview You can not configure .

"easycom": {
		"^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue"
	},