简介
- vue-element-admin是基于element-ui 的一套后台管理系统集成方案
# 安装
使用 https://github.com/PanJiaChen/vue-admin-template 点击code 下载压缩包 vue-admin-template-master.zip，或者clone一个
使用npm install 命令安装依赖
# 解压压缩包
# 进入目录
cd vue-element-admin-master
# 安装依赖
npm install
# 启动。执行后，浏览器自动弹出并访问http://localhost:9527/
npm run dev
1
2
3
4
5
6
7
2
3
4
5
6
7
# 关于 vue-admin-template
vueAdmin-template是基于vue-element-admin的一套后台管理系统基础模板（最少精简版）
作为模板进行二次开发
GitHub地址：https://github.com/PanJiaChen/vue-admin-template
建议
- 在 vue-admin-template 的基础上进行二次开发
- 把 vue-element-admin当做工具箱，想要什么功能或者组件就去 vue-element-admin 那里复制过来
# 解析前端框架结构
以 vue-element-admin-master（拥有完整的功能的插件）为例
当前版本是2021-12-01拉取的master分支
├── build # build config files
├── mock # mock data
├── plop-templates # basic template
├── public # pure static assets (directly copied)
│ │── favicon.ico # favicon
│ └── index.html # index.html template
├── src # main source code
│ ├── api # api service
│ ├── assets # module assets like fonts,images (processed by webpack)
│ ├── components # global components
│ ├── directive # global directive
│ ├── filters # global filter
│ ├── icons # svg icons
│ ├── lang # i18n language
│ ├── layout # global layout
│ ├── router # router
│ ├── store # store
│ ├── styles # global css
│ ├── utils # global utils
│ ├── vendor # vendor
│ ├── views # views
│ ├── App.vue # main app component
│ ├── main.js # app entry file
│ └── permission.js # permission authentication
├── tests # tests
├── .env.xxx # env variable configuration
├── .eslintrc.js # eslint config
├── .babelrc # babel config
├── .travis.yml # automated CI configuration
├── vue.config.js # vue-cli config
├── postcss.config.js # postcss config
└── package.json # package.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
# 关键模块
视频中的vue-admin-template是老版本，新版本中各个文件有所变化，但主体思路没有变化
# package.json
npm项目的核心配置文件，包含项目信息，项目依赖，项目启动相关脚本
启动项目的命令： npm run dev
dev脚本： "dev": "vue-cli-service serve",
- 原先使用的是 webpack-dev-server：一个小型的基于Node.js的http服务器，可以运行前端项目
- --inline：一种启动模式
- --progress：显示启动进度
- --config build/webpack.dev.conf.js：指定webpack配置文件所在位置
- 现在使用的是vue-cli-service serve 也是启动一个Node.js的http服务器
"scripts": {
"dev": "vue-cli-service serve",
"build:prod": "vue-cli-service build",
"build:stage": "vue-cli-service build --mode staging",
"preview": "node build/index.js --preview",
"svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
"lint": "eslint --ext .js,.vue src",
"test:unit": "jest --clearCache && vue-cli-service test:unit",
"test:ci": "npm run lint && npm run test:unit"
},
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# vue.config.js
配置webpack打包
配置启动前端服务的端口号
const port = process.env.port || process.env.npm_config_port || 9528 // dev port
1
# public/index.html
在index.html文件中注入打包后的js文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= webpackConfig.name %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# src/main.js
项目js入口文件，项目的所有前端功能都在这个文件中引入和定义，并初始化全局的Vue对象
import Vue from 'vue'
import 'normalize.css/normalize.css' // A modern alternative to CSS resets
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import locale from 'element-ui/lib/locale/lang/en' // lang i18n
import '@/styles/index.scss' // global css
import App from './App'
import store from './store'
import router from './router'
import '@/icons' // icon
import '@/permission' // permission control
/**
* If you don't want to use mock-server
* you want to use MockJs for mock api
* you can execute: mockXHR()
*
* Currently MockJs will be used in the production environment,
* please remove it before going online ! ! !
*/
if (process.env.NODE_ENV === 'production') {
const { mockXHR } = require('../mock')
mockXHR()
}
// set ElementUI lang to EN
Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式声明
// Vue.use(ElementUI)
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
store,
render: h => h(App)
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
# .env.development
存储开发环境的配置，同理.env.xxx是配置不同环境的变量
# just a flag
ENV = 'development'
# base api
VUE_APP_BASE_API = '/dev-api'
1
2
3
4
5
2
3
4
5
# src/utils/request.js
引入axios模块，定义全局的axios实例，并导出模块
通过 process.env.VUE_APP_BASE_API 调用.env.xxx中对应的值
import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
// create an axios instance
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
// withCredentials: true, // send cookies when cross-domain requests
timeout: 5000 // request timeout
})
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# src/api/user.js
引用request模块，调用远程api
import request from '@/utils/request'
export function login(data) {
return request({
url: '/vue-admin-template/user/login',
method: 'post',
data
})
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
Last Updated: 2022/01/16, 11:29:51