初始化運(yùn)行工程
npm install
npm run serve
npm 請(qǐng)使用淘寶鏡像:
npm config set registry https://registry.npm.taobao.org
全局安裝vue cli 3.0
npm install -g @vue/cli
啟動(dòng)vue cli 界面
運(yùn)行:vue ui
進(jìn)入Vue 項(xiàng)目管理器 導(dǎo)入當(dāng)前項(xiàng)目
選擇任務(wù)->serve 運(yùn)行
工程默認(rèn)已經(jīng)啟用保存自動(dòng)格式化和修正代碼規(guī)范,如果需求全局檢查
運(yùn)行: npm run lint
或進(jìn)入 vue ui 界面 : 任務(wù)->lint
請(qǐng)不要隨意改變以下文件內(nèi)容:
vue.config.js
babel.config.js
可以動(dòng)的配置項(xiàng)為: vue.config.js 下的 devServer
本地代理配置在vue.config.js文件中:
devServer: {
proxy: {
'/api': {
target: 'https://XXXX.com/',
pathRewrite: {
'^/api': ''
},
changeOrigin: true,
secure: false
}
}
}
本地調(diào)試修改代理地址隨意,但不要提交個(gè)人調(diào)試的內(nèi)容到svn或git
工程結(jié)構(gòu)
dist //編譯后的目錄
public //公共目錄,編譯后會(huì)直接拷貝該目錄下內(nèi)容到編譯目標(biāo)文件
src // 代碼目錄
|--api // 接口目錄,所有接口內(nèi)容在這里定義
| |--_mock //模擬接口目錄,只在開(kāi)發(fā)模式下生效和參與編譯
|
|--assets //素材目錄,存放圖片,字體等素材目錄
|--components // 公共組件目錄
|--router //頁(yè)面路由定義目錄
|--store //頁(yè)面狀態(tài)機(jī)
|--styles // 全局樣式主題定義目前
|--utils //工具方法定義
|--views //視圖文件夾,頁(yè)面請(qǐng)寫在這里
| |--_doc //項(xiàng)目文檔,無(wú)須關(guān)注,只在開(kāi)發(fā)模式下生效和參與編譯
| |--layout //頁(yè)面布局文件夾,里面定義了菜單了主視圖布局定義
| |--user //公共用戶模塊,登錄,修改密碼用戶信息等
1. vue.config.js
工程配置文件,一般情況下,只允許修改代理地址信息,如需深入了解請(qǐng)?jiān)L問(wèn):https://cli.vuejs.org/zh/config/
修改常用項(xiàng)內(nèi)容請(qǐng)通過(guò)使用vue ui上直接修改配置
2. package.json
第三方代碼包的安裝請(qǐng)分清楚是開(kāi)發(fā)依賴包(devDependencies),還是運(yùn)行時(shí)依賴包(dependencies),不要隨意保存安裝內(nèi)容,或者通過(guò)vue ui上安裝相關(guān)依賴
功能開(kāi)發(fā)
以一級(jí)菜單為主功能塊劃分,每個(gè)菜單一個(gè)文件夾,每個(gè)葉子菜單路由對(duì)應(yīng)一個(gè)菜單文件夾下的index.vue
開(kāi)發(fā) 系統(tǒng)設(shè)置->菜單管理:
1.定義的文件夾和文件有:
views/system_setting
views/system_setting/menu_mgr
views/system_setting/menu_mgr/index.vue
api/system_setting.js
2.定義相關(guān)路由
router/asyncRouter.js
{
path: '/system_setting',
component: Layout,
meta: { title: '系統(tǒng)設(shè)置', icon: 'news' },
children: [
{
path: 'menu_mgr',
component: () => import('@/views/system_setting/menu_mgr/index'),
meta: { title: '菜單管理',authCode:'system_setting.menu_mgr' }
}
]
}
路由路徑為文件夾路徑
authCode:授權(quán)碼,需要唯一,用于權(quán)限管理,可不填寫,默認(rèn)自動(dòng)為菜單路徑(/改.)
編碼規(guī)范
文件夾: 使用全部小寫,單詞間用下劃線分開(kāi),system_setting
JS文件: 駝峰命名, systemSetting.js
VUE組件: 首字母大寫, PageTable.vue
樣式定義: 中劃線隔開(kāi), item-wapper
變量定義: 駝峰命名
宏定義: 大寫 下劃線隔開(kāi) MAX_COUNT
資源命名: 下劃線命名, login_bg.png
開(kāi)發(fā)下的文件或文件夾請(qǐng)以'_'開(kāi)頭 (不參與生產(chǎn)編譯)
api下的接口定義: 函數(shù)名 = 動(dòng)詞+對(duì)象
基礎(chǔ)的增刪改查 統(tǒng)一命名為:
GET方法:
get對(duì)象Info(query)
get對(duì)象PageList(query)
get對(duì)象List(query)
POST方法:
create對(duì)象(params)
update對(duì)象(params)
delete對(duì)象(id)
例如:
import request from '@/utils/request'
export function getMenuTree () {
return request.get('/mock/menu/tree')
}
export function getMenuList (query) {
return request.get('/mock/menu/tree', {params:query})
}
export function createMenu (params) {
return request.post('/mock/menu/create', params)
}
export function updateMenu (params) {
return request.post('/mock/menu/update', params)
}
export function deleteMenu (id) {
return request.post('/mock/menu/delete', {id})
}
全局應(yīng)用級(jí)別的狀態(tài)定義在 /store/modules/app.js 下
各個(gè)業(yè)務(wù)模塊定義各自的modules,不要模塊間穿插使用,
相關(guān)文檔:https://vuex.vuejs.org/zh/guide/
整個(gè)項(xiàng)目的異步請(qǐng)求方式寫法采用ES7 的 async-await
async created () {
this.menuTree = await getMenuTree()
}
async save () {
try{
await createMenu(this.params)
}catch(err){
console.log(err) //請(qǐng)求異常捕獲的err內(nèi)容的接口返回內(nèi)容
}
}
合理的使用ES6的特征函數(shù),和函數(shù)編程處理復(fù)雜業(yè)務(wù)和邏輯,使得代碼清晰不冗長(zhǎng),比例數(shù)組的forEach,map,filter,find,some 等
ES6相關(guān)文檔:http://es6.ruanyifeng.com/
通用組件以文件夾的形式定義在components下,index.vue為組件入口
作為通用組件請(qǐng)判斷它是否是本項(xiàng)目中可能在多個(gè)業(yè)務(wù)塊的地方多次出現(xiàn)和復(fù)用,非這種情況的請(qǐng)直接定義在業(yè)務(wù)文件夾內(nèi).
組件的定義抽離出公共的props,對(duì)每個(gè)props都定義屬性的類型(type)和默認(rèn)值(default),組件需考慮結(jié)果輸出和結(jié)果導(dǎo)入2種情況
全局組件(使用度頻繁):
components/index.js 引入
局部組件(偶爾使用到):
具體功能塊代碼中引入
import XXX from '@/components/XXX'
組件定義相關(guān)文檔:https://cn.vuejs.org/v2/guide/components.html
1.內(nèi)部作用域
定義內(nèi)部作用域的樣式,務(wù)必添加scoped關(guān)鍵字,樣式使用scss預(yù)編譯語(yǔ)言
建議scss層級(jí)嵌套不要超過(guò)5級(jí)
<style lang="scss" scoped>
.class-a{
.class-b{
&.class-c{
}
}
>class-d{
}
}
2. 全局作用域
對(duì)應(yīng)需要改變子組件內(nèi)樣式的,需要使用全局樣式作用域才有效,此時(shí)務(wù)必定義組件最外層樣式名(建議用組件名+box命名):
例如:組件PageList.vue
<template>
<div class="page-list-box">
<el-table></el-table>
</div>
</templace>
<style lang="scss">
.page-list-box{
.el-table{
}
}
scss 語(yǔ)法相關(guān)文檔:https://www.sass.hk/docs/
</style>
內(nèi)容定義在util/filters.js和 util/direactive.js中,具體請(qǐng)直接進(jìn)這2個(gè)文件看目前已經(jīng)定義的相關(guān)過(guò)濾器和指令
相關(guān)指令文檔:https://cn.vuejs.org/v2/guide/custom-directive.html
相關(guān)過(guò)濾器文檔:https://cn.vuejs.org/v2/guide/filters.html
內(nèi)容定義在util/mixin.js中
其中主要定義了
closeTab(arg) 關(guān)閉TAB頁(yè) arg:非必填 回調(diào)參數(shù)
resetFields(formRef) 重置表單內(nèi)容和驗(yàn)證 formName 表單的引用ref名稱
operType: 針對(duì)頁(yè)面頁(yè)面增改查使用,為路由綁定參數(shù)
mixin 中定義的方法可在各個(gè)vue實(shí)例對(duì)象中使用
相關(guān)文檔:https://cn.vuejs.org/v2/guide/mixins.html
1.模版內(nèi)html 標(biāo)簽屬性排一行,開(kāi)頭和收尾標(biāo)簽對(duì)齊(有子標(biāo)簽)
2.vue 內(nèi)置指令和事件都采用縮寫寫法:@click,:href 等
相關(guān)模版語(yǔ)法文檔:https://cn.vuejs.org/v2/guide/syntax.html
<template>
<a :href="url"></a>
<table>
<tr @click="test">
<td>測(cè)試</td>
</tr>
</table>
</template>
工程內(nèi)的所有圖標(biāo)都使用element-ui自帶的字體圖片,外加iconfont 阿里巴巴矢量圖標(biāo)庫(kù)內(nèi)定義的項(xiàng)目圖標(biāo),需增加額外圖標(biāo)請(qǐng)告知加入項(xiàng)目圖標(biāo)庫(kù)
圖標(biāo)庫(kù)css 定義在public/index.html
頁(yè)面使用合理使用flex進(jìn)行布局,高效且容易實(shí)現(xiàn)多種布局結(jié)果
flex布局相關(guān)文檔:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
