进军Vue.js (一) : 如何搭建Vue的开发环境(详细)

前言:

Vue 是目前企业开发很火的一个前端框架,由于最近工作的需求,开发需要使用Vue框架,接下来是我对Vue.js的研究心得~

Vue.js 是什么 (渐进式JavaScript框架)

Vue是一套用于构建用户界面的渐进式框架，与大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代的工具链以及各种支持类库组合使用时，Vue也完全能够为复杂的单页应用提供驱动。

Vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js

Vue 搭建环境准备工作

第一步: Node.js下载与安装

给大家提供一下的Node.js官网下载链接: https://nodejs.org/en/
点击链接下载NodeJS 然后安装，一路点击Next就OK啦!

注意:若中途出现错误信息2503或2502的一般情况下是因为权限不足，我们以管理员身份打开cmd命令窗，然后进入到你安装包所在目录

输入命令：msiexec /i node-v4.4.3-x64.msi
再按照流程安装即可。安装完成后
重新打开cmd命令窗，然后输入 ：node -v 出现版本号，则说明安装成功！

第二步：安装npm工具

由于vue依赖npm工具来管理，所以接下来我们来安装npm
在cmd黑窗口输入命令：
npm install -g cnpm --registry=https://registry.npm.taobao.org

这一步安装时间比较长，需要耐心等会，安装成功后输入：npm -v

如果看到版本号，说明安装成功！

第三步，安装vue-cli脚手架，输入命令：

cnpm install --global vue-cli
回车，然后等待安装，安装结束后，输入命令vue，查看是否安装完成

出现操作提示，则说明安装完成

当上面操作完成后，我们可以建立一个测试项目，检测下是否可以正常使用vue

第一步，先创建一个vue项目，因为vue的相关依赖下载后很大是，所以建议不要放在c盘，可以学eclipse一样，建立一个工作空间，我的工作空间是：D:\HBuilderProject，打开cmd命令窗口，进入到目录下，然后我们开始创建新的项目输入命令：
vue init webpack test
之后就一直回车，直到出现是否要安装vue-route，这个我们在项目要用到，所以就输入y 回车

下面会出现是否需要js语法检测，这个我们暂时用不到，就可以直接输入no，后面的都可以直接输入no，都是我们暂时用不到的

第二步，进入到项目中，因为各个模板之间都是相互依赖的，所以现在我们要安装依赖，输入命令
cnpm install

第三步，我们试运行下，测试我们的工作空间是否可以正常使用，输入运行命令
cnpm run dev

然后我们看到访问地址是：http://localhost:8080/，打开浏览器，输入访问地址，看到页面

好了,Vue的开发环境搭建完美成功!
您的鼓励就是我最大的创作动力！
如果大家觉得这篇博客不错的话,请多多点赞关注哦!
作者:程序猫A建仔
QQ:651405985
博客: https://blog.csdn.net/weixin_44504146