注：如果需要写后台，并且使用vue-admin-template 作为架子来构建项目，那么对于这个架子初始化时，需要删除的各项可以参考进行删减

一、前置项

一、下载 vue-admin-template

git clone [email protected]:Kerwin-li/vue-admin-template.git
// 并下载包
npm i

二、确保安装的插件

这里以vscode来举例：

Vetur是基于单文件组件开发的支持插件, ESlint是基于代码校验的插件工具

除此之外, eslint需要在vscode中进行一些参数的配置，在vscode 配置中心进行设置

{ 
    "eslint.enable": true,
    "eslint.run": "onType",
    "eslint.options": {
        "extensions": [
            ".js",
            ".vue",
            ".jsx",
            ".tsx"
        ]
    },
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}

二、删除相关文件

一、删除 mock

1、在文件根目录删除 mock 的文件夹

2、在main.js 中删除 mock 相关代码

3、删除vue.config 中的mock代码

// before: require('./mock/mock-server.js')

二、permission.js 模块

对于路由守卫和权限管理我们选择在项目中制作的时候来进行设置，所以此时我们选择全部删除

src 下的 permission 删除所有内容

三、settings.js 模块

title(项目名称) ， fixedHeader（固定头部），sidebarLogo（显示左侧菜单logo）

他在store / index 中被使用，挂载在了 VueX 中

四、Vuex 模块

其中有三个文件：

app：控制左边栏的打开关闭

setting：相关导航的设置

user：本地存储的一些相关数据

此时我们把 user 模块中重置为基本形态

const state = {}
const mutations = {}
const actions = {}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

同时 getters 中有关于user的快捷访问，所以说要将相关的依赖进行删除

const getters = {
  sidebar: state => state.app.sidebar,
  device: state => state.app.device,
  // token: state => state.user.token,
  // avatar: state => state.user.avatar,
  // name: state => state.user.name
}
export default getters

五、vue.config.js 文件

我们在文件中可以看到页面的标题同时引用了setting.js 中的内容，并且使用

const name = defaultSettings.title || 'vue Admin Template' // page title

根据注释可以了解到，他是决定了页面的标题，所以我们可以在setting 中去修改标题

同时在port 中可以设置他的端口号

const port = process.env.port || process.env.npm_config_port || 9528 // dev port

他查询的是开发或者生产模式中的端口我们可以在 .env.development 中去设置port

# just a flag
ENV = 'development'

# base api
VUE_APP_BASE_API = '/dev-api'

# 端口号
port = 8888

后台系统：vue-admin-template 初始化