VUE 使用总结

vue 的中文文档https://cn.vuejs.org/v2/api/很全，这里是使用后的个人总结，项目地址vue-admin。

项目关键词

• Element 组件库
• bootstrap 样式库
• fontawesome 图标库
• stylus 语法
• eslint 和 prettier 代码风格检查
• 使用基于promise 封装的原生 fetch
• easy-mock 模拟数据

1. Element 饿了么出品，已比较完善，样式封装、图标，开发一套项目够用，主打 VUE 版，同时也有 react、angular 版，标签以el-开头。bootstrap-vue没有 Element 活跃，标签以b-开头，现在好像已没有代码维护了；
2. bootstrap 样式库，可以在引入 css文件，也可以通过引入 bootstrap-vue来引入样式；
3. eslint和 pritter 组合使用来约束代码规范，vscode 也支持插件安装，建议同时安装 vscode 版插件，这样在写代码时就直接给出(经测试不安装插件只用依赖方式需要保存编译后才会出错)。在两者同时使用时注意可能会存在规则冲突，主要是调整配置eslintrc.js；
4. easy-mock 提供了开发者在开发阶段可以直接配置的服务接口。

vue router 和 vuex

1. vue 路由 router

   1. 路由每一个path 都对应一个 componet 来处理
   2. 权限控制在路由过滤中处理router.beforeEach，所有请求先有beforEach 中的回调来处理，如果没有权限，则可调用next(/login)来实现跳转到登陆界面

2. vue 单项数据流
   
   引入vuex 后
   

styuls

1. stylus 没有括号、分号和冒号，使用缩进来简洁使用，在父样式下使用&来写子样式，下面是一个例子

<style lang='stylus' scoped>
.user
  width 100%
  background-color #fff
  border 1px solid #ddd
  border-radius 5px
  padding-top 1em
  padding-bottom 1em
.operate-pane
  display flex
  & .input
    width 20em
.pagination
  text-align right
  display block
</style>

目录结构

1. api 存放和服务端交互的代码
2. store 存放全局数据状态
3. permission 是权限管理
   整体结构
   
   展开后
   

语法总结参考