Vue 新手学习笔记：vue-element-admin 之安装，配置及入门开发

所属专栏： Vue 开发学习进步

说实话都是逼出来的，对于前端没干过ES6都不会的人，vue视频也就看了基础的一些
但没办法，接下来做微服务架构，前端就用 vue，这块你负责。。。。说多了都是泪，脚手架框架布了都没看过
干就完事，不过好在做好了，这里写下给和我一样苦逼的同学能快点适应入门下，当然一些基础的东西还是要知道的

主要分为几个部分

• 安装

• 准备工作

• mock 假数据页面

• axios 连接后台真数据

• 正式环境部署

• 前端完整代码

肯定有地方不太对的，麻烦大家指出来

安装

前端我推荐用 vscode 就是好用

vscode官网

安装node.js及npm

npm官网地址

下载node，安装很简单一直下一步就可以了。

win+R 输入cmd进入命令行 输入

1.  
   node -v
2.  
   npm -v

出现以上信息说明node.js及npm安装成功

下载 vue-element-admin，并启动

官方：https://github.com/PanJiaChen/vue-element-admin

框架里的组件样式可以从 element 上找

element：http://element-cn.eleme.io/#/zh-CN/component/table

可以直接下载压缩包解压，也可以通过 git 下载

1.  
   # 克隆项目
2.  
   git clone https://github.com/PanJiaChen/vue-element-admin.git
3.  
    
4.  
   #设置淘宝仓库
5.  
   npm install --registry=https://registry.npm.taobao.org
6.  
    
7.  
   # 安装依赖
8.  
   npm install
9.  
    
10.  
    # 启动服务
11.  
    npm run dev

1.  
   ├── build // 构建相关  
2.  
   ├── config // 配置相关
3.  
   ├── src // 源代码
4.  
   │   ├── api // 所有请求
5.  
   │   ├── assets // 主题 字体等静态资源
6.  
   │   ├── components // 全局公用组件
7.  
   │   ├── directive // 全局指令
8.  
   │   ├── filtres // 全局 filter
9.  
   │   ├── icons // 项目所有 svg icons
10.  
    │   ├── lang // 国际化 language
11.  
    │   ├── mock // 项目mock 模拟数据
12.  
    │   ├── router // 路由
13.  
    │   ├── store // 全局 store管理
14.  
    │   ├── styles // 全局样式
15.  
    │   ├── utils // 全局公用方法
16.  
    │   ├── vendor // 公用vendor
17.  
    │   ├── views // view
18.  
    │   ├── App.vue // 入口页面
19.  
    │   ├── main.js // 入口 加载组件 初始化等
20.  
    │ └── permission.js // 权限管理
21.  
    ├── static // 第三方不打包资源
22.  
    │   └── Tinymce // 富文本
23.  
    ├── .babelrc // babel-loader 配置
24.  
    ├── eslintrc.js // eslint 配置项
25.  
    ├── .gitignore // git 忽略项
26.  
    ├── favicon.ico // favicon图标
27.  
    ├── index.html // html模板
28.  
    └── package.json // package.json

准备工作

汉化

打开vscode后
Windows、Linux 快捷键是：ctrl+shift+p

macOS 快捷键是：command + shift + p
搜索 Configure Language，选择下图第一个选项。

将"locale":“en” 修改为 “locale”:“zh-CN” ，保存文件。
选择左侧左下方的扩展按钮，搜索chinese 安装下图的插件

安装成功以后重启vscode，语言就改成中文了。

推荐安装一些好用的扩展

Auto Close Tag 自动闭合HTML标签
Auto Rename Tag 修改HTML标签时，自动修改匹配的标签
Beautify 代码美化
ESLint ESLint 插件，高亮提示
File Peek 根据路径字符串，快速定位到文件
HTML CSS Support css提示（支持vue）
HTMLHint HTML格式提示
JavaScript (ES6) code snippets ES6语法代码段
Vetur Vue代码高亮及补全
VS Color Picker vs颜色选择器
Vue 2 Snippets Vue2代码补全
open in browser 在浏览器中预览

ESLint

刚开始很难用，疯狂报错，那是因为没配好，配好后一些小的问题，会自动修正，在保存的时候

文件 ➡ 首选项 ➡ 设置 ➡ 搜索 ESLint ➡ 点击在 setting.json 中编辑 ➡ 粘进去，保存，完事

