README
generator-jason-vue-cli
vue脚手架
特点须知
- 配置了 storybook、jsdoc 环境
- vue 也 支持 jsdoc ,使用 jsdoc-vuejs 实现
- components,views,stories 均已写好模板文件,复制可省大量手写时间
注意
- 使用了 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
命名规范
- 所有的文件用 kebab-case (短横线分隔命名)
- JS变量使用 camelCase (驼峰式命名)
- JS常量使用下划线 '_' 分割单词
- style中不允许出现大写单词,用'-'分割单词
注意
- components下的组件默认全部都为全局组件
- 所有组件必须指定name!
src目录结构
src
assets
components
views
router
store
api
mock
stories
assets
存放静态资源文件
assets
styles
scripts
images
fonts
components
注意
- 组件,已文件夹的形式存放
- 前缀为组件的作用
- 若无意外此文件夹的都为全局组件,默认已配置好
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 思路规范
- 组件不能提交 mutation 只能提交 action
- 组件中不可以直接获取 state 属性,需要通过 getter 代理
- mutation 中会有值纠正功能 ( state.num = num || 0 )
- mutation 中会有基础智慧,( 比如:把一个 state 改成了 xxx ,另外一个 state 一定为 xxx )
- mutation 和 action 的载荷一律为 对象
api
接口层(所有的 ajax 都由这里发送 并 处理数据)
注意
- 接口文件 get、post 开头
- 接口是返回 Promise 的异步函数
- 接口文件会暴漏出自己的接口 URL
- 通过 index.js 中包含引入所有的 接口js 并导出
- 通过 config.js 中导出配置参数
- $api 加入到 Vue 的原型中
- 若请求的数据需要处理,在 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
...