运行项目 node ./app.js  

vue ui 进入可视化面板

写新功能创建分支 
1 git status  先初始化
2 git checkout -b login 创建分支并切换分支  

配置文件 功能里面 安装 babel router linter/formatter  使用配置文件 
ESLint+Standard config  
下载element插件 配置文件的时候 第一项选择  import on demand  
配置axios 依赖  

vue.config.js 配置  关闭 代码检查 好写注释 
module.exports = { 
  lintOnSave: false,
  outputDir: 'dist',  //build输出目录
  assetsDir: 'assets', //静态资源目录（js, css, img）
  lintOnSave: false, //是否开启eslint
} 

重定向 如果访问的 是 / 重定向到 '/login'
{
    path:'/',
    redirect:'/login'
},
{
    path: '/login',
    component: Login
}, 

安装less-loder 和 less  安装在开发依赖里面 

使用 element 按需导入 
plugins 的 login.vue  

import Vue from 'vue' 
import { Button } from 'element-ui' 
import { Form,FormItem } from 'element-ui'
import { Input } from 'element-ui' 
// 导入弹窗组件提示 这需要挂载到vue原型上 
import { Message } from 'element-ui'
Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.prototype.$message = Message 

element样式 不出现 https://blog.csdn.net/shishuai4206/article/details/114300279 
main 引入element css 配置文件  
import "element-ui/lib/theme-chalk/index.css";  

main 引入axios 
import axios from 'axios'
Vue.prototype.$http = axios   把 axios挂载到ver原型对象上 
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'  设置请求根路径 