1.  
   {
2.  
   "files.autoSave": "off",
3.  
   "eslint.validate": [
4.  
   "javascript",
5.  
   "javascriptreact",
6.  
   "vue-html",
7.  
   {
8.  
   "language": "vue",
9.  
   "autoFix": true
10.  
    }
11.  
    ],
12.  
    "eslint.run": "onSave",
13.  
    "eslint.autoFixOnSave": true
14.  
    }

dev.env.js

先来看下 config 文件夹下的 dev.env.js

这个文件夹里的 BASE_API 后台接口的就是公共路径，调后台的时候要记得改，这是本地的，剩下的 prod 和 sit 分别是正式环境打包和 测试环境打包的

/src/router/index.js

先来看下目录

详细的解释在这个目录文件的上面有，每个属性什么意思，可以在上面看

mock 假数据页面

mock 主要是帮助前后分离的项目为前端提供数据，这样才好测试

先来画个页面，一个分页列表吧，路径 /src/service/dataLog.vue 用来显示一些信息

我在 element 组件里找了一个列表功能和分页功能

/src/service/dataLog.vue

dataLog.vue 的 template 部分

1.  
   <template>
2.  
   <div class="app-container">
3.  
   <!-- 查询框 双向绑定 keyword-->
4.  
   <el-input
5.  
   v-model="keyword"
6.  
   placeholder="请输入关键字"
7.  
   clearable
8.  
   style="width:500px" />
9.  
   <!-- 搜索按钮 绑定点击事件 -->
10.  
    <el-button type="primary" icon="el-icon-search" @click="getDataLog()">搜索</el-button>
11.  
    <!-- data就是绑定数据用的 -->
12.  
    <el-table
13.  
    :data="dataLog"
14.  
    style="width: 100%">
15.  
    <el-table-column type="expand">
16.  
    <template slot-scope="props">
17.  
    <el-form label-position="left" inline class="demo-table-expand">
18.  
    <el-form-item label="错误信息">
19.  
    <span>{{ props.row.log }}</span>
20.  
    </el-form-item>
21.  
    </el-form>
22.  
    </template>
23.  
    </el-table-column>
24.  
    <el-table-column
25.  
    label="服务单"
26.  
    prop="data"/>
27.  
    <el-table-column
28.  
    label="时间"
29.  
    prop="time"/>
30.  
    </el-table>
31.  
    <!-- 分页 -->
32.  
    <pagination
33.  
    v-show="total>0"
34.  
    :total="total"
35.  
    :page.sync="listQuery.page"
36.  
    :limit.sync="listQuery.limit"
37.  
    @pagination="getDataLog" />
38.  
    <!-- total总条数
39.  
    listQuery.page 当前页
40.  
    listQuery.limit 每页几条
41.  
    getDataLog 后买点击分页时候要回调的函数 -->
42.  
    </div>
43.  
    </template>

注意 template 下只能有一个节点，两个就报错了，可以试下，所有我放在一个统一的 div 里

至于这些值为啥这样写，我只能说照着人家给的模板改就好，人家写啥你写啥，样式啥的人家上面都有

样式部分就不贴了，最后会把完整的代码贴出来，来看下 js 的部分

这里解释下分页，分页除了初始化给了第 1 页和每页 10 条后，之后每次点击页码，数据都会双向绑定到值上，所有在调后台函数的时候，直接取 page 和 limit 值就行了，不想要再去想我怎么去拿 div 上面的数字

1.  
   <script>
2.  
   // 这里要调用我使用的 api
3.  
   // 括号里的是要使用的函数接口，多个的话逗号隔开
4.  
   import { getDataLog } from '@/api/service/dataLog'
5.  
   // 引入分页组件
6.  
   import Pagination from '@/components/Pagination'
7.  
    
