1.項(xiàng)目目錄
├─README.md // 項(xiàng)目說(shuō)明
├─babel.config.js
├─vue.config.js // 配置文件
├─src
| ├─App.vue
| ├─main.js
| ├─permission.js // 權(quán)限配置
| ├─views // 業(yè)務(wù)views
| | ├─home
| | | └index.vue
| ├─utils // 工具庫(kù)
| | ├─axios.js
| | ├─config.js
| | ├─index.js
| ├─store // 存儲(chǔ)vuex
| | ├─getters.js
| | ├─index.js
| | ├─modules
| | | └user.js
| ├─router
| | ├─index.js // 路由總?cè)肟?| | ├─system
| | | └index.js
| ├─plugins // 插件模塊
| ├─filters // 全局過(guò)濾器
└index.js
| ├─layout // 基礎(chǔ)導(dǎo)航布局
| | ├─index.vue
| ├─constans // 常量模塊
| | ├─global.js // 全局常量
| ├─components // 組件模塊
| | ├─common // 公用組件，全局自動(dòng)注冊(cè)
| | ├─index.js
| |─styles // 樣式
| | ├─index.scss
| | ├─variables.scss
| | ├─views
| ├─assets // 靜態(tài)資源
| | ├─images
| | ├─fontIcon
| | ├─font
| ├─api // 接口模塊
| | ├─index.js
| | ├─system // 按業(yè)務(wù)區(qū)分接口
| | | └user.js
| | ├─service
| | ├─asset
| | | ├─indexUrl.js
| | | └message.js
├─public
| ├─favicon.ico
| └index.html
1.1 公共組件
- BasePagination：二次封裝分頁(yè)組件
- ImprotUpload：導(dǎo)入文檔組件，例如，詞根管理
- SearchTags：選擇指標(biāo)彈窗組件，例如指標(biāo)校驗(yàn)頁(yè)面
- SearchInput：列表查詢組件
- FnMenu:目錄樹(shù)創(chuàng)建。例如，我的看板頁(yè)面
- TreeH：添加組功能，例如，指標(biāo)預(yù)警頁(yè)面
2.開(kāi)發(fā)規(guī)范
業(yè)務(wù)層-views
- 根據(jù)業(yè)務(wù)模塊劃分
路由-router
- 路由中組件設(shè)置webpackChunkName,進(jìn)而實(shí)現(xiàn)按需加載
- 路由meta信息設(shè)置title和權(quán)限
{
path: '/noticeDetails',
component: () =>
import(
/* webpackChunkName: "noticeManage-details" */ '@/views/noticeManage/details'
),
name: 'NoticeDetails',
meta: {
title: '公告詳情',
hidden: true,
},
狀態(tài)管理-store
- modules劃分模塊，且設(shè)置命名空間
export default {
namespaced: true, // 用于在全局引用此文件里的方法時(shí)標(biāo)識(shí)這個(gè)文件名
state,
mutations,
actions,
}
組件-components
- 放入common文件下，就會(huì)自動(dòng)注冊(cè)全局組件（(引入 3次及以上的組件)）
// common.js
//獲取指定目錄下的指定格式的文件
let requireComps = require.context('./common', false, /\.vue$/)
//循環(huán)文件列表，全局注冊(cè)
requireComps.keys().forEach(fileName => {
const config = requireComps(fileName)
let compName = fileName.replace(/\.\//, '').replace(/\.vue$/, '')
Vue.component(compName, config.default || config)
})
過(guò)濾器-filter
- 可能作為公用過(guò)濾器的方法，建議放入，如，日期格式化
強(qiáng)制規(guī)范
1. 組件名為多個(gè)單詞
組件名應(yīng)該始終是多個(gè)單詞的，根組件 App 除外。
export default {
name: 'TodoList',
// ...
}
2.prop定義
prop 的定義應(yīng)該盡量詳細(xì)，至少需要指定其類型。
props: {
text:{
type:String,
default:'開(kāi)始'
}
}
3.避免 v-if 和 v-for 用在一起
為了過(guò)濾一個(gè)列表中的項(xiàng)目 (比如 v-for="user in data" v-if="data.isActive")。
在這種情形下，請(qǐng)將 users 替換為一個(gè)計(jì)算屬性 (比如 activeUsers)，讓其返回過(guò)濾后的列表。為了避免渲染本應(yīng)該被隱藏的列表 (比如v-for="user in users" v-if="shouldShowUsers")。
這種情形下，請(qǐng)將 v-if 移動(dòng)至容器父級(jí)元素上
<ul v-if="shouldShowUsers">
<li
v-for="user in users"
:key="user.id"
>
{{ user.name }}
</li>
</ul>
4. 類名 --- class
- 全局class 使用駝峰命名
- 局部 class '-'鏈接
- 頁(yè)面內(nèi)聯(lián)樣式使用'scoped'屬性
- 謹(jǐn)慎使用important屬性
// 局部樣式（頁(yè)面內(nèi)樣式）
<style lang="scss" scoped>
.logo-img {
vertical-align: -5px;
}
<style>
// 全局樣式
.menuBox {
color: $white;
margin-top: 8px;
cursor: pointer;
}
建議規(guī)范 --- 提高代碼可讀性
- 常量使用
場(chǎng)景：根據(jù)狀態(tài)值1，2，3 等處理不同的邏輯，建議使用語(yǔ)義化常量替換1，2，3狀態(tài)值
// 公告未發(fā)布
const Notice_IS_UNRELEASED = 0
// 公告已發(fā)布
const NOTICE_IS_RELEASED = 1
// 消息已讀
const MESSAGE_IS_RELEASED = 1
