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
网友评论