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

posted on 2021-05-19 23:29  码农小小海  阅读(90)  评论(0编辑  收藏  举报

导航