任务
开始前端开发,经过调研比较各模板,决定使用vue-admin-template轻量级后台管理系统
接下来完成对模版的克隆、分析、简化、环境配置的工作
具体工作
-
模版克隆
使用git bash
进行克隆git clone https://github.com/PanJiaChen/vue-admin-template
使用命令行工具进行安装
# 进入项目目录 cd vue-admin-template # 安装依赖 npm install # 启动服务 npm run dev # 浏览器进行访问 http://localhost:9528/
-
项目目录结构及主要部分说明
├── public │ ├── favicon.ico │ └── index.html /* 入口页面 */ ├── src │ ├── App.vue /* 页面主文件 */ │ ├── api /* 封装http请求文件 */ │ │ ├── user.js /* 用户模块接口 */ │ ├── assets /* 静态资源 */ │ │ ├── other /* 图片 */ │ │ └── 404_images /* 404_image图片 */ │ ├── components /* 组件 */ │ ├── directives /* 全局指令 */ │ ├── main.js /* 项目入口文件 */ │ ├── router /* 路由 */ │ │ └── index.js /* 路由配置文件 */ │ ├── store /* Vuex */ │ │ ├── index.js /* Vuex入口文件 */ │ │ ├── getters.js /* getters定义 */ │ │ └── module /* Vuex模块文件 */ │ ├── styles /* 样式 */ │ ├── utils /* 工具文件 */ │ └── views /* 页面 */ │ | ├── user.vue /* 用户页面 */ │ | ├── 404.vue /* 错误页面 */ │ └── test.vue /* 测试页面 */ ├── package.json /* 项目依赖 */ ├── package-lock.json /* 锁版本包 */ ├── .env.development /* 开发、测试环境配置 */ ├── .env.test /* 测试环境配置 */ ├── .env.production /* 生产环境配置 */ ├── babel.config.js /* babel配置文件 */ ├── vue.config.js /* Vue CLI自定义配置文件 */ └── README.md /* 描述文件 */
-
进行集成修改
-
进入
vue.config.js
进行如下修改//注释掉下面行,防止出现一些警告 //lintOnSave: process.env.NODE_ENV === 'development', //不使用模拟数据,可以同时将mock文件夹删除 //before: require('./mock/mock-server.js') 模拟数据
-
进入
.env.development
# base api 修改基本的api VUE_APP_BASE_API = 'http://localhost:8080'
-
进入
settings.js
// 在第三行可以修改项目名称 title:'智能分析辅助系统'
-
进入```main.js``
//注释掉下面的代码 /*测试*/ // if (process.env.NODE_ENV === 'production') { // const { mockXHR } = require('../mock') // mockXHR() // } //Vue.use(ElementUI, { locale })
-
进入
src-api
,删除不需要的.js
文件。 -
进入
src-layout-componets
,对页面布局进行修改。 -
进入
src-router
,删除不需要的路由。 -
进入
src-store
,对vuex
进行配置管理。 -
进入
src-views
,对不需要的.vux
文件进行删除。
-
-
对项目目录中的配置完成以及简化之后,启动
http://localhost:9528/#/dashboard
,启动成功。