1、項目初始化
mkdir aimooc-book-admin-dev cd aimooc-book-admin-dev git clone https://github.com/PanJiaChen/vue-element-admin cd vue-element-admin cnpm i npm run dev
報錯：Cannot find module ‘core-js/modules/es6.regexp.constructor’
解決：cnpm i -D core-js@2
vue
2、項目精簡
- 刪除 src/views 下的源碼，保留：
- dashboard：首頁
- error-page：異常頁面
- login：登陸
- redirect：重定向
- 對 src/router/index 進行相應修改
- 刪除
/* Router Modules */下面的4條import - 刪除以下相關路由：
- documentation
- guide
- profile
- permission
- page
- directive
- role
- icon
- componentsRouter,chartsRouter,nestedRouter,tableRouter
- example
- create
- edit
- list
- tab
- error&children
- error-log
- excel
- export-excel
- export-selected-excel
- export-merge-header
- upload-excel
- zip
- download
- pdf
- index
- pdf/download
- theme
- index
- clipboard
- index
- external-link
- 只留404就對了
- 刪除
- 刪除 src/router/modules 文件夾
- 刪除 src/vendor 文件夾
- 從新運行項目
若是是線上項目，建議將 components 的內容也進行清理，以避免影響訪問速度，或者直接使用 vue-admin-template 構建項目，課程選擇 vue-element-admin 初始化項目，是由於 vue-element-admin 實現了登陸模塊，包括 token 校驗、網絡請求等，能夠簡化咱們的開發工做webpack
3、項目配置
經過 src/settings.js 進行全局配置：ios
- title：站點標題，進入某個頁面後，格式爲：頁面標題 - 站點標題
- 修改
settings.js：title: '小慕讀書', - 經過
findUsages找到調用settings.js的get-page-title.js，修改以下：
- 修改
const title = defaultSettings.title || '小慕讀書'
經過
findUsages找到調用get-page-title.js的permission.js 在的路由守衛beforeEach裏提取元信息設置頁面標題：document.title = getPageTitle(to.meta.title)`git
- showSettings：是否顯示右側懸浮配置按鈕
- tagsView：是否顯示頁面標籤功能條
- fixedHeader：是否將頭部佈局固定
- sidebarLogo：菜單欄中是否顯示LOGO
- errorLog：默認顯示錯誤日誌的環境
源碼調試
若是須要進行源碼調試，須要修改 vue.config.js：es6
config // https://webpack.js.org/configuration/devtool/#development .when(process.env.NODE_ENV === 'development', config => config.devtool('cheap-source-map') )
將 cheap-source-map 改成 source-map，若是但願提高構建速度能夠改成 evalgithub
一般建議開發時保持 eval 配置，以增長構建速度，當出現須要源碼調試排查問題時改成 source-mapweb
4、項目結構
- api：接口請求
- assets：靜態資源
- components：通用組件
- directive：自定義指令
- filters：自定義過濾器
- icons：圖標組件
- layout：佈局組件（全局框架）
- router：路由配置
- store：狀態管理（對vuex的封裝）
- styles：自定義樣式
- utils：通用工具方法
- auth.js：token 存取
- get-page-title.js：獲取頁面標題
- permission.js：權限檢查
- request.js：axios 請求封裝（重要）
- index.js：工具方法
- views：頁面
- permission.js：登陸認證和路由跳轉（重要）
- settings.js：全局配置
- main.js：全局入口文件
- App.vue：全局入口組件
