vue-shop—主页面及用户列表

1、选择Container组件为页面布局。
2、element-UI的每一个el-XXX组件都可以当作一个类选择器来使用。
3、添加请求拦截器，为请求挂载token。

// 添加请求拦截器挂载token
axios.interceptors.request.use(config => {
  config.headers.Authorization = window.sessionStorage.getItem('token')
  // 最后必须返回config
  console.log(config)
  return config
})

config这个参数是请求对象：

4、获取左侧数据菜单。
5、生命周期函数created使用。
6、调用加载菜单接口，获取菜单数据。
7、双层for循环加载菜单数据。
8、注意动态数据绑定的使用。
9、这里注意，index如果唯一，点击一级菜单会牵一发而动全身，所以不唯一，而且要求参数类型是字符串，所以+ ‘’处理为字符串。

<el-submenu :index="item.id + ''" v-for="item in menuList" :key="item.id">

10、注意，如果想给图标加样式，可以点开元素查看它的class，进而修改。

11、unique-opened：每次只打开一个子菜单。
12、侧边栏的折叠与展开。
13、涉及到属性绑定值动态绑定一定要使用：。
14、定义welcome组件，并且让/home重定向到welcome组件。
15、二级菜单开启路由模式。

将index修改为data中的path。
16、用户列表组件。
17、左侧菜单的高亮显示需要满足俩个场景：
（1）、当我们打开某个子菜单后刷新整个页面，还能保持之前的显示；
（2）、点击某个子菜单这个子菜单高亮展示。

这里使用到了下面这个属性：

我们可以借助sessionstroge存储这个健值对。

17、面包屑导航组件。
18、卡片、搜索框组件。
19、使用layout布局。注意：总共有24栏。

20、获取用户列表数据。
21、绘制table，边框线、隔行变色等效果。
22、渲染数据、添加表格索引列。
23、作用域插槽！！！忘记是个啥了

          <template slot-scope="prop">
            <el-switch
              v-model="prop.row.mg_state">
            </el-switch>
          </template>

通过slot-scope 绑定数据，这一行的数据是prop.row
24、操作按钮，颜色，大小、文字提示的设置。
文字提示包裹标签即可：

    <el-tooltip class="item" effect="dark" content="Top Right 提示文字" placement="top-end">
      <el-button>上右</el-button>
    </el-tooltip>

25、分页查询。
26、用户状态的改变操作，swich开关的change事件。
27、请求接口也可以使用模版字符串。
28、实现搜索功能，清空功能。
29、添加用户对话框Dialog。
30、用户添加表单FROM的渲染。
31、自定义邮箱、手机号的校验规则。
32、对话框表单重置。
33、用户添加功能的实现。
34、修改用户的对话框。
35、删除用户。
36、全局挂载confirm.

本文地址：https://blog.csdn.net/weixin_44075963/article/details/110009683