web前端全栈0基础到精通(祺)vue 09

一、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的模块化)
上一篇:【亲测】Vue + flexible + postcss-pxtorem + VantUI组件库实现移动端px和rem适配


下一篇:2021-05-20