老张跟着老许学前端之less---element ui---vuex(vue2的状态管理器)

这两天学的东西比较多，进度有点快，没有完全掌握，把这两天学习的东西写成文章巩固一下！

1、less  css框架

1.1、Less框架的安装和引用：

1.1.1、安装：

yarn add less

安装成功后再在’package.json‘中检查是否安装成功：

安装好less包以后，在安装less-loader，这个是less的一个绑定包，有了他以后才可以引用less的全局变量。

yarn add less-loader

老规矩，检查安装：

这样，less就安装成功了，如果版本号出问题，可以去查适应版本的版本号，重新安装就可以。

1.1.2、页面引用：

因为下载了less-loader的原因，所以现在可以直接在任何一个页面中去使用less框架，只需要规定他是less就可以了：

<style lang="less" scoped></style>

这个时候就可以用less框架的写法去写css了

1.1.3、写法：

less的写法和传统的css很像，但是他的父级子级的区分更加明显：

<div class = "father">
    <div class = "son">
        <div class = "son2"></div>
    </div>
</div>



<style lang = "less" scoped>
.father{
    width:100px;
    height:100px;
    .son{
        width:50px;
        height:50px;    
        .son2{
           width:50px;      
           height:50px 
             }
        }
}

</style>

他的子级可以写在父级的里面，这样子父级的布局更加的明朗。 

1.2、less的使用和引入：

less css框架是有变量的，他的变量写法是：

@width:30px;
@height:30px;
@color:red;
// 这个是变量的写法，引用的方式是：
.css{
    width:@width;
    height:@height;
    color:@color;
}

这个是变量的引入和使用方式，他还有组合的写法和引入方式，代码如下：

.display{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
}
// 这是混合组件写法，引入方式如下：

.css{
    .display()
}

他还可以把变量写在外部的.less里面，然后需要的地方直接引入就可以了：

.displayFLexAllCenter {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.displayFlexTopCenter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
@color_white: #fff;
@bg_color_yellow: #f2d855;
@text_color_while100: #cccccc;
@text_color_while200: #999999;
@text_color_black: #333333;
@radius1: 12px;
@radius2: 20px;
@marginTop: 20px;


// 这个是外部的样式，他的名字叫做baseStyle.less

页面引入：

<style lang="less" scoped>
@import "@/baseStyle.less";
</style>

不要忘了去main.js中去声明一下你的外部less文件！！！ 

这样就引入成功了，可以直接使用变量去定义你的css。这样外部定义的样式，基本是为了当你的页面存在两种形态的时候，可以切换去改变颜色，比如，日间夜间模式。以上就是基础的less学习和用法，后面会有更深入的学习，我会写成新的文档。

2、element ui   UI框架

2.1、element ui的安装和引入：

// 第一步，老规矩，yarn一下：

yarn add element-ui

老规矩，检查安装情况和版本号：

去main.js引入，引入方式和router路由的引入方式基本一样：

 三句代码，基本上固定写法，死记硬背就可以了：

import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";

Vue.use(ElementUI);

这样就安装完成了，就可以去使用了。使用方法就不写了。

element-ui遇到的第一个坑：

我用了element-ui里面的input组件，然后给了他一个class，发现完全更改不了他的任何css，后面展开发现，这个class类名直接给了这个input的外层，并且还给了他一个div，

完全不知道怎么去解决，还好我是1v1老前端教学，这个时候许老师帮我解决了这个问题，因为我用了less框架，所以直接让父级包子级，给子级去覆盖样式：

 

然后就解决了给不了样式的问题，element-ui这些ui框架会有很多很多的坑，后面我遇到的所有的坑，我都会写成文章，供以后自己查询使用。

3、状态管理器：vuex！！！！ 

3.1、vuex状态管理器的安装和引入：

因为我学习的是vue2，所以我需要引入vuex的版本是@3：Vue3用的是@4

yarn add vuex@3

安装后老规矩，检查安装状态和版本号：

然后再src文件夹下新建一个文件夹叫做stores，里面新建一个文件：index.js,然后在里面引入：

import Vue from "vue";  // 这一步是在引用vue库
import vuex from "vuex"; // 这一步是在引用vuex库

Vue.use(vuex); // 将vuex挂载在vue中（这个vue项目要使用vuex）

export default new vuex.Store({ // 默认抛出一个实例化构造函数vuex.store
	state() {  // 一个函数，名字叫state，里面返回一个值isLogin：false
		return {
			isLogin: false, // 里面可以返回无数个公共变量
		};
	},
	mutations: {  // 一个对象，里面放了一个函数，函数接收两个入参，一个state，一个boo
		changeIsLogin(state, boo) { // 这里的state封装好的，可以直接访问到上一个state（）函数
			state.isLogin = boo;  // 这里给boo赋值，让boo的值等于state的返回值
		},
	},
});


// vuex不允许直接修改state里面的返回值（公共变量），所以mutations是为了修改state的值而存在的
// mutations可以去修改state的值，但是不是必须的，里面可以写逻辑，愿意干啥就干啥，但只能js
// 但是我们一般是mutations只去修改state的值，如果需要写逻辑或者其他东西，一般新起一个函数：

export default new vuex.Store({ // 默认抛出一个实例化构造函数vuex.store
	state() {  // 一个函数，名字叫state，里面返回一个值isLogin：false
		return {
			isLogin: false, // 里面可以返回无数个公共变量
		};
	},
	mutations: {  // 一个对象，里面放了一个函数，函数接收两个入参，一个state，一个boo
		changeIsLogin(state, boo) { // 这里的state封装好的，可以直接访问到上一个state（）函数
			state.isLogin = boo;  // 这里给boo赋值，让boo的值等于state的返回值
		},
	},
     actions: { // 这个函数是为了写逻辑的，
        increment (context) {  
              context.commit('increment')
                // 如果写完了逻辑以后需要修改state的值，就这样写
                // context.commit("")
        }
     }
});

配置完以后，需要挂载到vue项目中，让全局都可以读取到state中的变量：