给标签赋值需要用双大括号语法
给标签添加属性直接写data里的属性名
<h1 :title="title">{{message}}</h1>
————————————————————————————————————————————————————————
cookie：客户端保存数据（不涉及跨域）
session:服务端保存数据（不涉及跨域）
token：服务度保存数据（跨域时使用）
————————————————————————————————————————————————————————
阿里图标库，把fonts文件夹复制到项目asset文件夹中，在main.js文件中导入css文件，然后给需要的表单添加类名
————————————————————————————————————————————————————————
给表单添加padding时，溢出了盒子，解决方法是给盒子添加box-sizing：border-box
————————————————————————————————————————————————————————
盒子居中方法：先绝对定位 left-50% top-50% 然后 transform：translate（-50%，-50%）
————————————————————————————————————————————————————————
盒子右对齐方法：display：flex justfily-content：flex-end
子盒子在父盒子中居中方法：align-items：center
————————————————————————————————————————————————————————
vue拿到dom实例对象的方法：为标签添加ref属性ref:你起的名字 然后this.$ref.你起的名字 就可以拿到
————————————————————————————————————————————————————————
解构赋值重命名：const {data：res}=await axios.post（…）
————————————————————————————————————————————————————————
可以把axios ,message(elementUI组件库里的提示消息)添加到Vue的原型对象上，这样就可以通过this直接调用，
Vue.prototype.$http=axios,
Vue.prototype.$message=Message。
调用：this.$http.get/post
this.$message.success
————————————————————————————————————————————————————————
axios配置请求根路径：axios.default.baseURL=’…’
————————————————————————————————————————————————————————
window.sessionStorage.setItem(‘键名’，‘键值’) {会话级别}，localStorage（持久化储存）,清除：window.sessionStorage.clear()
————————————————————————————————————————————————————————
路由导航守卫控制登陆权限【写在路由导航router.js里面】：router.beforeEach（to,from,next）=>{
//to——去往哪个页面
//from——从哪个页面过来的
//next——中间件
if(to.path===’/login’) return next（);
//如果想去登陆页，直接放行，任何人都能去登陆页
const tokenStr=window.sessionStorage.getItem(‘token’)
//获取token
if(!tokenStr) return next(’/login’)
//如果没有token，强制返回登陆页
next()
//如果有，放行
}
————————————————————————————————————————————————————————
VScode 格式化代码和ESlint代码校验规范冲突：在项目根目录添加.prettierrc，这是一个json文件，{
“semi”:false ,//格式化时不加分号
“singleQuote”:true //格式化时单引号
}
————————————————————————————————————————————————————————
elementUI组件库，标签名就是类名，可以直接用类选择器添加样式
————————————————————————————————————————————————————————
axios请求拦截器添加token,有的接口文档中每发起一个请求都需要在请求头中携带token，保证拥有获取数据的权限，此时用到了axios拦截器
axios.interceptors.request.use(config=>{
config.headers.Authorization=window.sessionStorage.getItem(‘token’)
//最后必须return config
return config})
————————————————————————————————————————————————————————
数字类型转换为字符串类型：直接加上一个空字符串 123+’’
————————————————————————————————————————————————————————
elementUI组件库 Layout 布局
————————————————————————————————————————————————————————
给标签添加属性，属性为布尔值是要动态添加属性，前面加：
————————————————————————————————————————————————————————
想要获得表格中某一行的所有数据，需要使用作用域插槽:
<template slot-scope="scope"> scope.row(表格一行的所有数据) <template>
————————————————————————————————————————————————————————
自定义校验规则:先在data中通过var定义一个校验规则，它的值是一个箭头函数，箭头函数里有三个参数（rule，value，callback）,一般是用正则表达式验证value是否合法，合法就return callback（），不合法就callback（new Error（‘错误信息’）），最后通过validator 指定你定义的校验规则
代码如下：
data(){
var checkEmail=(rule,value,callback)=>{
const regEmail=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
if(regEmail.test(value)){
return callback()
}
callback(new Error('邮箱不合法'))
}
rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }，
{validator：checkEmail，trigger: 'blur'}
}
————————————————————————————————————————————————————————
git创建子分支，合并分支的用法
————————————————————————————————————————————————————————
el-table-colum中想自定义内容（比如本来是文字，但你想用按钮），可以作用域插槽，看官方文档
————————————————————————————————————————————————————————
为标签添加多个类名: :class="[‘类名’,index===0 ? ‘类名’ : ‘类名’]"（也可以使用三元表达式）
————————————————————————————————————————————————————————
纵向居中：display：flex align-items：center
————————————————————————————————————————————————————————
elementUI组件库的Message Box弹框的用法
————————————————————————————————————————————————————————
自定义插槽中，要更新表格中的一行数据，不用调用获取表格所有数据的方法，只需要直接修改那一行的数据即可
————————————————————————————————————————————————————————
elementUI组件库：el-tree的用法，el-tree有获取当前选中和半选状态按钮的方法，可以用展开运算符…将它展开为数组
————————————————————————————————————————————————————————
git：
0-创建新分支：git checkout -b 分支名，将新分支推送到云端：git push -u origin 分支名
1-查看当前分支：git branch
2-把所有修改过的文件添加到暂存区：git add .
3-把所有修改过的代码提交到当前分支：git commit -m “完成了。。功能的开发”，
4-把当前分支提交到云端码云：git push ，（如果云端没有当前分支，需要再后面加 -u origin 分支名）
5-把当前分支合并到master主分支，先切换到主分支：git checkout master ，
6-基于主分主动合并：git merge rights（rights是当前分支名），
7-查看当前分支：git branch，
8-本地masterr分支已经是最新的了，再将本地master分支推送到云端：git push
————————————————————————————————————————————————————————
axios的get请求如何携带请求参数：axios.get(‘请求地址’, params: 请求对象})
————————————————————————————————————————————————————————
vue组件全局注册的两种方法：Vue.use 和 Vue.component
————————————————————————————————————————————————————————
elementUI组件库里的级联选择器一定要指定prop属性，具体看官方文档
————————————————————————————————————————————————————————
控制级联选择器的选择范围：级联选择器有v-model双向数据绑定，绑定的值是你选择的id数组，在监听级联选择器内容改变的方法@change事件中可以判断数组的长度，如果不是你期望的值就可以清空v-model数组，并且return
————————————————————————————————————————————————————————
按钮的启用和禁用和某种数据有关时可以使用计算属性，比如项目中，根据级联选择器的选择结果（根据v-model绑定的数组长度）判断按钮启用还是禁用，就使用了计算属性
————————————————————————————————————————————————————————
渲染Tabs切换面板下面的数据时，从服务器返回的数据可能需要保存到两个不同的data中，然后判断到底渲染哪个，比如本项目中产品的分类参数（一个是动态参数，一个是静态参数），就需要在data（）{}中定义manyTabData和onlyTabData，从服务器接受到数据后，判断是动态参数就保存到many中，静态参数就保存到only中
————————————————————————————————————————————————————————
VScode快捷键：ctrl+D：选中多个相同的文本，ctrl+B:隐藏侧边栏
————————————————————————————————————————————————————————
字符串转换为数组并以空格分割：str.split(" “)
数组转换为字符串并以空格分隔：arr.join(” ")
删除指定下标数组元素：arr.splice(i,1)
————————————————————————————————————————————————————————
展开行的el-tag标签：点击添加按钮时所有的添加按钮都变为了文本框，并且输入文字时所有的文本框都跟着输入了，因为表格的展开行和tag标签是遍历生成的，所有的tag标签用的是同一个控制文本框显示隐藏的数据，需要为每一个tag标签的添加按钮提供唯一的控制数据，方法是：在后台获取表格数据的时候，tag标签数据保存在后台数据的某一项中，并且是以字符串格式保存的，需要遍历后台返回的数据拿到tag标签数据后通过字符串转换为数组并以，分割，在遍历后台数据时，data.forEach(item=>{})item就是表格每行的数据，可以为表格每行数据添加属性：item.inputVisible=false，item.inputValue=’’,然后tag按钮的v-if=“scope.row.inputVisible”,v-model=“scope.row.inputValue”
————————————————————————————————————————————————————————
$nextTick方法的作用，就是当页面上的元素被重新渲染之后，才会执行回调函数中的代码
————————————————————————————————————————————————————————
Vue全局过滤器：【以定义时间戳过滤器为例】Vue.filter（'dataFormat',function(value){
const dt=new Data(value)
const y=dt.getFullYear() //获取年份
const m=(dt.getMonth()+1+'').padStart(2,'0') //获取到的月份是从0开始需要+1，+''转换为字符串，用字符串的padStart方法，第一个参数的意思是不足两位，第二个参数是不足两位时用0占位补齐。
const d=(dt.getDate()+'').padStart(2,'0')
const hh=(dt.getHours()+'').padStart(2,'0')
const mm=(dt.getMinutes()+'').padStart(2,'0')
const ss=(dt.getSeconds()+'').padStart(2,'0')
return `${y}-${m}-${d} ${hh}:${mm}:${ss}` //这样的时间格式：2020-07-24 19:20:28
})
过滤器的使用：{{Origindata | dataFormat}}
————————————————————————————————————————————————————————
elementUI组件库Message Box的用法：首先在element.js文件中引入Message Box组件，
然后Vue.prototype.$confirm=MessageBox.confirm
const confirmResult=await this.$confirm(
'此操作将永久删除，是否继续?','提示',
{confirmButtonText:'确定',
cancelButtonText:'取消',
type:'warning'
}).catch(err=>err)
if(confirmResult!=='confirm'){
return this.$message.info('已取消删除')} //这个组件的返回值是promise，可以使用await和async
elementUI组件库步骤条组件
————————————————————————————————————————————————————————
elementUI组件库 的tab栏组件：el-tabs组件只允许el-tab-pane作为子节点，el-form只能包裹在el-tabs外面
————————————————————————————————————————————————————————
el-upload的action必须是绝对路径。上传图片时显示请求无效，没有权限（没有携带token）：因为el-upload组件没有用axios发起请求，虽然你设置了axios拦截器（在每次发起请求前都添加了请求头的token信息），但是el-upload组件并没有用axios发请求，所以得手动为el-uplod组件设置请求头token【el-upload组件有header属性，:header动态绑定就可以】
富文本编辑器：vue-quill-editor(运行依赖，不是elementUI组件)，具体看文档
————————————————————————————————————————————————————————
发送添加商品请求时，服务端要求发送的数据中商品三级分类id为字符串，而表单数据里是数组，就需要把字符串转换为数组，但是级联选择器双向绑定的商品三级分类id表单数据必须要求为数组，当把商品三级分类id表单数据改为字符串后就会报错，解决方法是把表单数据深拷贝一份，然后更改拷贝的数据，给后台提交拷贝的数据，需要使用lodash包（运行依赖）具体看文档，官方建议import包用_ 【import _ from ‘lodash’ 】
————————————————————————————————————————————————————————
lodash 可以把两个对象合并为一个新对象：_.merge(对象1，对象2)
————————————————————————————————————————————————————————
Echarts图形，看官方文档
————————————————————————————————————————————————————————
nprogress进度条效果：//导入
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
router.beforeEach((to, from, next) => {
NProgress.start()
next()
})
router.afterEach(() => {
NProgress.done()
})
VScode保存后，自动格式化代码后换行了，在.prettierrc文件中加个选项 “printWidth”:200（规定每行代码最大长度为200，长度超过200后才换行）
————————————————————————————————————————————————————————
项目打包上线使用build命令，不希望出现console打印，配置babel插件可以解决：找到npm官网的babel-plugin-transform-remove-console，然后找到可视化面板创建的vue项目中的babel-config-js，添加配置。但这么配置后无论是开发阶段还是打包上线阶段都会移除console，但在开发阶段中我们希望出现console方便我们测试，所以需要监测项目处于什么阶段，如果处于打包上线阶段就添加配置项，如果不是就不添加
在可视化工具中：
可以获取到–mode后的值，判断是否等于production
————————————————————————————————————————————————————————
Vue-cli 3.0 创建的项目默认屏蔽了所有webpack配置，如果需要自己配置可以在项目根目录创建vue.config.js来更改webpack默认设置【在vue.config.js导出的配置对象中，新增configureWebpack或chainWebpack节点，来自定义webpack的打包配置(chainWebpack和configureWebpack作用相同，但chain是通过链式编程的形式更改配置，configure是通过操作对象的形式更改配置)，例如我们想在开发阶段和打包阶段使用不同的入口文件js（复制两份main.js命名为main-prod.js和main-dev.js），需要在vue.config.js中进行如下配置
配置externals（减小打包文件体积，不打包externals配置项里的第三方资源），当你配置完externals后，当需要加载资源时，系统会去window全局查找
所以要在全局（index.html）下引入对应的js文件，在入口文件（main.js中引入的css样式表也会打包增加打包体积，所以也在全局下引入）
虽然在开发阶段，我们启用了element-ui组件的按需加载，尽可能的减少了打包的体积，但那些被按需加载的组件还是占用了较大的体积，此时，我们可以用CDN的形式来加载：1-在main-prod.js中，注释掉element-ui按需加载的代码。2-在index.html中引入element的js和css
————————————————————————————————————————————————————————
自定义首页内容：开发模式打开首页时标题前面加dev标识，并且不引入css和js，打包模式不加dev标识并且引入css和js。现在vue.config.js添加配置项
可以在index.html中获取到isProd，根据isProd的值操作
<%= %>(模板字符串语法)
————————————————————————————————————————————————————————
路由懒加载：
1-安装@babel/plugin-syntax-dynamic-import包。
2-在babe.config.js配置。
{
"plugins": ["@babel/plugin-syntax-dynamic-import"]
}
3-将路由改为按需加载形式（vue官方文档）
3.-
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-baz" */ './Baz.vue')
group分组，把若干个组件放到一组，加载时直接加载一组
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
