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
  ...

---