一、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的模块化)