目的
统一开发风格，使代码结构更加清晰明了。
前提条件
项目是用vue搭建的，前端vue打开项目是需要一个环境运行的。
软件环境
- 脚手架: vue-cli 2.0
- PC端Vue项目UI框架：ElementUI
- 移动端Vue项目UI框架： 未定
- css 预处理： sass/scss
- 网络请求： axios
- 公共组件库： ******
- 图表：echarts
- 规范语言：es6
开发规范
一、目录结构
├── node_modules // 项目依赖包文件夹
├── build // 编译配置文件，一般不用管
│ ├── build.js
│ ├── check-versions.js
│ ├── dev-client.js
│ ├── dev-server.js
│ ├── utils.js
│ ├── vue-loader.conf.js
│ ├── webpack.base.conf.js
│ ├── webpack.dev.conf.js
│ └── webpack.prod.conf.js
├── config // 项目基本设置文件夹
│ ├── dev.env.js // 开发配置文件
│ ├── index.js // 配置主文件
│ └── prod.env.js // 编译配置文件
├── index.html // 项目入口文件
├── package-lock.json // npm5 新增文件，优化性能
├── package.json // 项目依赖包配置文件
├── src // 我们的项目的源码编写文件
│ ├── App.vue // APP入口文件
│ ├── assets // 初始项目资源目录，回头删掉
│ │ └── style // 全局样式
│ │ └── index.scss
│ │ └── utils //公用事件
│ │ └── index.js
│ ├── components // 组件目录
│ │ └──Hello
│ │ └──Hello.vue // 公用组件
│ ├── views
│ │ ├─ home
│ │ │ ├── components
│ │ │ │ ├── Sidebar
│ │ │ │ │ ├─ index.vue
│ │ │ │ │ ├─ Item.vue
│ │ │ │ │ └─ SidebarItem.vue
│ │ │ │ ├─ AppMain.vue
│ │ │ │ ├─ index.js
│ │ │ │ └─ Navbar.vue
│ │ │ └─ index.vue
│ │ └─ pages
│ ├── main.js // 主配置文件
│ └── serve // 路由配置文件夹
│ └── Home.api.js // 路由配置文件
│ └── units // 路由配置文件夹
│ └── index.js // 路由配置文件
│ └── router // 路由配置文件夹
│ └── index.js // 路由配置文件
└── static // 资源放置目录
二、文件名要求 (摘录云栖社区)
- index.js 或者 index.vue，统一使用小写字母开头的(kebab-case)命名规范
- 属于组件或类的，统一使用大写字母开头的(PascalCase)命名规范
- 其他非组件或类的，统一使用小写字母开头的(kebab-case)命名规范
Why
文件夹命名： camelCase VS kebab-case
展开node_modules 中的项目依赖，会发现，几乎所有的项目文件夹命名都是kebab-case命名的，使用kebab-case命名的文件夹比camelCase命名的文件夹看起来更清晰
组件命名：kebab-case VS PascalCase
vue的官方的风格指南中关于组件文件名的推荐：单文件组件文件的大小写强烈推荐
单文件组件的文件名应该要么始终是单词大写开头 (PascalCase)，要么始终是横线连接 (kebab-case)。单词大写开头对于代码编辑器的自动补全最为友好，因为这使得我们在 JS(X) 和模板中引用组件的方式尽可能的一致。然而，混用文件命名方式有的时候会导致大小写不敏感的文件系统的问题，这也是横线连接命名同样完全可取的原因。
属于components文件夹下的子文件夹，使用大写字母开头的PascalBase风格;
./components文件夹下每个components文件夹下最多只有一层文件夹，且文件夹名称为组件的名称，文件夹下必须有index.vue或index.js，
全局通用的组件放在 /src/components下示例
components // 组件目录
├─ Breadcrumb
│ └──index.vue
└─ SvgIcon
└──index.vue
业务页面内部封装的组件，放在各自页面下的示例
- views
├─ home
└─ components
├─Sidebar
│ └─ index.vue
├─Item.vue
├─SidebarItem.vue
├─ AppMain.vue
├─ index.js
└─ Navbar.vue`
其他业务页面中的组件，放在各自页面下的 ./components文件夹下
每个components文件夹下最多只有一层文件夹，且文件夹名称为组件的名称，文件夹下必须有index.vue或
index.js，其他.vue文件统一大写开头（Pascal case），components下的子文件夹名称统一大写开头（PascalCase）
其他文件夹统一使用kebab-case的风格
全局公共组件：/src/components示例
三、文件命名规范
- *.js文件命名规范
- 属于类的.js文件，除index.js外，使用PascalBase风格
- 其他类型的.js文件，使用kebab-case风格
- 属于Api的，统一加上Api后缀
- *.vue文件命名规范
- 除index.vue之外，其他.vue文件统一用PascalBase风格
- *.scss文件命名规范
- 统一使用kebab-case命名风格
四、 JS内容要求
- 需要用请求和公共方法的文件，要用import引入：
import store from '@/vuex/store'
import {_SendData,_SendDataRes} from '@/service/service.js';
- 子组件引入方式：
- 公共组件经常使用如： header,footer等会一起打包到公共js文件。
import {xyHeader,xySide} from '@/components';
components: {
xyHeader,
xySide
}
- 单独组件，不是经常使用的，会单独打包出来，需要引入自己加载出来。
'xyDrowDown': () => import('component/drowDown.vue')
- 暴露出去的部分，要按顺序：
<script>
import WorkFlowMap from '../components/WorkFlowMap' // 流程图
export default {
name: 'Index',
components: {
WorkFlowMap
},
data () {
return {
text: ''
}
},
mounted () {
// 默认意见按钮是否显示
this.loadList()
},
methods: {
loadList () {
}
}
watch: { // 监听
gongWenInfoId (newId) {
this.loadList(newId)
}
}
}
</script>
五、 语法规范
语法规范请遵循vue风格指南 至少B级，推荐C
六、 Css要求
- css用sass写，.vue以局部css来写~~
<style lang="scss" scoped>
.custom-view {
width: 100%;
background: #f8f8f8;
& div {
width: 800px;
margin: 30px auto 0 auto;
background: #fff;
}
&:first-child {
&:after {
content: "";
background: #fff;
margin: 0 auto 30px auto;
}
}
}
</style>
只作用于当前vue文件。
PS: 个人整理的有不合适的地方请务必留言指出，谢谢
