vue环境搭建过程记录

写在前面

最近辞职了，忙着找工作一直没有时间更新一下自己的博客，但是学习还是不敢停滞的，毕竟祖国尚未强大，作为同志的我还是需要努力的，嗯，其实一直在学习vue啊，只是一直觉得没学到精髓，只是学到一些皮毛，之前自己也尝试的写过vue的一些文章，但是其实我也是自己摸索的看，不是特别的理解其中的设计思想，所以怕误人子弟，就把之前写的vue的几篇文章删除了，那么今天我会把关于vue的一些知识更新一下，目的有两个：第一记录一下自己学习的一个进度，催促一下自己的学习，第二是让更多的看一下，鄙人能力有限，在做的大佬颇多，希望有一些vue或者react的大佬可以指点一二，小弟内心无比感激！ok，废话不说，it's show time......

今天主要是讲一下vue的环境搭建，目的两个：第一简单的说一下搭建的过程和注意的事项，第二说一下和我们常见的框架有哪些不同，优势在哪里！

正所谓“工欲善其事必先利其器”，一个好的编辑软件对于vue来说还是很重要的，毕竟这是一个需要启动的渐进式框架，那么我这里使用的是webstrom，下面我会说使用它的优势。我们分两部分说，第一部分说搭建的过程，第二部分说vue的一些优势。

第一部分：环境搭建

既然是使用vue自然需要将其安装一下：

vue官网

我这里是直接看官网学习的，不喜欢看我的文章的也可以点击上一行的vue官网字样看官网的讲解，都是一样的。这里我选择的是npm安装vue，当然你可以使用别的安装文件安装它，都无所谓，这里使用npm的原因是npm可以很好的和webpack这样的打包工具一起使用，对我们后面的使用会很方便。

第一步：

npm install -g vue-cli

PS：

1、这里我的有警告和安装的包不多都没事，因为我之前是安装过的，所以这里只是更新一下包文件，你们安装的时候应该是都是全新的，。

2、这里经常用npm的人会问你为什么不升级npm为cnpm啊，这里解释一下，cnpm呢是淘宝镜像也就是他利用中国的网络进行操作npm的操作，这样速度是快很多，你喜欢的话，可以使用，我没有升级是因为我觉得npm速度也还行！喜欢升级的话也可以，直接写下面的代码就行了！

npm install cnpm -g

第二步：

全局安装脚手架以后呢我们下面要进行的就是怎么初始化一个项目出来，切换到我们项目的文件夹下面

vue init webpack my-project

看截图： 

这里简单的进行解释一下：

首先我们切换到对应的项目文件夹下面，然后直接初始化自己的项目

Project name 项目名字

Project description 项目描述

Author  作者

Vue build vue构建  standalone 电脑单机

Install vue-router?  是否安装路由    这里很多人直接就安装了，其实如果你vue很熟悉了，可以直接安装，但是这个后面是可以再安装的，我建议初学者不要直接安装！

Use ESLint to lint your code?     是不是使用ESlint来限制你的代码，什么意思呢？说人话就是如果你安装了，那么你写的代码必须一个空格都不可以错，一个换行也不能错，所以不建议安装， 我第一次不知道，安装了，结果我觉得vue是世界上最严格的语言......你们自己看着办！

Set up unit tests   是不是安装单元测试，这个我们是写代码的，不是测试人员，不用安装

Setup e2e tests with Nightwatch?  是不是安装什么e2e测试啊，这个其实也是测试人员使用的，我们也不用安装！

 Should we run `npm install` for you after the project has been created? (recommended) npm   他问你之后的项目创建是不是使用npm呢？会给你一下选项，当然你的电脑安装的还有别的不是基于nodejs的也可以选择别的安装方式，这里我就安装了一个npm，就使用这个！

最后创建结束！

第三步：

切换到自己的项目下面，启动项目

npm run dev

看到这个界面说明你安装成功了！没有成功的可以看一下前面的步骤是不是哪一步走的姿势不对，重新摆正一下姿势再来一次，没事就走两步，就搞定了！

 下面说一下怎么用webstrom进行这个项目的使用

首先我们打开刚才的项目：

他有一个npm的安装台，和一个Terminal的安装台，我们可以世界在这里进行相应的安装和卸载运行的操作

导进来项目第一步我们要先进行install一下

这里黄色的不是什么羞羞的见不得人的东西啊，只是我把警告的框调成黄色了，他默认的警告是加黄色背景的，导致看不到是什么东西了，切莫用你那邪恶的思想看这三行警告！

这里我们把dos框停掉，在这里运行它

 我们这里点击链接是一样的结果，这里就截图结果了，和之前的一样，喜欢看的，网上翻翻！

第二部分：简单的说一下vue的优势

很多公司喜欢用react，这个不否认react有自己的优势，我这里没有学习react，不做太多的评价，但是据我所知呢，react和vue的差异在于vue是一个渐进式框架，react不是，很多人不理解这点算不算优势啊，下面我解释一下，什么是渐进式框架！

其实渐进式框架本身是很有优势的，所谓的渐进式框架就是说你可以不完全的使用它，使用它的某一个功能也是可以的，直接js引用他也是可以的，这样有一个很好的地方就是如果你的项目已经基本做的差不多了，有些地方用vue处理比较好的时候你可以直接拿来用，不是说非要全部安装环境，全部走流程，这样会更加的灵活易用，这是很多框架不及的！

还有一点优势就是vue因为比较火，所以对应的UI库也比较多，那么可以解决市面上大多数的UI设计的需求，我个人觉得还是不错的，毕竟响应式我们自己做还是很恶心的，是吧，虽然现在@media使用起来挺好的，解决了响应式的问题，但是让我调试很多不同分辨率下的css我还是觉得是一件恶心的事情，那么UI库就直接帮我们解决了这个头疼的问题！

而且后期我们学习的时候会发现，vue使用UI库的时候是非常的方便的，直接导入两行代码就可以了，再往后学我们会更觉得vue很厉害，他的路由的设计思想简直是做spa的神器，虽然我之前写了一篇文章，关于不用路由做spa页面的例子，其实原理是一样的，vue的路由也是类似于操作锚点也就是我们的hash，这个不多说，以后会更新这块！

写到最后

上述文章码字不易，希望转载的时候可以标明来源地址，鄙人不是大神，只是一个自学vue的小白，写的不妥的地方还望vue的大神多多指点，轻点喷！

有合适的工作也可以推荐一下！谢谢了！哈哈

886