generator-jason-vue-cli

vue脚手架

特点须知

1. 配置了 storybook、jsdoc 环境
2. vue 也 支持 jsdoc ，使用 jsdoc-vuejs 实现
3. components，views，stories 均已写好模板文件，复制可省大量手写时间

注意

1. 使用了 jsdoc-vuejs ，.vue文件的名字就是文档中的名字

使用脚手架步骤

# 1. 安装 vue官方脚手架
npm install -g vue-cli

# 2. 安装 yeoman
npm install -g yo

# 4. 初始化项目
vue init webpack

# 5. generator-jason-vue-cli
yo generator-jason-vue-cli

命名规范

1. 所有的文件用 kebab-case (短横线分隔命名)
2. JS变量使用 camelCase (驼峰式命名)
3. JS常量使用下划线 '_' 分割单词
4. style中不允许出现大写单词，用'-'分割单词

注意

1. components下的组件默认全部都为全局组件
2. 所有组件必须指定name！

src目录结构

src
  assets
  components
  views
  router
  store
  api
  mock
  stories

assets

存放静态资源文件

assets
  styles
  scripts
  images
  fonts

components

注意

1. 组件，已文件夹的形式存放
2. 前缀为组件的作用
3. 若无意外此文件夹的都为全局组件，默认已配置好

components
  base-list
    index.vue
  comp-music-list
    index.vue
  transition-slide
    index.vue
  transition-group-item
    index.vue
  ...

|前缀 |说明 | |-----------------|--------------------------------- | |base |基础组件 | |comp |业务组件 ( 基础组件组成的的复合组件 ) | |transition |transition 封装 | |transition-group |transition-group 的封装 |

views

存放模块（页面）组件，已文件夹的形式存放

views
  index
    index.vue
    index-header.vue
    index-footer.vue
    ...

router

存放 vue-router 路由文件

router
  index.js

store

存放 vuex 相关文件

  store
    state.js
    getters.js
    actions.js
    mutations.js
    index.js

vuex 思路规范

1. 组件不能提交 mutation 只能提交 action
2. 组件中不可以直接获取 state 属性，需要通过 getter 代理
3. mutation 中会有值纠正功能 ( state.num = num || 0 )
4. mutation 中会有基础智慧，( 比如：把一个 state 改成了 xxx ，另外一个 state 一定为 xxx )
5. mutation 和 action 的载荷一律为 对象

api

接口层（所有的 ajax 都由这里发送 并 处理数据）

注意

1. 接口文件 get、post 开头
2. 接口是返回 Promise 的异步函数
3. 接口文件会暴漏出自己的接口 URL
4. 通过 index.js 中包含引入所有的 接口js 并导出
5. 通过 config.js 中导出配置参数
6. $api 加入到 Vue 的原型中
7. 若请求的数据需要处理，在 api 进行处理，尽量保证 组件 的简洁

api
  index.js
  config.js
  get-list.js
  post-login.js
  ...

mock ( 见仁见智 )

模拟数据

stories

组件开发环境、组件的说明书 A 为模板文件

stories
  A
    index.stories.js
  base-scroll
    index.stories.js
  ...