首先我们来看看这个基础模版的目录结构
├── 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,
}
下一节在说说 实际项目中怎么更改 登录接口