sass和less,element-ui,vuex状态管理,样式穿透

sass和less

官网:https://lesscss.com.cn/

  使用方式 :
         1:直接引入less文件,再引入js文件把less编译成css
           缺点:这种方式是在客户端把less文件编译成css文件,如果less文件体量比较大,会影响页面渲染速度
         2:使用Vscode 安装 Easy less 插件  写好less文件之后 ctrl +s 保存 就可以直接编译成css 文件 
然后在html文件中引入即可 
         3.使用node编译less
           3.1全局安装 less           npm i less -g 
           3.2 lessc  xxx.less  xxx.css

在脚手架里面使用less
      1.创建项目的时候选择less预处理语言
            2.在项目中途使用less 下载安装
cnpm i  less@4.0.0   || yarn add less@4.0.0
cnpm i  less-loader@8.0.0 || yarn add  less-loader@8.0.0

官网:https://www.sass.hk/
    sass 使用方式和less 类似
     安装插件  Easy Sass

     npm i node-sass -g

element-ui

PC端组件库参考: https://www.jianshu.com/p/669d3e41dca6
element 官网 https://element.eleme.cn/#/zh-CN

1, 下载安装组件库
	cnpm i element-ui 
2, 两种引入方式:
 完整引入:  在main.js文件中引入如下三句代码
	import ElementUI from 'element-ui';
	import 'element-ui/lib/theme-chalk/index.css';
	Vue.use(ElementUI);
 按需引入: 
	下载安装插件 babel-plugin-component
	cnpm i babel-plugin-component --save
	在balbel.config.js文件中添加plugins字段
	module.exports = {
  		presets: [
    			'@vue/cli-plugin-babel/preset'
  		],
  		"plugins": [
    			[
      			    "component",
      			    {
        				"libraryName": "element-ui",
        				"styleLibraryName": "theme-chalk"
      			    }
    			]
  		]
	}
	在main.js中按需导入需要的组件
	import { Button, Switch } from 'element-ui';
	Vue.use(Button);
	Vue.use(Switch);
	在组件中直接使用组件标签即可
	<el-button type="danger" icon="el-icon-delete" circle></el-button>

注意: 有几个特殊的使用如下
Vue.use(Loading.directive);

Vue.prototype.$loading = Loading.service;
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message;

vuex状态管理

https://blog.csdn.net/moonpure/article/details/76254850

方法一 , 在脚手架创建项目时,选择vuex
1, 在组件中使用状态数据 
	// 从vuex中按需导入状态数据的映射函数mapState
  	import { mapState } from 'vuex'
	// 使用映射函数把状态数据state映射到计算属性中
    	computed: {
      	...mapState(["isLogin"])
    	}
	<!-- state在映射到计算属性中之后,当作计算属性来用 -->
    	登录状态: {{isLogin}}


2, 在组件中修改状态数据

	this.$store.commit("setLogin", true)


------------------------------------------------------------------------
方法二:  在项目写一半时手动添加(最新版为5.0.0, 此处示例为v3.6.2版本)
1, 下载安装vuex模块 (安装最新版4.0会报错)
	cnpm i vuex@3.6.2 --save
2, 在/src目录下新建文件   /src/store/index.js   导入vuex
	import Vue from 'vue'
	import Vuex from 'vuex'
	Vue.use(Vuex)
3, 在/src/store/index.js中创建管理仓库, 并导出
	export default new Vuex.Store({
  		state: {
 	    },
 		 mutations: {
  		}
	})
4, 在main.js中导入store/index.js状态管理仓库, 帮把它添加到vue根组件中
	import store from './store'
	new Vue({router, store})
5, 在组件中使用状态数据 
	// 从vuex中按需导入状态数据的映射函数mapState
  	import { mapState } from 'vuex'
	// 使用映射函数把状态数据state映射到计算属性中
    	computed: {
      	...mapState(["isLogin"])
    	}
	<!-- state在映射到计算属性中之后,当作计算属性来用 -->
    	登录状态: {{isLogin}}


6, 在组件中修改状态数据

	this.$store.commit("setLogin", true)

样式穿透

vue单文件组件样式隔离scoped前提下, 有五种样式穿透写法

vue2语法提供3种 >>>   /deep/  ::v-deep
父组件选择器 >>> 子组件选择器 { 子组件样式 }
/deep/ 子组件选择器 { 子组件样式 }
::v-deep 子组件选择器 { 子组件样式 }

vue3语法提供2种  :deep()   ::v-deep()
:deep(子组件选择器){ 子组件样式 }
::v-deep(子组件选择器){ 子组件样式 }

经测试, 这五种穿透语法在vue2和vue3中都兼容

<style scoped>
  /* >>> 只对css原生样式穿透 */
  #app >>> h2 {
    color: red;
  }
  /* /deep/ css/less/sass通用样式穿透 */
  /deep/ h2{
    background-color: #42b983;
  }
  /* ::v-deep css/less/sass通用样式穿透 */
  ::v-deep h2{
    border-radius: 10px;
  }
  /* :deep() vue3新增  css/less/sass通用样式穿透  */
  :deep(h2){
    font-size: 30px;
  }
  /* ::v-deep() vue3新增  css/less/sass通用样式穿透 */
  ::v-deep(h2){
    line-height: 50px;
  }
</style>

注意: 有时,第三方组件库中使用穿透改子组件样式也不生效, 
如,修改vant3中的NavBar标题样式  
.van-nav-bar__title{ color: red; } 不生效
可能是此标签嵌套的层级太深, 样式查找不准确, 在前边加上父标签限制即可
#app .van-nav-bar .van-nav-bar__title{ color: red; } 生效

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值