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; } 生效