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，这个不多说，以后会更新这块！