Vue基础环境搭建

1. 下载安装node.js

vue的运行是要依赖于node的npm的管理工具来实现，node可以在官网或者中文网里面下载.官网地址

安装完成后，check是否安装成功：

node -v

如果成功，会显示如下：

node -v

2. 淘宝的cnpm命令管理工具代替默认的npm管理工具

由于在国内使用npm是非常慢的，所以在这里我们推荐使用淘宝npm镜像，

sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

3. 安装vue-cli

cnpm安装成功之后，我们就可以全局使用vue-cli脚手架了，输入command安装，

sudo cnpm install --global vue-cli

---

截止到目前vue的环境就算搭建完成了。如果不需要新建vue项目，而是从其它地方clone Vue项目的话，到这里就能正常使用基础命令了。（无非就是install、run 等操作）

4. 初始化一个vue项目

vue init webpack my-project

这里新建的项目是基于webpack的项目，项目名称：my-project.接下来会提示输入些项目配置信息，各位可自行选择。

5. 下载项目依赖

因为各个模板之间都是相互依赖的，所以现在我们要安装依赖，进入项目根目录，执行下面的命令：

cnpm install

6. 运行项目

测试一下我们下载好的模板能不能正常的运行，输入下面命令：

cnpm run dev

根据提示，在浏览器中访问测试地址，

run

输入:http://localhost:8080出现欢迎页：

welcome

---

附加：

什么是webpack
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用

为什么要用webpack
今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法。
a:模块化，让我们可以把复杂的程序细化为小的文件;

b:类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能能装换为JavaScript文件使浏览器可以识别；

c:scss，less等CSS预处理器
.........
这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的，这就为WebPack类的工具的出现提供了需求。