命名

頁面目錄 文件夾命名格式駱駝式命名法,例如：用戶列表 userList
例如：商品模塊
product 商品
├─ product 商品管理
├─productList 商品管理目錄
├- index.vue 首頁
├─ components 組建
├─ tableFrom.vue
├─ tableList.vue
├─ handle 操作功能頁面目錄
├─ delete.vue
├─productCategory 商品分類目錄
├─ index.vue 商品分類首頁

頁面命名、組建、文件夾 命名格式小駝峰命名法,例如：用戶列表 userList

類名函數命名 大駝峰式 例如：addUser
變量命名 小駝峰式 例如：user 或者 userInfo _userinfo user-info
常量 采用全大些下劃線命名 例如：VUE_APP_API_URl

文件管理規范

pages 頁面模塊必須建文件夾區分；
api 接口一個模塊一個文件；
components 一個組建一個文件夾；
plugins 插件一個插件一個文件夾；
vuex 路由狀態管理，一個模塊在modules 中建一個文件；
router 一個模塊一個模塊在modules 中建一個文件；
style 樣式盡量采用iView自帶組建，common.less 系統通用樣式不要輕易動；
style中style.css自定義全局樣式；
utils 自定義工具js 獨立命名，一般不用新建文件夾；

模塊命名

├─ account 有關登錄頁 ├─ app 應用（小程序模板消息、公眾號） ├─ cms 文章管理 ├─ finance 財務管理 ├─ index 主頁 ├─ marketing 優惠券、積分 ├─ notify 短信賬戶、短信購買、短信模板 ├─ order 系統訂單管理 ├─ product 商品管理 ├─ setting 系統設置、運費模板、可視化等 ├─ system 開發配置、安全維護等 └─ user 用戶管理

頁面說明

主要目錄結構及說明：

