Vue2+VueRouter2+webpack 构建项目实战（一）准备工作

本文转载自 fungLeo大神的博客，本人现在学习vue，仅仅当做笔记。大神链接：http://blog.****.net/fungleo/article/details/53171052

！！！建议大家看一下第三个文章，有几个依赖需要提前下载可以避免不少麻烦，还有就是大家可以看看原帖子，下面的评论可能就是大家遇到的困难，已经有好多朋友遇到过！！！

环境准备

各个系统安装不一样，详情参考：nodejs 官方网站

安装好nodejs 之后，在终端下面输入命令node -v会有版本号出来。就说明安装成功了。输入npm -v也会有版本号出来，就说明，npm也已经安装好了。

有了Nodejs环境，则我们可以开始了。

为了在学习过程中便于查找资料，一定要准备好翻墙工具。至于怎么翻墙我就不说了，因为免费的都不太好用。收费的v*n之类的一般都可以。不过我建议有条件的自己购买一个国外的vps之类的自己搭一个翻墙环境，然后自己用，无论是稳定性还是各个方面都相当不错。

最后，不要相信百度，坑死你。

vue-cil构建项目

这个我参考的是用的淘宝镜像，很快！

1.安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html)

2.基于node.js,利用淘宝npm镜像安装相关依赖

 在cmd里直接输入：npm install -g cnpm --registry=https://registry.npm.taobao.org，回车，等待安装...

3.安装全局vue-cli脚手架,用于帮助搭建所需的模板框架

在cmd里 1)输入：cnpm install -g vue-cli，回车，等待安装...

            2).输入：vue，回车，若出现vue信息说明表示成功

4.创建项目

在cmd里输入：vue init webpack vue_test(项目文件夹名)，回车，等待一小会儿，依次出现‘git’下的项，可按下图操作

5.安装依赖

在cmd里  1).输入：cd vue_test（项目名），回车，进入到具体项目文件夹

             2).输入：cnpm install，回车，等待一小会儿

回到项目文件夹，会发现项目结构里，多了一个node_modules文件夹（该文件里的内容就是之前安装的依赖）

基于脚手架创建的默认项目结构如下图所示：

6.测试环境是否搭建成功

方法1：在cmd里输入：cnpm run dev

方法2：在浏览里输入：localhost:8080(默认端口为8080)

运行起来后的效果如下图所示：