Vue2安装并集成ElementUI——基于SpringBoot和Vue的后台管理系统项目系列博客（二）

系列文章目录

1. 系统功能演示——基于SpringBoot和Vue的后台管理系统项目系列博客（一）
2. Vue2安装并集成ElementUI——基于SpringBoot和Vue的后台管理系统项目系列博客（二）
3. Vue2前端主体框架搭建——基于SpringBoot和Vue的后台管理系统项目系列博客（三）
4. SpringBoot后端初始框架搭建——基于SpringBoot和Vue的后台管理系统项目系列博客（四）
5. SpringBoot集成Mybatis——基于SpringBoot和Vue的后台管理系统项目系列博客（五）
6. SpringBoot实现增删改查——基于SpringBoot和Vue的后台管理系统项目系列博客（六）
7. SpringBoot实现分页查询——基于SpringBoot和Vue的后台管理系统项目系列博客（七）
8. SpringBoot实现集成Mybatis-Plus和SwaggerUI——基于SpringBoot和Vue的后台管理系统项目系列博客（八）
9. Vue实现增删改查——基于SpringBoot和Vue的后台管理系统项目系列博客（九）
10. SpringBoot实现代码生成器——基于SpringBoot和Vue的后台管理系统项目系列博客（十）
11. Vue使用路由——基于SpringBoot和Vue的后台管理系统项目系列博客（十一）
12. SpringBoot和Vue实现导入导出——基于SpringBoot和Vue的后台管理系统项目系列博客（十二）
13. SpringBoot和Vue实现用户登录注册与异常处理——基于SpringBoot和Vue的后台管理系统项目系列博客（十三）
14. SpringBoot和Vue实现用户个人信息展示与保存与集成JWT——基于SpringBoot和Vue的后台管理系统项目系列博客（十四）
15. SpringBoot和Vue实现文件上传与下载——基于SpringBoot和Vue的后台管理系统项目系列博客（十五）
16. SpringBoot和Vue整合ECharts——基于SpringBoot和Vue的后台管理系统项目系列博客（十六）
17. SpringBoot和Vue实现权限菜单功能——基于SpringBoot和Vue的后台管理系统项目系列博客（十七）
18. SpringBoot实现1对1、1对多、多对多关联查询——基于SpringBoot和Vue的后台管理系统项目系列博客（十八）
19. 用户前台页面设计与实现——基于SpringBoot和Vue的后台管理系统项目系列博客（十九）
20. SpringBoot集成Redis实现缓存——基于SpringBoot和Vue的后台管理系统项目系列博客（二十）
21. SpringBoot和Vue集成高德地图——基于SpringBoot和Vue的后台管理系统项目系列博客（二十一）
22. SpringBoot和Vue集成视频播放组件——基于SpringBoot和Vue的后台管理系统项目系列博客（二十二）
23. SpringBoot和Vue集成Markdown和多级评论——基于SpringBoot和Vue的后台管理系统项目系列博客（二十三）

---

项目资源下载

1. GitHub下载地址
2. Gitee下载地址
3. 项目MySql数据库文件

---

---

前言

  今天这篇博文主要内容包括Vue的安装、创建Vue前端项目、ElementUI的安装与集成等，都是整个项目的一些基础内容，这里需要注意一定要和我的版本保持一致，否则可能会出现各种错误，具体版本可看我下面演示中的标记。好了，下面就开始今天的内容吧！

---

一、安装Vue

1. 安装Node.js
   ①：访问Node.js 中文网，直接下载.msi格式的即可，注意要与自己的电脑位数匹配，而且最好使用“长期支持版本“，下载之后没有什么需要注意的，一直下一步就可以安装成功
   
   ②：因为Node.js中集成了npm，所以我们无需再额外配置npm就可以在全局命令中使用npm命令，我们可以在cmd中输入node -v与npm -v分别查看版本信息，如下如下图所示表示安装成功
   
2. 配置淘宝镜像
   ①：配置淘宝镜像的目的是提升后面下载的速度，只需要在cmd中输入npm config set registry=http://registry.npm.taobao.org即可，如下图所示
   
3. 测试npm安装Vue.js
   ①：在cmd中输入npm install vue -g，其中-g是指安装到全局目录中
   
4. 安装Vue-router
   ①：vue-router是Vue.js官方路由插件，安装也很简单，我们只需要在cmd中输入npm install vue-router -g即可
   
5. 安装Vue脚手架
   ①：在cmd中运行npm install -g @vue/cli，安装Vue脚手架
   
6. 测试Vue是否安装成功
   ①：在cmd中输入vue -V，注意这里的V是大写，出现如下图所示表示Vue脚手架已经安装成功
   
   ②：在cmd中输入npm list vue -g，出现如下图所示表示Vue已经安装成功
   

二、创建Vue前端项目

1. 新建一个文件夹存放本项目，如下图所示
   
2. 进入刚才创建的项目目录，输入vue create vue（其中最后一个vue为项目名称，读者可以取别的名字）
   
3. 使用上下键选择Manually select features（蓝色），然后点击回车键
   
4. 然后将下图我选择的几个都选择上（蓝色），使用空格选择，然后点击回车即可
   
5. 然后选择2.x（蓝色）后回车
   
6. 然后在这一步输入Y后回车
   
7. 然后选择In package.json（蓝色）后回车
   
8. 然后输入N后回车
   
9. 然后选择Use NPM（蓝色）后回车
   
10. 然后就开始创建我们的前端项目，成功后如下图所示
    
11. 最终的Vue前端工程目录如下图所示
    
12. 然后使用Idea打开本项目
    
13. 然后回到之前的命令行，输入cd vue（vue为项目名称）
    
14. 然后输入npm run serve来启动前端Vue项目，启动成功如下图所示
    
15. 在浏览器中输入http://localhost:8080/访问启动后的界面，如下图所示表示项目创建成功
    

三、安装ElementUI

1. 在Idea的Terminal中进入vue项目目录，然后直接输入npm i element-ui -S然后回车即可，出现版本号表示安装成功
   
2. 然后我们可以看到在项目的package.json中已经帮我们引入了element-ui的依赖
   

四、引入ElementUI

1. 将main.js重写为以下内容

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false;
Vue.use(ElementUI, {size: "small"});

new Vue({
    router,
    render: h => h(App)
}).$mount('#app');

2. 然后我们测试一下ElementUI是否生效，我们在HomeView.vue中首先在script中写一个data，返回一串文字，在最上边的div中写一个按钮，引入这段文字。刷新后显示这个按钮即为成功
   
3. 最终前端界面出现如下图所示，表示我们的Vue前端项目引入ElementUI成功
   

---

总结

  到此为止呢，今天的这篇博客就到这里了，可以看到今天的内容并不是很难，都是一些基础的软件安装与配置，当然，这也是为了我们后续工作打基础，后面的博客难度就会越来越高了，那我们就下一篇博客再见啦！（Ps：目前打算一天更新一篇博文！）