vue系列---【UI库、VScode编辑用户代码片段、stylus css预处理器】
1.Vue 组件库(UI库)
栅格布局、布局、button、form、data展示、反馈组件、其他
element-ui PC端
1.官网:
https://element.eleme.cn/#/zh-CN
2.下载
npm i element-ui --save
3.引入
//引入element-ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
ivew-ui PC
Vant 移动端
https://vant-contrib.gitee.io/vant/#/zh-CN/
2.stylus--css预处理器
版本:
"stylus": "^0.52.3",
"stylus-loader": "^3.0.1",
安装:
npm i stylus@0.52.3 stylus-loader@3.0.1 --save
使用:
目录
-stylus
index.styl //整合样式
color.styl //颜色
size.styl //大小
form.styl //表单
table.styl //表格
使用:home.vue
<style scoped lang="stylus">
@import "../stylus/index.styl";
.con
padding $padding
h3
color $primary
font-size: $font-h1;
background $success
</style>
穿透:
如果使用UI框架,需要修改样式,优先级要高于UI框架。
1.important
h3
color $primary !important
2.如果1失败了,那么就使用穿透
.con >>> h3{
color:$primary;
}
3.less--css预处理器
创建项目,有一个css-pre… css预处理器选上,然后选择less.
-src
-less
index.less
color.less
size.less
....
Color.less
@primary: #ff4400;
@success: lime;
@warn: orange;
index.less 引入所有的less文件
@import "./color.less";
@import "./size.less";
组件中使用less
<style scoped lang="less">
@import "../less/index.less";
h3{
color: @primary;
}
</style>
4.VScode编辑用户代码片段
编辑器左下角—》设置—》用户代码片段—》新建用户代码片段—》输入代码片段名称—》
{
// Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
// used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
// Placeholders with the same ids are connected.
// Example:
"Print to console": {
"scope": "javascript,typescript,vue",
"prefix": "u-log",
"body": [
"console.log(\"这是我的打印\")",
"console.log($0)"
],
"description": "Log output to console"
}
}