├── public # 靜態資源 │ ├── favicon.ico # favicon圖標 │ └── index.html # html 模板 ├── src # 源代碼 │ ├── api # 所有請求 │ │ └──account.js # 有關登錄的接口 │ │ └──agent.js # 有關分銷的接口 │ │ └──app.js # 有關應用（小程序、公眾號）的接口 │ │ └──cms.js # 有關內容（文章管理、分類）的接口 │ │ └──common.js # 表格刪除、獲取消息提醒的接口 │ │ └──finance.js # 有關財務的接口 │ │ └──index.js # 有關首頁的接口 │ │ └──marketing.js # 有關營銷的接口 │ │ └──order.js # 有關訂單的接口 │ │ └──product.js # 有關商品的接口 │ │ └──setting.js # 有關設置的接口 │ │ └──system.js # 有關維護（開發配置、安全維護）的接口 │ │ └──systemAdmin.js # 有關管理員的接口（設置--管理權限--管理員列表） │ │ └──systemMenus.js # 有關權限規則的接口（設置--管理權限--權限規則） │ │ └──uploadPictures.js # 有關上傳圖片附件的接口 │ │ └──user.js # 有關會員的接口 │ ├── assets # 圖片、svg 等靜態資源 │ ├── components # 公共組件 │ │ └──cards # 統計 │ │ └──copyright # 頁面footer的底部聲明 │ │ └──customerInfo # 選擇用戶 │ │ └──echarts # 統計圖 │ │ └──freightTemplate # 運費模板 │ │ └──from # 生成表單 │ │ └──goodsList # 商品列表 │ │ └──iconFrom # 導航添加圖標 │ │ └──link # a連接 │ │ └──mde # 多文本框 │ │ └──modelSure # 確認模態框 │ │ └──newsCategory # 圖文管理頁 │ │ └──publicSearchFrom # 頭部搜索（沒用到） │ │ └──quill # 編輯器（沒用到） │ │ └──referrerInfo # 推薦人信息 │ │ └──searchFrom # 訂單頁的搜索 │ │ └──sendCoupons # 發送優惠券 │ │ └──systemStore # 添加提貨點 │ │ └──ueditorFrom # 編輯器組件（供參考，沒用到，主要用安裝組件--vue-ueditor-wrap） │ │ └──uploadPictures # 上傳圖片 │ │ └──uploadVideo # 上傳視頻（用于商品編輯器里面） │ ├── i18n # 多語言 │ ├── layouts # 布局 │ │ └──header-breadcrumb # 頭部面包屑樣式 │ │ └──header-collapse # 頭部控制折疊面板的圖標 │ │ └──header-fullscreen # 頭部控制是否全屏的圖標 │ │ └──header-i18n # 頭部控制多語言 │ │ └──header-log # 頭部控制日志異常圖標 │ │ └──header-logo # 頭部logo │ │ └──header-notice # 頭部提示消息 │ │ └──header-reload # 頭部控制刷新的圖標 │ │ └──header-search # 頭部搜索 │ │ └──header-setting # 設置頁面風格 │ │ └──header-user # 我的（個人中心、退出登錄） │ │ └──menu-head # │ │ └──menu-side # 側邊導航欄 │ │ └──tabs # 頭部的橫向導航標簽 │ │ └──mixins # 用于橫向滾動獲取title的一個js │ ├── libs # 公共方法 │ ├── menu # 菜單配置 │ ├── mixins # 通用混合 │ ├── mock # 數據模擬 │ ├── pages # 所有頁面 │ │ └──account # 有關登錄頁 │ │ └──login # 登錄 │ │ └──register # 注冊 │ │ └──agent # 分銷 │ │ └──agentManage # 分銷員管理 │ │ └──app # 應用 │ │ └──routine # 小程序模板消息 │ │ └──wechat # 公眾號 │ │ └──menus # 微信菜單 │ │ └──newsCategory # 圖文管理 │ │ └──save # 圖文添加 │ │ └──reply # 自動回復 │ │ └──follow # 微信關注回復/無效關鍵詞回復 │ │ └──keyword # 關鍵字回復 │ │ └──user # 用戶 │ │ └──tag # 用戶標簽 │ │ └──user # 微信用戶 │ │ └──message # 用戶行為記錄 │ │ └──cms # 內容 │ │ └──addArticle # 添加文章/編輯文章 │ │ └──article # 文章管理 │ │ └──articleCategory # 文章分類 │ │ └──finance # 財務 │ │ └──commission # 傭金記錄 │ │ └──financialRecords # 財務記錄 │ │ └──bill # 資金記錄 │ │ └──recharge # 充值記錄 │ │ └──userExtract # 提現申請 │ │ └──index # 主頁 │ │ └──marketing # 營銷 │ │ └──storeBargain # 砍價商品 │ │ └──storeCombination # 拼團管理 │ │ └──combinaList # 拼團列表 │ │ └──create # 添加拼團商品 │ │ └──index # 拼團商品 │ │ └──storeCoupon # 優惠券制作 │ │ └──storeCouponIssue # 優惠券列表 │ │ └──storeCouponUser # 會員領取記錄 │ │ └──storeSeckill # 秒殺管理 │ │ └──index # 秒殺商品 │ │ └──create # 添加秒殺商品 │ │ └──userPoint # 積分日志 │ │ └──notify # 短信設置 │ │ └──smsConfig # 短信賬戶 │ │ └──smsPay # 短信購買 │ │ └──smsTemplateApply # 短信模板 │ │ └──order # 訂單管理 │ │ └──product # 商品 │ │ └──productAdd # 添加商品 │ │ └──productAttr # 商品規格 │ │ └──productClassify # 商品分類 │ │ └──productList # 商品管理 │ │ └──productReply # 商品評論管理 │ │ └──setting # 設置 │ │ └──cityDada # 城市數據 │ │ └──clerkList # 核銷員管理 │ │ └──freight # 物流公司 │ │ └──setSystem # 系統設置 │ │ └──shippingTemplates # 運費模板 │ │ └──storeList # 提貨點列表 │ │ └──storeService # 客服管理 │ │ └──systemAdmin # 管理員列表 │ │ └──systemMenus # 權限規則 │ │ └──systemRole # 身份管理 │ │ └──systemStore # 門店設置 │ │ └──user # 個人中心 │ │ └──verifyOrder # 核銷訂單 │ │ └──system # 維護 │ │ └──auth # 商業授權 │ │ └──clear # 刷新緩存 │ │ └──configTab # 配置 │ │ └──index # 配置分類 │ │ └──list # 配置列表 │ │ └──error # 錯誤頁 │ │ └──403 # 403 │ │ └──404 # 404 │ │ └──500 # 500 │ │ └──group # 組合數據 │ │ └──maintain │ │ └──systemCleardata # 清除數據 │ │ └──systemDatabackup # 數據備份 │ │ └──systemFile # 文件校驗 │ │ └──opendir # 文件管理 │ │ └──systemLog # 系統日志 │ │ └──user # 會員 │ │ └──group # 會員分組 │ │ └──label # 會員標簽 │ │ └──level # 會員等級 │ │ └──list # 會員管理 │ ├── plugins # 插件 │ ├── router # 路由配置 │ │ └──modules # 頁面路由模塊 │ │ └──agent.js # 有關分銷 │ │ └──app.js # 有關應用（小程序、公眾號） │ │ └──cms.js # 有關內容（文章管理、文章分類） │ │ └──echarts.js # 有關統計 │ │ └──finance.js # 有關財務 │ │ └──index.js # 有關主頁 │ │ └──marketing.js # 有關營銷 │ │ └──order.js # 有關訂單 │ │ └──product.js # 有關商品 │ │ └──setting.js # 有關設置 │ │ └──system.js # 有關維護 │ │ └──user.js # 有關會員 │ │ └──index.js # 路由的導出以及攔截處理 │ │ └──routes.js # 路由的匯總 │ ├── store # Vuex 狀態管理 │ ├── utils # js工具 │ │ └──authLapse.js # 授權提示框 │ │ └──modalForm.js # 表單模態框 │ │ └──videoCloud.js # 上傳云儲存視頻（七牛、騰訊、阿里） │ │ └──validate.js # 將時間戳轉化成時間； │ │ └──public.js # 詢問模態框； │ ├── styles # 樣式管理 │ ├── setting.env.js # 開發配置文件 │ ├── setting.js # 業務配置文件 │ ├── main.js # 入口文件 加載組件 初始化等 │ └── App.vue # 入口頁面 ├── tests # 測試管理 ├── alias.config.js # 別名，僅用于配置 WebStorm 識別別名，無實際用處 ├── babel.config.js # babel 配置 ├── jest.config.js # jest 配置 ├── package.json # package.json └── vue.config.js # Vue CLI 3 配置

