当前位置：网站首页>On Sunday, I rolled up the uni app "uview excellent UI framework"

On Sunday, I rolled up the uni app "uview excellent UI framework"

2022-06-24 03:11:00 【0. live in the storm】

Previous review

Writing a server code will 《vue E-commerce background management system 》 Deploy it go online 、 pack _ A blog living in the storm -CSDN Blog Close test available , You will certainly reap a lot ,1. go online vue E-commerce background management project 2. Handwritten build the server and mount （node）3. Package optimization Complete the launch https://blog.csdn.net/m0_57904695/article/details/122977868?spm=1001.2014.3001.5501

Super practical , Recommended collection , To prevent future use ！ How to catch it , Take a chestnut ,' A double tenth ' You write a countdown , easy to write , Simple , But it takes time , In our work, we will finish the work as quickly as possible , Easy to see boss Are there any other arrangements , forehead , OK, fishing king

stay uView In less than a minute , The code is extremely concise ！ The most important thing is that there is a simulator on the right , It can be simulated directly without assigning a value to the case , The most important thing is , No need to introduce , No need to register , Click on the tongue , It can be downloaded with one click , Install all dependencies , But packaging will automatically filter components that are not available , Automatic on-demand loading ...

Too many components 、 Grinding plate 、

How does it work ：

Click to download uView - DCloud Plug in market

uView rely on SCSS, You must install this plug-in , Otherwise, it will not operate normally . commonly cli Projects all have , No installation

//  install node-sass
npm i node-sass -D

//  install sass-loader
npm i sass-loader -D

1、 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 "uview-ui";
Vue.use(uView);

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

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

3、 introduce uView Basic style

stay App.vue in First line Position introduction , 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、 This configuration needs to be in the project root directory pages.json In the middle of .

// pages.json
{
	"easycom": {
		"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
	},
	
	//  This is what we already have 
	"pages": [
		// ......
	]
}

complete | Use it directly , There is no need to introduce components into the page , Packaging is automatically mapped on demand ！