/vue-pro-template

a pro template that requires pandly-cli scaffolding

Primary LanguageVue

{{ name }}

{{ description }}

命令

  • 安装：npm install
  • 开发：npm run serve
  • 打包：npm run build
  • 分析：npm run build --report

文件命名规范

components / layouts

components和layouts下的文件夹名以及.vue文件统一使用大驼峰的形式命名，如SideMenu、SideMenu.vue。

.js / .scss / 图片

所有的.js、.scss和图片文件都使用短横线连接的形式命名，比如init-dialog.js、element-variables.scss、logo-bg.png。

views

views下的文件夹名以及.vue文件统一使用短横线连接的形式命名，比如page-one、page-one.vue。

文件结构规范

components

components下的组件，建议用一个文件夹来承载，形式如下：

|-src
| |-components
| | |-SideMenu
| | | |-index.js
| | | |-SideMenu.vue
  • SideMenu/index.js：至少有一个index.js文件，用来暴露组件；
import SideMenu from './SideMenu'
export default SideMenu
  • SideMenu/SideMenu.vue：至少有一个SideMenu.vue文件，用来编写组件。

views

views下的路由页面，建议用一个文件夹来承载，形式如下：

|-src
| |-views
| | |-navigation1
| | | |-components
| | | | |-log.vue
| | | |-option1.vue
| | | |-option2.vue
  • components：属于这个页面的组件。

router

|-src
| |-router
| | |-modules
| | | |-index.js
| | | |-navigation1.router.js
| | |-index.js
  • modules/navigation1.js：路由模块按功能划分，比如navigation1.router.js中存放关于navigation1模块的路由；
  • modules/index.js：实现了modules中路由模块的自动合并，无需手动合并；
  • index.js：vue-router的相关配置。

api

|-src
| |-api
| | |-user
| | | |-index.js
| | |-base.js
| | |-config.js
| | |-index.js
| | |-install.js
  • user/index.js：请求接口模块按照职责功能划分，比如user文件夹中存放关于用户信息的接口const API_USER = '/user'；
  • base.js：axios的封装；
  • config.js：axios的一些配置和拦截器；
  • index.js：暴露所有的api接口；
  • install.js：请求方法的全局安装。

使用：

import { API_USER } from '@/api'

mounted () {
  this.$_get(API_USER)
}

代码编写规范

  • 始终在v-for中使用:key
<!-- Bad -->
<div v-for='product in products'></div>

<!-- Good -->
<div v-for='product in products' :key='product.id'></div>
  • 在事件中使用短横线命名
this.$emit('close-window')
<!-- 在父组件中 -->
<popup-window @close-window='handleEvent()' />
  • 使用驼峰式声明props，并在模板中使用短横线命名来访问props
<!-- Bad -->
<PopupWindow titleText='hello world' /> 
props: { 'title-text': String }

<!-- Good -->
<PopupWindow title-text='hello world' /> 
props: { titleText: String }
  • 不要在同个元素上同时使用v-if和v-for指令
<!-- Bad -->
<div v-for='product in products' v-if='product.price < 500'>
  • 大于等于五个attribute元素应该分多行撰写
<!-- Bad -->
<MyComponent foo="a" bar="b" baz="c" hah="d" cdd="f" />

<!-- Good -->
<MyComponent
  foo="a"
  bar="b"
  baz="c"
  hah="d"
  cdd="f"
/>
  • 保持指令简写的一致性
  • 模板表达式应该只有基本的JS表达式
  • 在template中，没有内容的组件，使用自闭合的形式
  • 按照Vue官方推荐的组件/实例的选项的顺序来进行编写
  • ...

内置了eslint-plugin-vue对代码进行检查，提供了三种不同的校验机制供选择：

  1. plugin:vue/recommended
  2. plugin:vue/strongly-recommended
  3. plugin:vue/essential

所有的配置文件都在.eslintrc.js中，可以按照自己的需求进行配置。

更多内容：Vue 编码规范

推荐阅读：Vue 官方风格指南

前后端联调规范

前后端联调使用node proxy代理的方式来实现。模板中集成了多个环境，只需要切换相应的url就能代理映射到对应的环境，无需重启，比如

  • http://localhost:8080对应代理的是本地Mock环境，Mock数据在根目录的mock文件夹中撰写；
  • http://127.0.0.1:8080对应代理的是NEI平台环境；
  • 测试环境的接口由于需要登录的原因，需要本地配置相应的host，只要一级域名相同，就能代理到对应的测试环境，比如 http://proxy.netease.com:8080对应代理的是测试环境（当然还需要测试环境提前登录种下cookie）；
  • 后端开发人员的本地环境，则没法避免，需要手动填写，并重启前端服务。

代理的配置在proxy.config.js中，有需要的可以自行修改。

Git 规范

分支规范

遵循gitflow的开发方式

代码提交规范

采取angular团队的代码提交规范，使用npm run commit来代替git commit，按照约束一步步填写commit，commit编写完成以后会对commit的格式进行校验，以及对在暂存区的.js/.vue文件进行lint校验。

初始化

模板内置了是否将本地项目初始化为一个git仓库的选项，选择初始化即可

初始化成功以后，依次执行如下命令就能将本地仓库关联到远程仓库：

  • git add .
  • npm run commit
  • git remote add origin https://github.com/xxx/xxx.git
  • git push origin master