一、GitHub远程仓库的使用
1.创建git仓库
在项目文件夹下执行代码（已创建的项目不需要执行改代码）
git init
2.查看本地代码状态
git status
3.把所有文件提交到暂存区
git add .
4.在本地做一次提交
git commit -m '这是注释'
5.连接远程仓库
git remote add origin https://github.com/sun-unc/test.git
git push -u origin master
6. 项目编写前再进行一次初始化项目
查看项目目录是否干净（git status）
创建新分支（git checkout -b login）
7.将本地代码提交到远程仓库
查看本地代码状态）（git status）（红色的都是修改过没有提交的文件）
把所有文件提交到暂存区(git add .)
添加提交消息 (git commit -m 'xxxxx')
查看分支（git banch）
此时上面提交的代码都被放到了login分支暂存
合并分支到主分支【注意合并前必须要先切换到主分支】
先切换分支（git checkout master）
合并login分支中的代码到master
提交本地代码到云端 (git push)
7.此时云端中只有一个master分支，本地的login分支需要我们单独提交
先切换到login分支（git checkout login）
第一次将login分支推送到远程仓库(git push -u origin login)表示将本地分支推送到云端origin仓储里面进行存储同时名字叫login子分支
二、Vetur插件和ESLint插件格式冲突
在项目代码中的;和""会被ESLint报错，手动改了之后Vetur却会自动改回去，这时候可以在项目文件夹下面添加一个配值文件：.prettierrc
{
"emi": false, // 分号
"singleQuote": true // 单引号
}
三、Element UI中Form表单的规则验证
<el-form class="demo-ruleForm" :model="loginForm" :rules="loginFormRules">
<el-form-item prop="username">
<el-input
autocomplete="true"
prefix-icon="iconfont icon-user"
v-model="loginForm.username"
></el-input>
</el-form-item>
</el-form>
data () {
return {
loginForm: {
username: '',
password: ''
},
// 表单验证规则
loginFormRules: {
username: [
{ required: true, trigger: 'blur', message: '请输入用户名' },
{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
],
password: [
{ required: true, trigger: 'blur', message: '请输入密码' },
{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
]
}
}
}
}
1.这里的:model不写可以对v-model的双向数据绑定不会有任何影响，但是在进行表单规则校验的时候没有:model是不行的。
2.prop="xxx"是和rules里的数据相对应，进行表单验证的时候也是不可缺少的，且需要放在标签里面
四、Element UI中导航菜单的样式修改
1.右击检查，查看现在的样式，类名复制，粘在css中修改
2.el-submenu不能修改，重新写一个style样式 去掉scoped
<style scoped lang="scss">
</style>
<style>
.el-menu>.el-submenu .el-submenu__title {
.
.
.
.
.
.
}
</style>
五、ElementUI中的作用域插槽
要想渲染出状态栏的图表，可以通过作用域插槽来添加
<el-table :data="userList" border stripe>
<el-table-column type="index"></el-table-column>
<el-table-column label="姓名" prop="username"></el-table-column>
<el-table-column label="邮箱" prop="email"></el-table-column>
<el-table-column label="电话" prop="mobile"></el-table-column>
<el-table-column label="角色" prop="role_name"></el-table-column>
<el-table-column label="状态" prop="mg_state">
<template slot-scope="scope">
{{ scope.row }}
</template>
</el-table-column>
<el-table-column label="操作"></el-table-column>
</el-table>
这样就可以通过scope.row来获取userList中的数据。在通过组件来使用这个数据许渲染出想要的结果
<el-table-column label="状态" prop="mg_state">
<template slot-scope="scope">
//{{ scope.row}}
<el-switch v-model="scope.row.mg_state"> </el-switch>
</template>
</el-table-column>
