62 UI框架、stylus（css预处理器）

62 UI框架、stylus（css预处理器）

一、UI框架

1.1UI框架之PC端（elementUI）

• 官网地址

https://element.eleme.cn/#/zh-CN

• 安装

npm install(i) element-ui
+ element-ui@2.15.1

• 全局引入UI框架

main.js

//引入UI库
import ElementUI from 'element-ui'
//全局引入css样式
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

• 注意

这个UI框架一般创建后台管理项目！！！

---

1.2UI框架之移动端

1.2.1mintUI(不建议)（不更新）

• 官网

http://mint-ui.github.io/#!/zh-cn

• 安装

npm install mint-ui

• 全局引入

import mintUI from 'mint-ui'
Vue.use(mintUI)
import 'mint-ui/lib/style.min.css'
​

1.2.2 vantUI

• 官网

https://vant-contrib.gitee.io/vant/#/zh-CN/

• 安装

npm install vant

• 全局引入

import VantUI from 'vant'
Vue.use(VantUI)
import 'vant/lib/index.css'

 

二、stylus（css预处理器）

以前的css(原生)不能实现样式的嵌套，不能实现样式封装全局变量
有了预处理器，你可以实现这个功能

• 官网

https://stylus.bootcss.com/

• 特点

它可以省略 {} 
省略 ；
省略 ：
它的层级控制用空格控制
它可以实现样式的嵌套
它可以设计全局变量（多个地方应用同一个样式，一个修改其他的都会跟着相应的变化，实现了css的模块化）