1. 安装vueAdmin-template

2. 安装vue-element-admin

3.

1. 顶栏左侧在components的breadcrumb里改
2. 顶栏右侧在/views/layout/components/Navbar改
3. app-main在views/dashboard/index.vue改，引入用户信息的方法在这里面

4. 步骤

• 访问顾乡服务器：local.localhost:${port}/api
• 访问线上：public.localhost:${port}/api
• npm start 开启本地服务
• npm run build:server 打包

5. 技巧

1. 在main.js（入口文件）写上

export default ({ Vue }) => {
  Vue.directive('focus', {
    // When the bound element is inserted into the DOM...
    inserted(el) {
      // Focus the element
      el.focus();
    },
  });
};

2. 在拦截器里写一个response.data.data，这样所有数据都是直接获得到data

3. 在页面里即使没东西也可以把<footer>撑到底，在元素上写了个align: center布局到中间

<div class="footer" align="center">
  display: flex;
  flex-direction: column;
  justify-content: space-between;
</div>

4. 隐藏边栏
   store.dispatch('CloseSideBar', { withoutAnimation: false })
5. 解决ios移动端滑动问题
   Google的
6. vue自定义指令，实现自动聚焦
   必须找到input元素才能用focus，并且需要setTimeout

//main.js
Vue.directive('focus', {
  // When the bound element is inserted into the DOM...
  inserted(el) {
    // Focus the element
    // if (el === input) {执行focus} else {找它子元素里的input}，针对el-input改的
    if (el.tagName === 'INPUT') {
      setTimeout(() => {
        el.focus()
      }, 0)
    } else {
      for (const i in el.children) {
        if (el.children[i].tagName === 'INPUT') {
          setTimeout(() => {
            el.children[i].focus()
          }, 0)
        }
      }
    }
  }
})

7. promise.all
   在文本行标注面板用promise.all，因为用forEach的时候循环不会等待上一次循环结束，会同时发几个请求，所以最后用promise.all来等待所有请求结束（同时发几个请求要比一个一个发快一点）
8. 实时更新
   在APP.vue里加了个interval，定时更新时间
9. es6语法
   接收对象作为参数时，可以这样写，更加清晰

export function submitTextError({ blockId, app }) { // {blockId: 123}
  return request.post('/admin/mark/markAsError', { blockId, app })
}

10 不能把箭头函数用在watch里，例如

watch: {
  a: () => {...}  // 报错！
}

6. element-ui

1. 验证功能

1. :rules="rules2"，rules2里写的就是valide的时候用的东西，用valide一般在submit的时候，把rules2里的全部验证一遍，相当于验证所有的input
2. prop=checkPass，prop里写的是valideField的key，this.$refs.ruleForm2.validateField('checkPass');，可以对单个input在blur的时候用

7. 移动端pc端的检测

1. 通过@/views/layout/mixin/ResizeHander.js，在layout里引入，mixins里用