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

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

通过几个月的学习和实战，基本理清了Vue1 + VueRouter1 + browserify 的一些技术点。并且通过几个实际项目的工作，已经验证了自己利用该技术完成项目是没有问题的了。

但是，现在主流的打包方式已经变成了webpack 了，而在guthub 上面找的很多插件在browserify 上打包可能会出现错误，以至于需要自己造轮子。因此，我用了几天时间来捣鼓webpack 。

更重要的是，vue和VueRouter都已经升级到2.x的版本了。我之前基于1.x版本做的那些方法都发生了改变。

因此，我这次从头来写一个系列的博客，把自己遇到的问题和解决方法都记录下来。以便于自己的温习，也方便新手可以快速的上手。

环境准备

首先，要开始工作之前，还是需要把环境搭建好。我这里的环境是mac，如果你是windows，请自己确保环境没有问题。

mac+nodejs+npm 环境是必备的。另外需要文本编辑器，我使用的是atom ，当然，你可以使用sublime 或者其他的，都没有关系。只是，nodejs是必须要安装的。

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

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

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

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

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

vue-cil构建项目

vue-cil是vu e的脚手架工具。其模板可以通过  vuejs-templates  来查看。

我们首先，需要安装vue-cil。命 令如下：

$ npm install -g vue-cli

上面代码中的 $ 为终端前缀，不是让你输入的。下面涉及到终端的部分均是如此，不再累述。

这个命令只需要运行一次就可以了。安装上之后，以后就不用安装了。

下面，我们来用vue-cil构建一个项目。

首先，我们在终端中把当前目录定位到你准备存放项目的地方。如我是准备放在~/Sites/MyWork/这 个目录下面，那么我的命令如下：

$ cd ~ /Sites/ MyWork

进入到目录之后，我们按照下面的代码逐条输入，新建一个自己的vue 项目

$ vue init webpack vuedemo

输入这个命令之后，会出现一些提示，是什么不用管，一直按回车即可。

如上图所示，就说明我们的项目构建成功了。并且，给出了下面要执行的命令，我们来逐条执行：

$ cd vuedemo $ npm install

执行npm install 需要一点时间，因为会从服务器上下载代码啦之类的。并且在执行过程中会有一些警告信息。不用管，等着就是了。如果长时间没有响应，就ctrl+c 停止掉，然后再执行一次即可。如果还是照样，建议检查是不是因为没有翻墙的原因，或者，把npm源换成国内的，这里我就不说这么弄了，具体去问google 。

安装完成后，终端如图：

最后，执行下面一句，把项目跑起来

$ npm run dev

执行后，终端如图：

如上：四行命令，就可以把一个名为vuedemo的项目 跑起来。当然，这个名字你是可以随便起的，根据你的实际项目来定。

好，通过上面的这些命令，我们就实现了新建一个vue+webpack的 项目。在运行了npm run dev 之后，会自动打开一个浏览器窗口，就可以看到实际的效果了。

好，我们的第一步，已经顺利完成了。

小结

通过上面的几个命令，我们就可以把项目跑起来了。问题是，我们需要掌握一些知识点，我提出来，看官自己找资料学习：

1. 什么是nodejs? nodejs有哪些用处？
2. 什么是npm? npm如何安装软件？
3. 什么是webpack? 它有什么优缺点？
4. 终端的基本使用。

我是强烈建议学习前端的同学整mac学习，但是如果你实在没有mac也没有关系，可以使用 Linux系统来学习。如果你又不用linux，那么没办法了，可以使用windows。但是windows下面的cmd工具实在是太操蛋了。我相信大家在windows上一定安装了一款软件叫 Git。OK，只要有这个也行，在任意文件夹右击菜单，在菜单中点击git bash here 菜单，然后可以打开一个类似于终端的面板，这里支持一些linux的常用的命令，包括vim工具都有。虽然界面是丑了点，但是比cmd要好用。