零基础学Vue+Elementui（1）开发工具及环境搭建

（转载自零基础学Vue+Elementui（1）开发工具及环境搭建）
【Vue+Elementui实战项目简介】

随着互联网行业的蓬勃发展，网站以及网页的开发从mvc老式的服务端渲染也逐渐发展为先在的前后端分离的模式，这在互联网发展的过程中也从偶然变为必然。前后端也在这个发展的过程中百花齐放、百家争鸣，而后随着时间的推移，以javascript独占鳌头，angular react vue三大框架雄霸天下，后端则是java、javascript、php、netcore坐镇四方，由于后端并非本次实战的主要内容，故不作太多赘述。咱们本次项目主要以前端实战为主，领略下华人框架VUE的魅力，以及做出我们想要的前端产品。

【为什么使用VUE？】
1、华人的骄傲。VUE作者是华人尤雨溪（英文名：Evan），也是华人的骄傲，使用VUE首先比较契合国人的思维逻辑，二是VUE对中文社区有着非常友好的中文支持和快速的响应，这也是另外两个框架除去产品力本身以外所不及的地方。

2、VUE自身强大的产品力。难道我们学习一款框架只是因为华人，只是因为中文好学吗? 当然不全是。VUE本身的强大产品力也是不容忽略的。vue相比其他两大框架，有着自己独特的魅力：

1. 首先是快。同样的页面渲染，vue的响应速度要快于react，要远远快于angular。这不是凭空想象，大家有时间可以自己去实测。

2. 其次是小。vue打包后的大小（300多kb）也是小于react，远远小于angular。

3. 然后是入门难度低。对于初次学习vue的人来说，也许你不一定需要javascript的基础知识，也能迅速的开发出自己想要的产品。

4. 最后一个是vue强。虽然是华人框架，但是vue产品本身你可以不用带任何有色眼镜，vue就是一款全球化框架，核心功能一有尽有，而在拓展方面完全不弱于react，且运行稳定，是一款成熟的产品，无论是个人开发，还是企业级开发，都有大量的案列。

   所以对于初学者而言，VUE是一个绝佳的选择且没有之一，而且最不可思议的地方在于，学完VUE之后，你会发现，REACT和Angular，只要稍微结合下它们的官方文档，也基本会了。

【为什么使用Element-UI】

Element-ui是饿了么出品的一款VUE前端UI插件，主要有各种各样的前端组件，如弹窗，提示框，表单，表格，还有布局方式。非常适合开发后台管理界面。它目前相较于其他ui插件有什么优势呢：

1. 首先是好看。本身时淡蓝色的主题，配合百搭。 易用易懂。文档简约，且直接包含示例代码，且大多数直接拷贝甚至不用修改就能用上。

2. 兼容性好。对于bootstrap兼容，两者配合有出其不意的效果。且后期如果学到SSR（服务端渲染）阶段，也能良好运行。

3. 布局方便。自带布局组件，可以用很少的html学习成本完成复杂的布局。

【实战的目标及范围】
1、使用通俗易懂的方法进行讲解；
2、做出一个具备前台+后台的前端页面（不包含后端，后端实战敬请期待）

【开始步入正题】

以上是关于vue的介绍，下面咱们就话不多说，直接开启vue+elementui实战之旅。

【开发工具及安装】
1、所用系统
本次实战开发系统采用windows10系统，也是目前最容易获得和上手的系统；
2、所需工具软件
vscode。是微软旗下的一款编辑器，广泛使用于前端开发，且vscode具有MacOS/linux/windows版本，支持跨平台开发，可以到官网下载最新版本。https://code.visualstudio.com/
Nodejs。是javascript运行环境，必须安装，本次实战采用12.13.0版本，其他更高版本亦可。https://nodejs.org/dist/v12.13.0/node-v12.13.0-x64.msi
Chrome。谷歌浏览器，主要用于网页显示及调试工具。https://www.google.cn/chrome/
以上网址如有无法访问情况，可以使用百度搜索相关官网，找到对应的安装包下载即可。
3、安装。安装时选择默认安装选项，安装到默认路径即可。

【开发环境配置】
一般安装好上述工具后就可以直接进行开发了。但是为了更便捷的开发，减少开发中的一些不必要的问题。对于vscode编辑器，我们还需要对vscode做一些配置。
1、安装插件
1.1、安装语言插件。第一次打开vscode界面一般为全英文，我们需要安装中文插件，减小开发中的一些不必要的麻烦。这样我么可以把更多的精力放在程序开发上。