8.  
   export default {
9.  
   // 这里需要把分页组件注册进来
10.  
    components: { Pagination },
11.  
    data() {
12.  
    return {
13.  
    // 搜索关键字
14.  
    keyword: '',
15.  
    // 数据条数
16.  
    total: 0,
17.  
    // 分页参数
18.  
    listQuery: {
19.  
    page: 1,
20.  
    limit: 10
21.  
    },
22.  
    // 列表数据
23.  
    dataLog: []
24.  
    }
25.  
    },
26.  
    // 这个是生命周期函数，这个时候是 data 和 methods 都初始化好了，具体看基础知识
27.  
    created() {
28.  
    this.getDataLog()
29.  
    },
30.  
    methods: {
31.  
    // 函数部分
32.  
    getDataLog() {
33.  
    // 参数
34.  
    this.listQuery = {
35.  
    page: this.listQuery.page,
36.  
    limit: this.listQuery.limit,
37.  
    object: this.keyword
38.  
    }
39.  
    // 调用上面引入的 api 里的 getDataLog
40.  
    // 不引入就报函数未定义了，刚开始一个人折腾好久，老子明明定义在这了，为啥还没定义
41.  
    getDataLog(this.listQuery).then(response => {
42.  
    // 返回值处理
43.  
    this.dataLog = []
44.  
    this.total = response.data.total
45.  
    this.dataLog = response.data.items
46.  
    // 查询后要把关键字给清空
47.  
    this.keyword = ''
48.  
    })
49.  
    }
50.  
    }
51.  
    }
52.  
    </script>

接下来看看上面的 api 接口

/src/api/service/dataLog.js

每次点击就会去调用 api 接口里的方法，参数都看得懂

上面引用的 request 文件使得每次调用的时候都会对请求进行拦截，上面的 BASE_API 就会在里面被拼上去

1.  
   import request from '@/utils/request'
2.  
    
3.  
   // 获取错误信息列表
4.  
   export function getDataLog(query) {
5.  
   return request({
6.  
   url: '/log/getDataLog',
7.  
   method: 'get',
8.  
   params: query
9.  
   })
10.  
    }

/src/mock/service/dataLog.js

接下来就是使用 mock 假数据，我就循环了10条，因为假的分页，特意去实现太费劲了

如果有多个接口的数据要返回，可以在 export default 里写多个接口去返回

1.  
   import Mock from 'mockjs'
2.  
    
3.  
   const List = []
4.  
    
5.  
   const count = 10
6.  
    
7.  
   // 模拟错误信息
8.  
   for (let i = 0; i < count; i++) {
9.  
   List.push(Mock.mock({
10.  
    data: '12987122',
11.  
    time: '好滋好味鸡蛋仔',
12.  
    log: '江浙小吃、小吃零食江浙小吃、小吃零食'
13.  
    }))
14.  
    }
15.  
     
16.  
    export default {
17.  
    // 获取错误信息列表
18.  
    getDataLog: () => {
19.  
    return {
20.  
    total: List.length,
21.  
    items: List,
22.  
    limit: 10
23.  
    }
24.  
    }
25.  
    }

/src/mock/index.js

上面的写完还不行，因为通过 api 提交的请求，mock 不知道哪些是需要请求假数据的，所有需要在 index 文件里进行拦截

直接加就好了，就这两行，把刚写的假数据引用进来，对请求进行拦截

第一个参数，就是要拦截的 url 这里就和 api 挂钩起来了

第二个参数，get 类型请求

第三个参数，/src/mock/service/dataLog.js 里 export 的对应接口，这样就和 mock 假数据也挂钩起来了

需要拦截多少个请求就要写多少个

然后 npm run dev 运行测试就好了

axios 连接后台真数据

这里我偷了个懒，由于 utils/request.js 已经帮我们把 axios 都弄好了，像 BASE_API 的路径拼接，我又不想再写个 api 文件，所以我就直接拿过来用了

先引入

import request from '@/utils/request'

js 部分：

1.  
   methods: {
2.  
   getDataLog() {
3.  
   this.listQuery = {
4.  
   page: this.listQuery.page,
5.  
   limit: this.listQuery.limit,
6.  
   object: this.keyword
7.  
   }
8.  
   // mock 请求假数据
9.  
   // getDataLog(this.listQuery).then(response => {
10.  
    // this.dataLog = []
11.  
    // this.total = response.data.total
12.  
    // this.dataLog = response.data.items
13.  
    // // 查询后要把关键字给清空
14.  
    // this.keyword = ''
15.  
    // })
16.  
    // 请求后台获得真实数据
17.  
    request({
18.  
    url: '/log/getDataLog/',
19.  
    method: 'post',
20.  
    data: this.listQuery
21.  
    }).then(response => {
22.  
    this.dataLog = []
23.  
    this.total = response.data.pageEntity.total
24.  
    this.dataLog = response.data.retData
25.  
    })
26.  
    }
27.  
    }