退出登录 
  基于token的方式是心啊推出比较简单 只需要销毁本地的token即可 
  清空 token 
    window.sessionStorage.clear()
  跳转到登录页 
  this.$router.push('/login)

格式化文档出现 冒号 
  根目录下创建 .perttierrc 
  {
      "semi":false,
      "singleQuote":true
  } 
  加入这个配置 出现单引号 不会出现结束的分号

空格 出现报错 
  .eslintrc.js 文件下面 rules下面加入 'space-before-function-paren':0 

如果要推送远程仓库中没有的分支 
  1 切换到 login 
  2 git push -u origin login  远程分支上的login分支 

拦截器 
  通过axios请求拦截器添加token , 保证拥有获取数据的权限  设置拦截器 可以使用有权限的api接口
  可以发送到服务器端 
  axios请求拦截
  axios.interceptors.request.use(config => {
    为请求头对象,添加token验证的Autgorization字段
    config.headers.Authorization = window.sessionStorage.getItem('toekn)
    return config 
  })

ctrl + b 隐藏快捷栏 


表单预校验 没填值的话提示红色 
// 点击按钮添加新用户 
  addUser () {
      // 先进性表单预校验  表单没填值得话 提示 红色 
      this.$refs.addFormRef.validate(valid =>{
          if(!valid) return  回调函数返回布尔 为false 不通过 为true就是预校验通过
      }) 
  }

// 监听修改用户对话框的关闭 事件 重置验证规则  
  editDialogClosed () {
      this.$refs.editFormRef.resetFields()
  }

推送分支到远程仓库没有的 
git push -u origin user 
推送到远程 并起名字 user 

如果云端有master 的话 直接 git push  就行 


模版中的pre标签 可以把数据展开成为 树状结构
<template slot-scope="scope">
    <pre>
        {{scope.row}}
    </pre>
</template>


 git merge rights 在主分支合并其他分支的代码
提交 子分支 git status -> git add . -> git commit -m '' -> git push 远程有仓库 没有的话 -> git push -u origin 名字

树形状的table表格   里面有 + 和 - 展开和隐藏配置项
  商品管理 -> 商品分类 
  下载依赖  vue-table-with-tree-grid 


弹出是否删除 
// 根据id删除对应的参数 
  async removeParmas (attr_id) {
      const confirmResult = await this.$confirm('此操作将永久删除该参数, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
      }).catch(err => err) 
      // 用户取消了删除的操作 
      if(confirmResult !== 'confirm') return this.$message.info('已取消删除！') 
      // 等于 confirm 就是删除 
      const {data:res} = await this.$http.delete(`categories/${this.cateId}/attributes/${attr_id}`)  
      if(res.meta.status !== 200) this.$message.error('删除失败')  
      this.$message.success('删除成功')  
      this.getParamsDate()
      console.log(res); 
  }   


回车和失去焦点触发的函数 
@keyup.enter.native="handleInputConfirm"
  @blur="handleInputConfirm" 



时间的过滤器 两位数不足零的话补零  把毫秒转换时分秒 
// 注册时间全局过滤器 过滤毫秒的时间  
main.js 
Vue.filter('dateFormat',originVal => {
  const dt = new Date(originVal) 
  // 拿到完整的四月的年份 
  const y = dt.getFullYear() 
  const m = (dt.getMonth()+1 + '').padStart(2,'0') // 如果不足两位补个零 调用字符串的函数  padStart 第一个参数 总长度多少位 第二个参数是如果不足的话用什么填充  
  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}`
})

a.vue 里面使用 
<el-table-column label="创建时间" prop="add_time"  width="140">  
    <template slot-scope="scope">
        {{scope.row.add_time | dateFormat}} <!-- 竖线调用过滤器 -->
    </template>
</el-table-column>


分业 
<el-pagination
    @size-change="handleSizeChange"   每页显示几条数据的函数 参数的新的每页显示的条数 
    @current-change="handleCurrentChange"  点击第几页页码发生改变 参数就是新的页码
    :current-page="queryinfo.pagenum"  当前第几页 
    :page-sizes="[3, 5, 7, 10]"
    :page-size="queryinfo.pagesize"  每页显示几条数据
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    background>
</el-pagination>

queryinfo : {
                query:'',
                pagenum:1,
                pagesize:10
            },


// 每条几页 
        handleSizeChange (newsize) {
            this.queryinfo.pagesize = newsize  
            this.getGoodList() 
        },
        // 
        handleCurrentChange(newpage) {
            this.queryinfo.pagenum = newpage  
            this.getGoodList() 
        },

根据路由跳转页面  
  this.$router.push('/goods/add')


级联选择器 
<el-cascader
    v-model="addForm.goods_cat"  绑定的是数组 []  三项的话 里面三个值 
    :options="catelist"    数据源
    expand-trigger="hover"
    :props="cateProps"  规则 
    @change="handleChange">
</el-cascader>

cateProps:{
                lebel:'cat_name',  显示的 
                value:'cat_id',   id 
                children:'children'
            },



上传图片 

 <!-- 
    action 表示图片要上传的后台地址
    :on-preview  是预览的那个事件 点击变成大图的那个事件 
    :on-remove  点击小图展示的x号触发 
    list-type="picture"  展现方式
-->
<el-upload
    :action="uplodURL"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    list-type="picture"
    :headers="headerObj">
    <el-button size="small" type="primary">点击上传</el-button>
</el-upload>



// 上传的url地址 
uplodURL:'https://www.liulongbin.top:8888/api/private/v1/upload',
// 图片上传组件的请求头 为了防止上传到数据库报的 无效token错误
headerObj:{
    Authorization:window.sessionStorage.getItem('token')
}



富文本编辑器 

安装依赖 -> 运行插件  
vue-quill-editor 


main.js 
// 导入富文本编辑器 
import VueQuillEditor from 'vue-quill-editor'

import 'quill/dist/quill.core.css' // import styles
import 'quill/dist/quill.snow.css' // for snow theme
import 'quill/dist/quill.bubble.css' // for bubble theme

Vue.use(VueQuillEditor, /* { default global options } */)

a.vue 
<quill-editor
v-model="addForm.goods_introduce">

</quill-editor> 

深拷贝解决  
安装依赖 -> 运行插件 
lodash  
、lodash  cloneDeep(obj) 方法 级联选择器双向绑定的源对象 这发送请求是新对象   

https://www.lodashjs.com/docs/lodash.cloneDeep

文件引入 
a.vue 

import _ from 'lofash'


// 添加商品 
add () { 
    this.$refs.addFormRef.validate(valid => {
        if(!valid) return this.$message.error('请填写完整')
        // 执行添加的业务逻辑 
        // 因为 级联选择器双向绑定的要数组 发送请求要的是字符串 所以报错 所以 要进行深拷贝 
        // lodash  cloneDeep(obj) 方法 级联选择器双向绑定的源对象 这发送请求是新对象  
        // 
        const form =_.cloneDeep(this.addForm)
        form.goods_cat = form.goods_cat.join(',')  
        console.log(form);
    })
}