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

http://v1.iviewui.com/

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"
	}
}