vue规范

2019-12-24 本文已影响0人 AnitaYT

vue 2.x 常规项目目录

|— build       构建脚本目录 
    |— build.js      生产环境构建（编译打包）脚本 
    |— check-versions.js   版本验证工具 
    |— utils.js      构建相关工具方法
    |— 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   公共组件目录  
    |— api     接口模块
    |— utils   工具文件夹
    App.vue    根组件 
    main.js    入口js文件 
    |— routers    前端路由目录     
        index.js 
    |— views/pages     前端页面文件 
    |— store     应用级数据管理  
        |— index.js/store.js      组装模块并导出，统一管理导出
        |— state.js    单一状态树，定义应用数据结构及初始化状态  
        |— getters.js   获取state中的状态，仅单向获取数据，不做任何修改  
        |— actions.js   调用mutation方法对数据进行操作   
        |— types.js 存放vuex常用的变量  
        |— mutations.js   定义state数据的修改操作
|— static 纯静态资源，不会被webpack构建
|— test      测试
|— unit      单元测试
|— e2e       e2e测试
.babelrc     babel的配置文件
.editorconfig   编辑器的配置文件
.gitignore    git的忽略配置文件
.postcssrc.js   postcss的配置文件
index.html    html模板，入口页面
package.json    npm包配置文件，依赖包信息
vue.config.js  vue配置文件
README.md     项目介绍

规范

项目命名

采用小写方式，短横线分隔，eg：project-name

文件夹命名

采用小写方式，若为复数形式，则加s。 eg：imgs、styles

变量命名、函数命名

使用es6风格编码,eg：定义变量用let,定义常量用const, 箭头函数等
小驼峰式命名法，变量eg:myName ,方法eg: getList
请求接口数据方法，可以用Data结尾，eg:getFormData、getListData
尽量在每个方法前都添加注释

组件命名

单文件组件书写顺序为template,script,style
大驼峰式命名法，2-3个单词组合，根组件App(与之区分)。eg：TodoList、TodoItem。使用时为 <todo-list></todo-list>
组件内部文件夹包含：子组件文件夹childs、样式文件style、静态资源文件resources。目录结构：

|-- demo   文件夹
    |-- resources
    |-- childs
    |-- style
    |-- Demo.vue

props 命名

命名使用小驼峰式命名法，使用时用-连接

样式类命名

采用小写方式，短横线分隔，eg:xxx-xxx，和变量进行区分
单个组件样式写在scoped
scoped中，尽量使用类选择器，少使用元素选择器
尽量避免使用中文拼音，用语义话英文单词组合，做到见字知意
字体粗细规定统一值，eg:normal/bold/bolder分别设置成400、600、800

注释

单行： //
多行： /** */

template style注释

对每个功能区做注释

图片命名

列表图片，可按照列表索引命名
图标图片，用项目名缩写-icon-

指令统一

规则：要么统一缩写，要么不统一。
缩写(:表示v-binid，@表示v-on)：

<input v-bind:value="123" v-on:blur="handleInput" >

不缩写

<input :value="123" @blur="handleInput">

路由

路由对象至少需要三部分：path、name、component
path: 使用大驼峰式命名法

// 统一使用AMD规范的require或者es6的import 引入路由文件
{
    path: "/RoutePath",
    component: ()=> import("")
    // component: ()=> require("")
    name: "路由名称"
}

vuex

mutations数据同步处理
actions数据异步处理
组件提交同步处理数据 this.$store.commit("xxx",xxx)
组件异步处理数据 this.$store.dispatch("xxx",xxx)

框架选择

pc: Element UI、iView
移动端：mint-ui、vant

css 预处理器

Less、Sass、Stylus
建议时用less,轻量，满足大部分场景。

web字体

可使用Font Awesome、 Iconfont代替图片

其他

不同浏览器样式标准不用，造成浏览器样式差异，有些第三方ui也会对默认样式进行修改，要进行reset.css的引入。
函数全局问题：可使用that = this,解决this指向问题。
v-for要设置key值，避免与v-if连用，可使用v-show。
特殊状态下，可以设置ref,用this.$refs.xxx，操作dom。
样式值为0时，省略单位；为0.开头小数时，可省略0。eg

padding: 0px;
opacity: 0.5;

// 可改为
padding: 0;
opacity: .5;

对于一组固定的图片或图标，可以适当的根据情况使用雪碧图
接口请求返回数据统一为:response