前端后臺管理（預設用戶管理中心） Vue-web 端模板

安裝依賴環(huán)境

npm install

啟動開發(fā)

npm run serve

構建生產(chǎn)測試發(fā)布包

npm run build

檢查修復

npm run lint

編寫規(guī)范

• 不要出現(xiàn)拼音命名
• 開發(fā)過程中隨時添加注釋
• 盡量按照 ESLint 格式要求編寫代碼

普通變量命名規(guī)范

• 命名方法 ：駝峰命名法且與內(nèi)容相關

let mySchool = "我的學校"

class 類名

• 命名方法 : 全部小寫
• 命名規(guī)范 : 使用小寫字母和中劃線來組合命名，中劃線用以分割單詞。 例如：

<view class="menu-item"></view>

ID

• 命名方法 : 全部大寫
• 命名規(guī)范 : 使用大寫字母和下劃線來組合命名，下劃線用以分割單詞。 例如：

<view id="MENU_ITEM"></view>

組件命名

• 文件夾的命名統(tǒng)一首字母大寫 及駝峰命名規(guī)則

• 文件名統(tǒng)一使用index.vue

• 組件名應該始終是多個單詞的

• 有意義的名詞、簡短、具有可讀性

  例: OrgSelectDialog
      UserMenu

method 方法命名命名規(guī)范

• 駝峰式命名，統(tǒng)一使用動詞或者動詞+名詞形式
• 請求數(shù)據(jù)方法，以 data 結尾

   methods: {
     jumpPage(){},
     openCarInfoDialog(){},
     getListData(){},
     postFormData(){}
   }

盡量使用常用單詞開頭（set、get、go、can、has、is） 可以參考如下的動作：

1. has: 判斷是否含有某個值
2. is: 判斷是否為某個值
3. get: 獲取某個值
4. set: 設置某個值
5. update: 更新某個值
6. fetch: ajax 請求（一般用在 vuex 里的 actions）
7. on: 觸發(fā)事件（click/change 等 dom 事件或者emit派發(fā)事件）
8. render: 渲染頁面
9. handle: 執(zhí)行某一個事件（如果不清楚用什么動詞前綴，可以使用 handle）
10. 還有很多類似的動作，例如：add/delete/put/select/change/move/remove/to等

例外情況

• 作用域不大臨時變量可以簡寫，比如：str，num，bol，obj，fun，arr。
• 循環(huán)變量可以簡寫，比如：i，j，k 等，例：

for (let i = 0; i < arr.length; i ++){
  let obj = arr[i]
} 

多個特性的元素應該分多行撰寫，每個特性一行。(增強更易讀) 例：

<img
  src="https://"
  alt=""
>
<my-component
  a="a"
  d="b"
  c="c"
>
</my-component>

注釋規(guī)范

• 代碼注釋在一個項目的后期維護中、和二次開發(fā)時顯的尤為重要，所以我們要為每一個被復用的組件編寫組件使用說明，為組件中每一個方法編寫方法說明

源碼風格

• 使用 ES6 風格編碼
• 定義變量使用 let ,定義常量使用 const
• 靜態(tài)字符串一律使用單引號，動態(tài)字符串使用反引號
• 數(shù)組成員對變量賦值時，優(yōu)先使用解構賦值

const [num1, num2] = arr

• 函數(shù)的參數(shù)如果是對象的成員，優(yōu)先使用解構賦值

function getUserData({ age, name }) {}

• 箭頭函數(shù) 需要使用函數(shù)表達式的場合，盡量用箭頭函數(shù)代替。因為這樣更簡潔，而且綁定了 this

()=> {};

指令規(guī)范

• 指令有縮寫一律采用縮寫形式

:value=""
@click=""

• v-for 循環(huán)必須加上 key 屬性，在整個 for 循環(huán)中 key 需要唯一
• 避免 v-if 和 v-for 同時用在一個元素上（性能問題）, 可將數(shù)據(jù)替換為一個計算屬性，讓其返回過濾后的列表(先把你要循環(huán)的數(shù)據(jù)通過計算屬性進行處理)

項目快速上手

介紹

本項目模板是管理后臺系統(tǒng)1.0版本，持續(xù)優(yōu)化

• Element 已經(jīng)全局加載直接使用 例：

<template>
    <el-form-item>
        <el-input />
    </el-form-item>
</template>

• 全局組件自動注冊，可在任意頁面加載使用無需再次引入，詳見下文 components 全局公用組件

import Vue from 'vue'

const componentsContext = require.context('./global', true, /index.(vue|js)$/)
componentsContext.keys().forEach(file_name => {
    // 獲取文件中的 default 模塊
    const componentConfig = componentsContext(file_name).default
    if (/.vue$/.test(file_name)) {
        Vue.component(componentConfig.name, componentConfig)
    } else {
        Vue.prototype[`$${componentConfig.name}`] = componentConfig
    }
})

掛載全局 :

Vue.prototype.$api = api
Vue.prototype.$axios = axios
Vue.prototype.$echarts = echarts
Vue.prototype.$dayjs = dayjs
Vue.prototype.$hotkeys = hotkeys

依賴

