新增完路由之后不要忘记在 @/views 文件下 创建对应的文件夹,一般一个路由对应一个文件,该模块下的功能组件或者方法就建议在本文件夹下创建一个utils或components文件夹,各个功能模块维护自己的utils或components组件。
最后在 @/api 文件夹下创建本模块对应的 api 服务
新增组件注意:
在全局的 @/components 只会写一些全局的组件,如富文本,各种搜索组件,封装的日期组件等等能被公用的组件。每个页面或者模块特定的业务组件则会写在当前 views 下面。如:@/views/article/components/xxx.vue。这样拆分大大减轻了维护成本。
请记住拆分组件最大的好处不是公用而是可维护性!
新增样式
页面的样式和组件是一个道理,全局的 @/style 放置一下全局公用的样式,每一个页面的样式就写在当前 views下面,请记住加上scoped 或者命名空间,避免造成全局的样式污染
使用 scoped 后,父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发,调整其子组件根元素的样式。
vue-element-admin 所有全局样式都在 @/styles 下设置
自定义 element-ui 样式修改
由于 element-ui 的样式我们是在全局引入的,所以你想在某个页面里面覆盖它的样式就不能加 scoped,但你又想只覆盖这个页面的 element 样式,你就可在它的父级加一个 class,用命名空间来解决问题。
当然也可以使用深度作用选择器
父组件改变子组件样式 深度选择器
当你子组件使用了 scoped 但在父组件又想修改子组件的样式可以 通过 >>> 来实现
.a >>> .b { /* ... */ }
如果你使用了一些预处理的东西,如 sass 你可以通过 /deep/ 来代替 >>> 实现想要的效果
在某一vue页面引入文件
<style rel="stylesheet/scss" lang="scss">
@import "src/styles/mixin.scss";
</style>
网友评论