Vue element template 前端样式第一遍梳理

按照官网的路径走

1.嵌套值router-view 标签

 一个是menu1，一个是menu2  ，menu2中还嵌套了一层，所以要继续添加router-view   ，因此理论上是可以无限循环，但是要添加router-view

官网这里也有讲

 因此elemnt   menu 写出的多级是要与Vue  路由相互对应的。

 2.强行刷新看官网提供的方法

3.侧边栏外链的写法

4.默认展开src\layout\components\Sidebar\index.vue

引入路径  侧边栏的

 

5.封装指令权限

可以根据他已经给出的指令

6.如何新增一个页面

1.在路由逻辑中设计

同时

• 新增 view
• 新增 api
• 新增组件
• 新增样式

7.处理css

只要加上 <style scoped> 这样 css 就只会作用在当前组件内了

使用 scoped 后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。

8.样式关系

常见的工作流程是，全局样式都写在 src/styles 目录下，每个页面自己对应的样式都写在自己的 .vue 文件之中

9.覆盖 element-ui 样式

.article-page {
  /* 你的命名空间 */
  .el-tag {
    /* element-ui 元素*/
    margin-right: 0px;
  }
}

 

10.深度选择期

当你子组件使用了 scoped 但在父组件又想修改子组件的样式可以 通过 >>> 来实现：

一些预处理器（例如Sass）可能无法>>>正确解析。在这些情况下，您可以改用/deep/或::v-deep组合器-两者都是它们的别名，>>>并且工作原理完全相同。一些预处理器（例如Sass）可能无法>>>正确解析。在这些情况下，您可以改用/deep/或::v-deep组合器-两者都是它们的别名，>>>并且工作原理完全相同。

@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。

11.服务端的详细请看我之前的一篇关于vue   element  admin 的流程控制