vue官方風(fēng)格指南
ESLint官方網(wǎng)站
vue 2.x 常規(guī)項(xiàng)目目錄
|— build 構(gòu)建腳本目錄
|— build.js 生產(chǎn)環(huán)境構(gòu)建（編譯打包）腳本
|— check-versions.js 版本驗(yàn)證工具
|— utils.js 構(gòu)建相關(guān)工具方法
|— vue-loader.conf.js 處理vue中的樣式
|— webpack.base.conf.js webpack基礎(chǔ)配置
|— webpack.dev.conf.js webpack開(kāi)發(fā)環(huán)境配置
|— webapck.prod.conf.js webpack生產(chǎn)環(huán)境配置
|— config 項(xiàng)目配置
|— dev.env.js 開(kāi)發(fā)環(huán)境變量
|— index.js 主配置文件
|— prod.env.js 生產(chǎn)環(huán)境變量
|— test.env.js 測(cè)試環(huán)境變量
|— node_modules 依賴模塊
|— mock mock數(shù)據(jù)目錄，用于本地?cái)?shù)據(jù)模擬
|— src 源碼目錄
|— assets 資源目錄连舍，資源會(huì)被webpack構(gòu)建
|— js 公共js文件目錄
|— css 公共樣式文件目錄
|— images 圖片存放目錄
|— components 公共組件目錄
|— api 接口模塊
|— utils 工具文件夾
App.vue 根組件
main.js 入口js文件
|— routers 前端路由目錄
index.js
|— views/pages 前端頁(yè)面文件
|— store 應(yīng)用級(jí)數(shù)據(jù)管理
|— index.js/store.js 組裝模塊并導(dǎo)出，統(tǒng)一管理導(dǎo)出
|— state.js 單一狀態(tài)樹(shù)，定義應(yīng)用數(shù)據(jù)結(jié)構(gòu)及初始化狀態(tài)
|— getters.js 獲取state中的狀態(tài)望众，僅單向獲取數(shù)據(jù)，不做任何修改
|— actions.js 調(diào)用mutation方法對(duì)數(shù)據(jù)進(jìn)行操作
|— types.js 存放vuex常用的變量
|— mutations.js 定義state數(shù)據(jù)的修改操作
|— static 純靜態(tài)資源伞辛，不會(huì)被webpack構(gòu)建
|— test 測(cè)試
|— unit 單元測(cè)試
|— e2e e2e測(cè)試
.babelrc babel的配置文件
.editorconfig 編輯器的配置文件
.gitignore git的忽略配置文件
.postcssrc.js postcss的配置文件
index.html html模板烂翰，入口頁(yè)面
package.json npm包配置文件，依賴包信息
vue.config.js vue配置文件
README.md 項(xiàng)目介紹
規(guī)范
項(xiàng)目命名
- 采用小寫(xiě)方式蚤氏，短橫線分隔甘耿，eg：
project-name
文件夾命名
- 采用小寫(xiě)方式，若為復(fù)數(shù)形式竿滨，則加s佳恬。 eg：
imgs、styles
變量命名于游、函數(shù)命名
- 使用es6風(fēng)格編碼,eg：定義變量用
let,定義常量用const, 箭頭函數(shù)等 - 小駝峰式命名法毁葱，變量eg:
myName,方法eg:getList - 請(qǐng)求接口數(shù)據(jù)方法，可以用Data結(jié)尾贰剥，eg:
getFormData倾剿、getListData - 盡量在每個(gè)方法前都添加注釋
組件命名
- 單文件組件書(shū)寫(xiě)順序?yàn)?code>template,
script,style - 大駝峰式命名法，2-3個(gè)單詞組合蚌成，根組件App(與之區(qū)分)前痘。eg：
TodoList、TodoItem担忧。使用時(shí)為<todo-list></todo-list> - 組件內(nèi)部文件夾包含：子組件文件夾childs芹缔、樣式文件style、靜態(tài)資源文件resources瓶盛。目錄結(jié)構(gòu)：
|-- demo 文件夾
|-- resources
|-- childs
|-- style
|-- Demo.vue
props 命名
命名使用小駝峰式命名法最欠，使用時(shí)用-連接
樣式類(lèi)命名
- 采用小寫(xiě)方式，短橫線分隔惩猫，eg:
xxx-xxx芝硬，和變量進(jìn)行區(qū)分 - 單個(gè)組件樣式寫(xiě)在
scoped -
scoped中，盡量使用類(lèi)選擇器帆锋，少使用元素選擇器 - 盡量避免使用中文拼音吵取，用語(yǔ)義話英文單詞組合，做到見(jiàn)字知意
- 字體粗細(xì)規(guī)定統(tǒng)一值锯厢，eg:normal/bold/bolder分別設(shè)置成400皮官、600脯倒、800
注釋
單行： //
多行： /** */
template style注釋
對(duì)每個(gè)功能區(qū)做注釋
圖片命名
- 列表圖片，可按照列表索引命名
- 圖標(biāo)圖片捺氢，用
項(xiàng)目名縮寫(xiě)-icon-
指令統(tǒng)一
規(guī)則：要么統(tǒng)一縮寫(xiě)藻丢，要么不統(tǒng)一。
縮寫(xiě)(:表示v-binid摄乒，@表示v-on)：
<input v-bind:value="123" v-on:blur="handleInput" >
不縮寫(xiě)
<input :value="123" @blur="handleInput">
路由
路由對(duì)象至少需要三部分：path悠反、name、component
path: 使用大駝峰式命名法
// 統(tǒng)一使用AMD規(guī)范的require或者es6的import 引入路由文件
{
path: "/RoutePath",
component: ()=> import("")
// component: ()=> require("")
name: "路由名稱"
}
vuex
- mutations數(shù)據(jù)同步處理
- actions數(shù)據(jù)異步處理
- 組件提交同步處理數(shù)據(jù)
this.$store.commit("xxx",xxx) - 組件異步處理數(shù)據(jù)
this.$store.dispatch("xxx",xxx)
框架選擇
pc: Element UI馍佑、iView
移動(dòng)端：mint-ui斋否、vant
css 預(yù)處理器
Less、Sass拭荤、Stylus
建議時(shí)用less,輕量茵臭，滿足大部分場(chǎng)景。
web字體
可使用Font Awesome舅世、 Iconfont代替圖片
其他
- 不同瀏覽器樣式標(biāo)準(zhǔn)不用旦委，造成瀏覽器樣式差異，有些第三方ui也會(huì)對(duì)默認(rèn)樣式進(jìn)行修改雏亚，要進(jìn)行reset.css的引入缨硝。
- 函數(shù)全局問(wèn)題： 可使用
that = this,解決this指向問(wèn)題。 -
v-for要設(shè)置key值罢低，避免與v-if連用查辩，可使用v-show。 - 特殊狀態(tài)下奕短，可以設(shè)置
ref,用this.$refs.xxx宜肉，操作dom匀钧。 - 樣式值為0時(shí)翎碑，省略單位；為
0.開(kāi)頭小數(shù)時(shí)之斯，可省略0日杈。eg
padding: 0px;
opacity: 0.5;
// 可改為
padding: 0;
opacity: .5;
- 對(duì)于一組固定的圖片或圖標(biāo)，可以適當(dāng)?shù)母鶕?jù)情況使用雪碧圖
- 接口請(qǐng)求返回?cái)?shù)據(jù)統(tǒng)一為:response
