首先我們來看看這個基礎模版的目錄結構
├── build // 構建相關
├── config // 配置相關
├── src // 原始碼
│ ├── api // 所有請求
│ ├── assets // 主題 字型等靜態資源
│ ├── components // 全域性公用元件
│ ├── directive // 全域性指令
│ ├── filtres // 全域性 filter
│ ├── icons // 專案所有 svg icons
│ ├── lang // 國際化 language
│ ├── mock // 專案mock 模擬資料
│ ├── router // 路由
│ ├── store // 全域性 store管理
│ ├── styles // 全域性樣式
│ ├── utils // 全域性公用方法
│ ├── vendor // 公用vendor
│ ├── views // view
│ ├── App.vue // 入口頁面
│ ├── main.js // 入口 載入元件 初始化等
│ └── permission.js // 許可權管理
├── static // 第三方不打包資源
│ └── Tinymce // 富文字
├── .babelrc // babel-loader 配置
├── eslintrc.js // eslint 配置項
├── .gitignore // git 忽略項
├── favicon.ico // favicon圖示
├── index.html // html模板
└── package.json // package.json
用到的技術棧主要是vue的全家桶模式 包括 vue、vue-router 、vuex 、axios 以及基於webpack-template 構建的，用到的ui框架為element-ui，
src目錄下有各mock檔案 這個檔案是模擬資料用的 ，實際專案開發中，會用到後端提供的真實介面，到時會更換。
基礎模版還提供來 permission.js 許可權管理，會根據使用者的不同許可權可以實現動態路由
再來說下 基礎模版的router 專案中在router檔案中有一個index.js檔案 此檔案相當於 一個路由表 用layout佈局將配置的路由表渲染出來，真實專案中可以後端生成一個路由表
分析vue-router的組成：
vue-router外掛三大元件說明如下：
- VueRouter ：路由器類，根據路由請求在路由檢視中動態渲染選中的元件
- router-link ：路由連結元件，宣告用以提交路由請求的使用者介面
- router-view：路由檢視元件，負責動態渲染路由選中的元件
在layout檔案中 分為
檔案可分為
這三個部分組成 也是整個後臺模版的基礎組成。
關於其他檔案 在上面引入的模組已經很清楚了
在專案開發中 使用的是vsCode編輯器，關於一些配置 不容易記 這裡貼出來 便於以後檢視
開啟設定，進入settings.json 檔案 將下面放進去即可 大概就是 新視窗開啟檔案，不會覆蓋你之前開啟的檔案，還有就是vue的語法和eslint外掛校驗，有時候會出現紅色波浪線，把它關掉 不影響專案正常執行
{
"workbench.startupEditor": "welcomePage",
"workbench.editorAssociations": [
{
"viewType": "default",
"filenamePattern": "*.js"
}
],
"editor.columnSelection": true,
"workbench.activityBar.visible": true,
"window.openFilesInNewWindow": "default",
"window.newWindowDimensions": "inherit",
"window.openFoldersInNewWindow": "on",
"workbench.iconTheme": "vscode-icons",
"vsicons.dontShowNewVersionMessage": true,
"workbench.editor.enablePreview": false,
"vetur.validation.template": false,
"eslint.enable": false,
}
下一節在說說 實際專案中怎麼更改 登入介面