Vue.js前端框架系统学习（1）——安装Vue及相关环境的搭建

写在前面的话：个人对于Vue.js这个框架之前也有过学习，但是一直没有系统的进行学习，希望能够通过博客记录的方式重新完整地照着官方文档学习，督促自己完成网站的搭建。

一.Vue.js的介绍

话不多说，三大热门前端框架之一的Vue.js在这几年获得了更好的发展，和Angular都是前端程序员比较青睐的选择。而且在前后端分离式开发越来越流行的时候，这种单页面开发或者是少页面开发尤其适合通过Vue来完成。本系列博文主要根据官方的2.x教程文档进行学习。当然了，想要学习Vue这个前端框架还是需要一定的HTML,CSS,JS基础的，HTML5和CSS3相对较为简单，但是精通还是需要不断学习的。

二.安装Vue相关的配置与操作

对于很多配置过Java和python中tensorflow环境的朋友，我敢保证安装Vue真的太简单了。

2.1.编辑器的选择

2.1.1. 登录Vue.js官网 ，你会发现特别赞助中有一个编辑器：HBuilder X,我当时准备学习Vue.js的时候就是选用的这款编辑器，这款编译器使用下来总体感觉还不错，它在相当充足的语法提示，总体看比较清爽，而且更新频率也挺高的，说明比较活跃。可以下载试一试，体验一下写代码的感觉。
2.1.2.第二个就是比较大众的VS code了，不用多说了，一个字，爽。扩展应有尽有，个人比较喜欢。

2.2.Vue Devtools （浏览器插件）

这款谷歌插件可以更方便地在浏览器中审查调试Vue应用。具体下载安装方法就不教了，我想肯定都会的。

三.Vue.js的安装

说的正确一点也算不上安装，叫引入更贴切一点。

3.1.通过CDN引入

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
简简单单，一行代码直接引入，然后就可以快乐的使用Vue了

3.2.通过npm安装

这种方式的安装适用于大型的应用，当然同样也适用小型应用。
我们只需要新建好一个干净的文件夹，然后打开命令提示符
输入：npm install vue // 通过npm来安装最新的Vue
注意：对于npm安装Vue的方式，需要先安装npm

3.2.1.附带说一下npm的安装，可以直接通过Node.js安装，安装完之后通过cmd命令npm -v查看安装版本，出现版本提示则安装成功。

3.3.通过Vue CLI的脚手架进行安装

Vue CLI截止到我发这篇博文，已经到v4.4.5版本了，可以自行根据官方文档安装Vue CLI的脚手架，不过要提一点，在CLI 3.x之前，也就是2.x的版本的时候是没有vue ui的，vue cli3.x出现了vue ui,能够用更加友好的交互界面来完成项目的创建。我这边只是一些介绍，具体的还得看官方的文档，更具权威性。

四.总结

至此，关于Vue.js的引入就已经介绍完了，其实安装教程到处都是，不过很多都已经不具时效性了，就跟前端开发技术一样，发展的很快，指不定哪天有冒出来一个流行的框架把之前的顶下去了呢。所以，学无止境呐。