• 此模板主要使用的包依賴：Axios，Vuex,Vue-Router，Element UI
• 線上依賴已經(jīng)安裝的有：

   "@tinymce/tinymce-vue": "^4.0.0",
    "axios": "^0.21.0",
    "core-js": "^3.6.5",
    "dayjs": "^1.9.7",
    "default-passive-events": "^2.0.0",
    "echarts": "^4.9.0",
    "element-ui": "^2.14.1",
    "file-saver": "^2.0.5",
    "hotkeys-js": "^3.8.1",
    "nprogress": "^0.2.0",
    "swiper": "^6.3.5",
    "tinymce": "^5.6.1",
    "vue": "^2.6.11",
    "vue-awesome-swiper": "^4.1.1",
    "vue-cookies": "^1.7.4",
    "vue-meta": "^2.4.0",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0",
    "xlsx": "^0.16.9"

• 開發(fā)依賴已經(jīng)安裝的有：

    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "^6.2.2",
    "node-sass": "^4.12.0",
    "prettier": "^1.19.1",
    "sass-loader": "^8.0.2",
    "sass-resources-loader": "^2.1.1",
    "svg-sprite-loader": "^5.1.1",
    "vue-template-compiler": "^2.6.11",
    "webpack-alioss-plugin": "^2.4.0",
    "webpack-spritesmith": "^1.1.0"

• 具體依賴詳見package.json文件可根據(jù)具體項目進行添加與刪除

npm install xxx
npm uninstall xxx

開發(fā)與生產(chǎn)環(huán)境

• 與后端的請求接口已經(jīng)分別放在了 .env.development 和 .env.production 中
• 不同項目 把上述文件中 VUE_APP_API_ROOT 的路徑替換即可

代碼校驗

• 在 .editorconfig 文件中已經(jīng)預設了一些代碼校驗風格 可根據(jù)不同場景自主修改

結構

• 項目初步結構已經(jīng)搭建 包含登錄頁 用戶管理 角色管理 組織機構管理 菜單管理等模塊

• 下面將詳細敘述項目結構

Axios 與 API

• 請求攔截，響應攔截 在 @/util/request.js 文件中
• 具體頁面的請求接口自行在 @/api 中新建js文件設置后在組件中引入使用即可，在新建文件中需先引入request.js文件
• 示例：

import { api } from '@/util/request'

export function listFlowTaskDone(data) {     // 已審批列表
    return api({
        url: '/wsb/flowtask/listFlowTaskHaveDone',
        method: 'GET',
        data
    })
}

util文件夾

• 這里放置你的組件需要用到的的一些信息 包括：城市信息area.js，郵編信息org.js，自定義指令preventRepeatClick，正則校驗validate.js，在你需要使用的組件中引入即可

views文件夾

• 這里就是你的頁面文件存放區(qū)域，遵守命名規(guī)則使用

store文件夾

• 存放全局公用狀態(tài)

router

注意 側邊欄導航，通過路由自動生成

• 登錄時會進行權限判斷攔截，篩選出登入用戶所擁有的權限菜單進行動態(tài)渲染
• 開發(fā)時如需體驗完整導航列表可在@/setting.js中 把 openPermission 設置為 true ：

openPermission: true

router 及 store 詳情可打開項目結構詳覽

layout 頁面釋放出口

• 登錄成功后 頁面釋放出口為layout中的 <RouterView />

<keep-alive>
    <RouterView />
</keep-alive>

即我們新建頁面要定義在layout Children中 示例：

新建@/router/modules/menu.management.js文件

import Layout from '@/layout'
export default {
    path: '/menu-management',
    component: Layout,
    name: 'menuList',
    redirect: '/menu-management/list',
    meta: {
        title: '菜單管理',
        icon: 'component'
    },
    children: [
        {
            path: 'list',
            name: '',
            component: () => import('@/views/menu_management/menuList'),
            meta: {
                title: '菜單列表',
                sidebar: false
            }
        }
    ]
}

且必須在router.index中注冊

例：在@/router/index 中 引入上述在@/router/modules/menu.management.js定義的內(nèi)容

import menuManagement from './modules/menu.management'

let asyncRoutes
if (store.state.global.showHeader) {
    asyncRoutes = [{
        meta: {
            title: '首頁',
            icon: 'layout'
        },
        name: 'HomepageManagement',
        children: [
        // 這里添加即可在路由中添加此路徑，根據(jù)權限動態(tài)匹配，匹配成功即可在側面菜單顯示
             menuManagement   
        ]
    }]
} else {
    asyncRoutes = []
}

components 全局公用組件

• 全局組件自動注冊
• 全局組件統(tǒng)一放在 ./global 目錄下，需要注意各個組件按文件夾區(qū)分，文件夾名稱與組件名無關聯(lián)
• 文件夾內(nèi)至少保留一個文件名為 index 的組件入口，例如 ShowBaseDictList.vue
• 普通組件必須設置 name 并保證其唯一，自動注冊會將組件的 name 設為組件名，可參考 SvgIcon 組件寫法 例：

定義: 
<script>
export default {
    name: 'SvgIcon',
    props: {
        name: {
            type: String,
            required: true
        }
    }
}
</script>

頁面中使用:
<template>
    <SvgIcon />
</template>

• 如需定義非公共組件 在components中新建符合命名規(guī)則單獨文件夾，在單頁面中引入使用

assets

• 項目用icon，字體，圖片，雪碧圖，公共樣式存放路徑
• @/assets/styles/resources/variables.scss 全局變量樣式文件請在頁面中引入使用

`