这里访问路径就是 http://127.0.0.1:8081/log/getDataLog，如果全路径访问也是可以的，url 前面带了 “/”意思就是会进行路径的拼接，如果写的是 url: 'log/getDataLog' 那么访问就报错了，因为前缀没拼上，还有要把 mock 里的 index.js 文件里的注掉，要不会拦截变成假数据

这里用的是 post 方法，后台部分直接用 @RequestBody 接收参数就好了

也可以用 get 方法，把参数拼在 url 上传递，我这采用 restful 形式的接口，用 @PathVariable 接收参数

这时候你可能会遇到跨域问题

新建 config 包

1.  
   @Configuration
2.  
   public class CorssDomainConfig implements WebMvcConfigurer {
3.  
    
4.  
   @Autowired
5.  
   private CorsInterceptor corsInterceptor;
6.  
    
7.  
   @Override
8.  
   public void addInterceptors(InterceptorRegistry registry) {
9.  
   InterceptorRegistration registration = registry.addInterceptor(corsInterceptor);
10.  
    registration.addPathPatterns("/**");
11.  
    }
12.  
     
13.  
    }

然后新建 interceptor 包

1.  
   @Component
2.  
   public class CorsInterceptor extends HandlerInterceptorAdapter {
3.  
    
4.  
   @Override
5.  
   public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler)
6.  
   throws Exception {
7.  
   // 添加跨域CORS
8.  
   response.setHeader("Access-Control-Allow-Origin", "*");
9.  
   response.setHeader("Access-Control-Allow-Headers", "Origin,X-Requested-With,Content-Type,Accept,Authorization,token, x-token");
10.  
    response.setHeader("Access-Control-Allow-Methods", "GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH");
11.  
    return true;
12.  
    }
13.  
    }

项目再启动时，addInterceptors 就会把 preHandle 给注册成对象，后续请求都会经过 preHandle 接口对请求做出处理

正式环境部署

我这前端采用 Nginx 作为前端的运行容器

详细部署：Docker 上部署 Nginx

我 Nginx html 文件夹下我保留了 dist目录

所以 /conf.d/default.conf 要改下

vue 里 config/sit.env.js，这里我配置了测试服的，然后在 prod.env.js 配置了正式服的

1.  
   module.exports = {
2.  
   NODE_ENV: '"production"',
3.  
   ENV_CONFIG: '"sit"',
4.  
   // 项目访问根路径
5.  
   // 测试服
6.  
   BASE_API: '"http://xx.xx.xxx.xxx:xxxx"',
7.  
   }

1.  
   #测试服打包
2.  
   npm run build:sit
3.  
    
4.  
   #正式服打包
5.  
   npm run build:prod

命令就在 package.json 里

打包后会在根目录生成 dist 文件夹，把文件夹放到服务器的 html 文件夹下就好了，然后启动 Nginx，启动过就不用启动了，由于我 Nginx 直接配置了 80 端口的，所以直接服务器路径访问就行了

PS:如果遇到了打包报错的情况，那就把 npm 更新下 npm install ，这会在项目根目录生成 node_modules 文件夹，这些是需要的依赖，在 linux 上打包我这试了不行，依赖更新了也不对，不知道问题出在哪，应该是 windows 和 linux 依赖不太一样吧

前端完整代码

/src/views/service/dataLog.vue

1.  
   <template>
2.  
   <div class="app-container">
3.  
   <!-- 查询框 双向绑定 keyword-->
4.  
   <el-input
5.  
   v-model="keyword"
6.  
   placeholder="请输入关键字"
7.  
   clearable
8.  
   style="width:500px" />
9.  
   <!-- 搜索按钮 -->
10.  
    <el-button type="primary" icon="el-icon-search" @click="getDataLog()">搜索</el-button>
11.  
    <!-- data就是绑定数据用的 -->
12.  
    <el-table
13.  
    :data="dataLog"
14.  
    height="600"
15.  
    style="width: 100%">
16.  
    <el-table-column type="expand">
17.  
    <template slot-scope="props">
18.  
    <el-form label-position="left" inline class="demo-table-expand">
19.  
    <el-form-item label="错误信息">
20.  
    <div v-html="props.row.log"/>
21.  
    </el-form-item>