調試

npm run serve

打包

npm run build

配置說明 src/setting.js

VUE_APP_API_URL#接口地址,例如 http://www.abc.com/api VUE_APP_WS_URL #長連接服務地址,例如 ws://www.abc.com:20003

放置目錄

請把打包好的頁面文件上傳到public/admin目錄中
請把打包好的頁面文件上傳到public/admin目錄中

頁面路徑文檔

頁面	頁面地址	路徑	帶參路徑例子	參數解釋
主頁	@/pages/index/index	/admin/home
登錄	@/pages/account/login	/admin/login
微信菜單	@/pages/app/wechat/menus/index	/admin/app/wechat/setting/menus/index
圖文管理	@/pages/app/wechat/newsCategory/index	/admin/app/wechat/news_category/index
圖文添加	@/pages/app/wechat/newsCategory/save	/admin/app/wechat/news_category/save/:id?	/admin/app/wechat/news_category/save/0	id：0添加；非0編輯（圖文id）
微信關注回復	@/pages/app/wechat/reply/follow	/admin/app/wechat/reply/follow/subscribe
關鍵字回復	@/pages/app/wechat/reply/keyword	/admin/app/wechat/reply/keyword
關鍵字添加	@/pages/app/wechat/reply/follow	/admin/app/wechat/reply/keyword/save/:id?	/admin/app/wechat/reply/keyword/save/0	id：0添加；非0編輯（關鍵字id）
無效關鍵詞回復	@/pages/app/wechat/reply/follow	/admin/app/wechat/reply/index/default
微信用戶	@/pages/app/wechat/user/user	/admin/app/wechat/wechat_user/user/index
用戶標簽	@/pages/app/wechat/user/tag	/admin/app/wechat/wechat_user/user/tag
用戶分組	@/pages/app/wechat/user/tag	/admin/app/wechat/wechat_user/user/group
用戶行為記錄	@/pages/app/wechat/user/message	/admin/app/wechat/wechat_user/user/message
微信模板消息	@/pages/app/routine/routineTemplate/index	/admin/app/wechat/setting/template/index
小程序模板消息	@/pages/app/routine/routineTemplate/index	/admin/app/routine/routine_template/index
文章管理	@/pages/cms/article/index	/admin/cms/article/index
文章分類	@/pages/cms/articleCategory/index	/admin/cms/article_category/index
文章添加	@/pages/cms/addArticle/index	/admin/cms/article/add_article/:id?	/admin/cms/article/add_article/2	id：沒有id為添加；有id為編輯（文章id）
充值記錄	@/pages/finance/financialRecords/recharge	/admin/finance/user_recharge/index
資金記錄	@/pages/finance/financialRecords/bill	/admin/finance/finance/bill
優惠券制作	@/pages/marketing/storeCoupon/index	/admin/marketing/store_coupon/index
優惠券列表	@/pages/marketing/storeCouponIssue/index	/admin/marketing/store_coupon_issue/index
會員領取記錄	@/pages/marketing/storeCouponUser/index	/admin/marketing/store_coupon_user/index
積分日志	@/pages/marketing/userPoint/index	/admin/marketing/user_point/index
短信賬戶	@/pages/notify/smsConfig/index	/admin/setting/sms/sms_config/index
短信模板	@/pages/notify/smsTemplateApply/index	/admin/setting/sms/sms_template_apply/index
短信購買	@/pages/notify/smsPay/index	/admin/setting/sms/sms_pay/index
公共短信模板	@/pages/notify/smsTemplateApply/index	/admin/setting/sms/sms_template_apply/commons
訂單管理	@/pages/order/orderList/index	/admin/order/list
收銀訂單	@/pages/order/offline/index	/admin/order/offline
發票管理	@/pages/order/invoice/index	/admin/order/invoice/list
商品管理	@/pages/product/productList	/admin/product/product_list
商品分類	@/pages/product/productClassify	/admin/product/product_classify
商品添加	@/pages/product/productAdd	/admin/product/add_product/:id?	/admin/product/add_product/84	id：沒有id為添加；有id為編輯（商品id）
商品評論	@/pages/product/productReply	/admin/product/product_reply/:id?	/admin/product/product_reply/84	id：沒有id為商品評論頁；有id為查看評論（商品id）
屬性規則	@/pages/product/productAttr	/admin/product/product_attr
城市數據	@/pages/setting/cityDada/index	/admin/setting/freight/city/list
配送員列表	@/pages/setting/deliveryService/index	/admin/setting/delivery_service/index
頁面設計	@/pages/setting/devise/index	/admin/setting/pages/diy
頁面設計列表	@/pages/setting/devise/list	/admin/setting/pages/devise
頁面鏈接	@/pages/setting/devise/links	/admin/setting/pages/links
物流公司	@/pages/setting/freight/index	/admin/setting/freight/express/index
積分配置	@/pages/setting/setSystem/index	/admin/marketing/integral/system_config/3/11
運費模板	@/pages/setting/shippingTemplates/index	/admin/setting/freight/shipping_templates/list
管理員管理	@/pages/setting/systemAdmin/index	/admin/setting/system_admin/index
權限規則	@/pages/setting/systemMenus/index	/admin/setting/system_menus/index
身份管理	@/pages/setting/systemRole/index	/admin/setting/system_role/index
個人中心	@/pages/setting/user/index	/admin/system/user
核銷訂單	@/pages/setting/verifyOrder/index	/admin/setting/merchant/system_verify_order/index
刷新緩存	@/pages/system/clear/index	/admin/system/maintain/clear/index
配置分類	@/pages/system/configTab/index	/admin/system/config/system_config_tab/index
配置列表	@/pages/system/configTab/list	/admin/system/config/system_config_tab/list/:id?	/admin/system/config/system_config_tab/list/22	id:配置id
403	@/pages/system/error/403	/admin/403
500	@/pages/system/error/500	/admin/500
404	@/pages/system/error/404	/admin/*
系統日志	@/pages/system/maintain/systemLog/index	/admin/system/maintain/system_log/index
文件校驗	@/pages/system/maintain/systemFile/index	/admin/system/maintain/system_file/index
清除數據	@/pages/system/maintain/systemCleardata/index	/admin/system/maintain/system_cleardata/index
數據備份	@/pages/system/maintain/systemDatabackup/index	/admin/system/maintain/system_databackup/index
文件管理	@/pages/system/maintain/systemFile/opendir	/admin/system/maintain/system_file/opendir
在線更新	@/pages/system/systemUpgradeclient/index	/admin/system/system_upgradeclient/index
數據配置	@/pages/system/group/list	/admin/system/system_group_data
會員分組	@/pages/user/group/index	/admin/user/group
會員標簽	@/pages/user/label/index	/admin/user/label
會員管理	@/pages/user/list/index	/admin/user/list
上傳圖片	@/components/uploadPictures/widgetImg	/admin/widget.images/index.html
上傳圖標	@/components/iconFrom/index	/admin/widget.widgets/icon.html
選擇商品	@/components/goodsList/index	/admin/store.StoreProduct/index.html
選擇用戶	@/components/customerInfo/index	/admin/system.User/list.html
上傳視頻	@/components/uploadVideo/index	/admin/widget.video/index.html

前端添加頁面

一、新路由模塊添加：1、在src/router/modules里面路由模塊js文件；例如：import BasicLayout from '@/components/main'const pre = 'order_'export default {path: '/admin/order',name: 'order',header: 'order',redirect: {name: `${pre}list`},component: BasicLayout,children: [{path: 'list',name: `${pre}list`,meta: {auth: ['admin-order-storeOrder-index'],title: '訂單管理'},component: () => import('@/pages/order/orderList/index')}]}2、在src/router/routers.js里面引用以及導出；例如：import order from './modules/order'const frameIn = [order]// 導出需要顯示菜單的export const frameInRoutes = frameIn// 重新組織后導出export default [...frameIn]二、添加動態菜單：1、設置 > 管理權限 > 權限規則 2、側邊導航設置項： path：完整的頁面路徑title：菜單標題icon：（選填）菜單圖標，該選項僅支持 iView 內置 icon

vuex使用

本項目在src/store/module文件下建立你所要儲存數據的js模塊；例如（user.js）：export default {namespaced: true,state: {pageName: ''},mutations: {setPageName(state,id){state.pageName = id}},actions: {}} 在src/store/index.js文件引用；例如：import Vue from 'vue'import Vuex from 'vuex'import VuexPersistence from 'vuex-persist'import user from './module/user'Vue.use(Vuex)export default new Vuex.Store({state: {},mutations: {},actions: {},//這塊代碼為持久化儲存，需要安裝插件VuexPersistenceplugins:[new VuexPersistence({reducer: state => ({user: state.user, //這個就是存入localStorage的值}),storage: window.localStorage}).plugin],modules: {user}}) 在其他頁面：傳值：this.$store.commit('userInfo/setPageName', row.template_name); 引用：this.$store.state.userInfo.pageName;注：vuex有多種傳值以及調用方法；具體的可以參考vuex的官方文檔；

Cookies儲存封裝函數

目錄：src/libs/util.js； 例如：import { getCookies, setCookies，removeCookies } from '@/libs/util' 儲存數據：setCookies('token','kfhskd') 獲取數據：getCookies('token') 移除數據：removeCookies('token')

可視化使用

可視化頁面目錄：src/pages/setting/devise/index.vue; 頁面分3個模塊：移動端首頁、首頁的可視化編輯、項目鏈接；1、移動端首頁：使用iframe引用前臺頁面；例如：<iframe class="iframe-box" :src="iframeUrl" frameborder="0" ref="iframe"></iframe>2、可視化編輯：src/components/rightConfig/index.vue頁面為主要操作的容器；所有小組件使用動態添加的方法引用到此頁面；例如：<template><div class="right-box" v-if="rCom.length"><div class="title-bar">模塊配置</div><div class="mobile-config" v-if="rCom.length"><div v-for="(item,key) in rCom" :key="key">//此標簽為動態添加組件<component :is="item.components.name" :name="item.configNme" :configData="configData"></component></div><div style="text-align: center;" v-if="rCom.length"><Button type="primary" style="width:100%;margin:0 auto;height: 40px" @click="saveConfig">保存</Button></div></div></div></template>小組件目錄：src/components/diyComponents/放置你要編輯產品的具體操作功能；例如（c_is_show.vue）：<template><div class="c_row-item"><Col class="label" span="4">是否顯示</Col><Col span="19"><i-switch v-model="datas[name].val"/></Col></div></template>小組件初始化數據datas在vuex里面儲存，查找src/store/module/moren.js

總結

以上是生活随笔為你收集整理的CRMEB后台前端文档说明的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。