Vue项目组织规范

一、 项目搭建环境
  1. 开发环境:node
  2. Vue项目搭建工具
    a) Webpack + vue-cli
  3. 项目安装
    a) vue init webpack projectName
    b) cd projectName
    c) npm install
    d) npm run dev
  4. 开发工具
    a) Vscode
  5. 代码检测工具
    a) ESLint
二、 开发规范
1. 目录结构
|— build					构建脚本目录
	|— build.js				生产环境构建(编译打包)脚本
	|— check-versions.js		版本验证工具
	|— utils.js				构建相关工具方法(主要用来处理css类文件的loader)
	|— vue-loader.conf.js		处理vue中的样式
	|— webpack.base.conf.js		webpack基础配置
	|— webpack.dev.conf.js		webpack开发环境配置
	|— webapck.prod.conf.js		webpack生产环境配置
|— config				项目配置
	|— dev.env.js			开发环境变量
	|— index.js				主配置文件
	|— prod.env.js			生产环境变量
	|— test.env.js			测试环境变量
|— node_modules				项目依赖模块
|— mock					mock数据目录,用于本地数据模拟
|— src					项目源码目录
	|— assets				资源目录,资源会被webpack构建
	    |— js				公共js文件目录
	    |— css				公共样式文件目录
	    |— images			图片存放目录
	|— components			公共组件目录
	    |— com1				组件1
	        |— images			静态资源
	|— com1.vue		template/style/script
	    |— com2				组件2
	        |— images			静态资源
		   |— com2.vue		template/style/script
	|— common 
	    |— network 			存放项目的网络模块,接口
	|— tools			自己封装的一些工具
	|— App.vue				根组件
	|— main.js				入口js文件
	|— routers				前端路由目录
	    |— index.js
	|— pages				前端页面文件
	|— vuex				应用级数据管理
		|— index.js			组装模块并导出,统一管理导出,也可命名为store.js
		|— state.js			单一状态树,定义应用数据结构及初始化状态
		|— getters.js			获取state中的状态,仅单向获取数据,不做任何修改
		|— actions.js			调用mutation方法对数据进行操作	
		|— mutation-types.js		存放vuex常用的变量
		|— mutations.js		定义state数据的修改操作
	|— api				抽离出的api请求
|— static				纯静态资源,不会被webpack构建,eg:没有npm包模块
|— test					测试
	|— unit				单元测试
	|— e2e				e2e测试
|— .babelrc				babel的配置文件
|— .editorconfig			编辑器的配置文件
|— .gitignore				git的忽略配置文件
|— .postcssrc.js			postcss的配置文件
|— index.html				html模板,入口页面
|— package.json				npm包配置文件,依赖包信息
|— README.md				项目介绍
2. 文件、组件命名规范,结构规范
a) 组件命名

组件文件名应该始终以单词大写开头(PascalCase),组件名也是以单词大写开头,当多个单词拼写成的组件时,单词开头大写,采用驼峰式命名规则。一般是多个单词全拼,减少简写的情况,这样增加可读性。组件应该都放到components文件夹下,单个页面独立一个文件夹,用来放相对应的vue文件以及页面相关的样式文件,样式少可直接写到页面组件里边,这样更符合组件化的思想。文件夹名称应统一格式,小写开头,统一以page结尾,比如homePage,loginPage,listPage这样子的命名。公用组件应该统一放到public文件下,公共的样式文件应该抽取放到统一的文件去统一管理,比如:TodoItem.vue,TodoList.vue。

b) 基础组件命名
  • i. 当项目中需要自定义比较多的基础组件的时候,比如一些button,input,icon,建议以一个统一的单词Base开头,或者放到base文件夹统一管理,这样做的目的是为了方便查找。
  • ii. 页面级组件应该放到相对应页面文件夹下,比如一些组件只有这个页面用到,其他地方没有用到的,可以直接放到页面文件夹,然后以父组件开发命名。
  • iii. 项目级组件一般放到公共文件夹public下给所有的页面使用。
c) 组件结构

i. 组件结构一个遵循从上往下是template,script,style的结构

d) 组件样式

i. 单个组件样式一般可直接写到组件下style标签下,为了防止样式污染,可添加scoped 属性,也可以通过设置作用域来防止样式污染,写样式的时候尽量少写元素选择器,为了提高代码查找速度,可以用类选择器。

e) 多属性编写格式

i. 当组件定义很多的props属性值时,应该每个特性属性一行。

f) Props定义

i. 当定义组件时,应该对传入组件的props进行严格的定义,至少指定类型,设定默认值,定义好规范方便他人使用。

g) 位v-for 增加键值Key,这样加快查找速度
h) 当页面用到一些共享的状态的时,建议使用vuex
3. 文件格式

a) UTF-8

4. 页面中class命名要求

a) 命名中尽量避免使用中文拼音,应该采用更简明有语义的英文单词进行组合
b) 采用下划线命名,例如”shop_list”,避免和第三方ui库命名冲突

5. 资源路径编译规则

a) 如果是绝对路径,会原样保留
b) 如果路径以.开头,将会被看做相对模块依赖
c) 如果路径以@开头,也会被看作一个模块依赖,需要在webpack配置中配置即可。
d) 文件扩展名例如.js,.vue可以省略,也可以在webpack中配置

6. CSS

a) css使用stylus,.vue以局部css来写值作用于当前文件。

7. 注释规范
  • a) 每个方法的顶部加上注释
  • b) Html中每个功能区的开头和结束都写上注释
  • c) 每个功能区的css也注明开始和结束
  • d) 每个字段和变量后面加上注释
    以下情况填写注释:
  • a. 公共组件的使用说明
  • b. 各组件中重要函数或者类说明
  • c. 复杂的业务逻辑处理说明
  • d. 特殊情况的代码处理说明,对于特殊用途的变量、存在临界值、使用了某种算法思路进行注释说明
  • e. 注释块必须以/(两个星号)/
  • f. 单行注释使用 //
8. 编码规范

尽量按照ESLint格式要求编写代码

  • a) 使用ES6风格编码源码
    定义变量使用let,定义常量使用const
    使用export,import模块化
  • b) 组件props原子化
    提供默认值
    使用type属性校验类型
    使用props之前先检查prop是否存在
  • c) 避免this.$parent
  • d) 谨慎使用this.$refs
  • e) 无需将this赋值给component变量
  • f) 调试信息 console.log() debugger使用完及时删除
9. Js中的命名规范
  • 自定义变量名
    i. 驼峰式,首字母小写命名规范书写
    ii. 数字类型以n开头,字符串以s开头,布尔类型以b开头,对象以o开头,数组以a开头。Eg:nAge=29、sName=”Jone”
  • 自定义常量名
    i. 常量名采用大写+ _下划线规范书写
  • 函数名
    i. 驼峰式,首字母小写命名规范
    ii. 以操作类型+操作对象
    iii. 操作类型如下:
    新增类(add)、编辑类(edit)、删除类(delete)、查询单个类(get)、查询列表类(search)、打印类(print)、上传类(upload)、下载类(download)、导入类(import)、导出类(export)、检验类(check)、重置类(reset)、同步类(syn)、分页类(page)
三、 接口请求
  • 请求用Axios ,Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 。
  • Axios请求接口加密。
四、 Vue官方风格指南

https://cn.vuejs.org/v2/style-guide/

五、开发文档参考
Logo

前往低代码交流专区

更多推荐