22.  
    </el-form>
23.  
    </template>
24.  
    </el-table-column>
25.  
    <el-table-column
26.  
    label="服务单"
27.  
    prop="data"/>
28.  
    <el-table-column
29.  
    label="时间"
30.  
    prop="time"/>
31.  
    </el-table>
32.  
    <!-- 分页 -->
33.  
    <pagination
34.  
    v-show="total>0"
35.  
    :total="total"
36.  
    :page.sync="listQuery.page"
37.  
    :limit.sync="listQuery.limit"
38.  
    @pagination="getDataLog" />
39.  
    <!-- total总条数
40.  
    listQuery.page 当前页
41.  
    listQuery.limit 每页几条
42.  
    getDataLog 后买点击分页时候要回调的函数 -->
43.  
    </div>
44.  
    </template>
45.  
     
46.  
    <script>
47.  
    // import { getDataLog } from '@/api/service/dataLog'
48.  
    import Pagination from '@/components/Pagination'
49.  
    import request from '@/utils/request'
50.  
     
51.  
    export default {
52.  
    components: { Pagination },
53.  
    data() {
54.  
    return {
55.  
    // 搜索关键字
56.  
    keyword: '',
57.  
    // 数据条数
58.  
    total: 0,
59.  
    // 分页参数
60.  
    listQuery: {
61.  
    page: 1,
62.  
    limit: 10
63.  
    },
64.  
    // 列表数据
65.  
    dataLog: []
66.  
    }
67.  
    },
68.  
    created() {
69.  
    this.getDataLog()
70.  
    },
71.  
    methods: {
72.  
    getDataLog() {
73.  
    this.listQuery = {
74.  
    page: this.listQuery.page,
75.  
    limit: this.listQuery.limit,
76.  
    object: this.keyword
77.  
    }
78.  
    // mock 请求假数据
79.  
    // getDataLog(this.listQuery).then(response => {
80.  
    // this.dataLog = []
81.  
    // this.total = response.data.total
82.  
    // this.dataLog = response.data.items
83.  
    // // 查询后要把关键字给清空
84.  
    // this.keyword = ''
85.  
    // })
86.  
    // 请求后台获得真实数据
87.  
    request({
88.  
    url: '/log/getDataLog/',
89.  
    method: 'post',
90.  
    data: this.listQuery
91.  
    }).then(response => {
92.  
    this.dataLog = []
93.  
    this.total = response.data.pageEntity.total
94.  
    this.dataLog = response.data.retData
95.  
    })
96.  
    }
97.  
    }
98.  
    }
99.  
    </script>
100.  
      
101.  
     <style>
102.  
     .demo-table-expand {
103.  
     font-size: 0;
104.  
     }
105.  
     .demo-table-expand label {
106.  
     width: 90px;
107.  
     color: #99a9bf;
108.  
     }
109.  
     .demo-table-expand .el-form-item {
110.  
     margin-right: 0;
111.  
     margin-bottom: 0;
112.  
     width: 50%;
113.  
     }
114.  
     </style>

/src/api/service/dataLog.js

1.  
   import request from '@/utils/request'
2.  
    
3.  
   // 获取错误信息列表
4.  
   export function getDataLog(query) {
5.  
   return request({
6.  
   url: '/log/getDataLog',
7.  
   method: 'get',
8.  
   params: query
9.  
   })
10.  
    }

/src/mock/service/index.js

拦截原因，请求后台就注掉

// Mock.mock(/\/log\/getDataLog/, 'get', dataLogAPI.getDataLog)

/src/mock/service/dataLog.js

1.  
   import Mock from 'mockjs'
2.  
    
3.  
   const List = []
4.  
    
5.  
   const count = 10
6.  
    
7.  
   // 模拟错误信息
8.  
   for (let i = 0; i < count; i++) {
9.  
   List.push(Mock.mock({
10.  
    data: '12987122',
11.  
    time: '好滋好味鸡蛋仔',
12.  
    log: '江浙小吃、小吃零食江浙小吃、小吃零食'
13.  
    }))
14.  
    }
15.  
     
16.  
    export default {
17.  
    // 获取错误信息列表
18.  
    getDataLog: () => {
19.  
    return {
20.  
    total: List.length,
21.  
    items: List,
22.  
    limit: 10
23.  
    }
24.  
    }
25.  
    }