首先我們來看看這個基礎模版的目錄結構
├── 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,
}
下一節在說說 實際專案中怎么更改 登錄介面
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/60304.html
標籤：JavaScript