零基础学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界面一般为全英文,我们需要安装中文插件,减小开发中的一些不必要的麻烦。这样我么可以把更多的精力放在程序开发上。

你可能感兴趣的