最近，vue.js越来越受欢迎。在这么大的浪潮下，我也开始进入vue学习的行列，在网上搜索了很多教程。如果跟着教程走，总会出现这样的问题(坑，因为网上所有的教程都是Vue.js 1 . x版本，现在使用vue . js的构建工具都升级到2.0版本了)。经过一段时间的探索和观看官方教程和API，我学会了2。不要说太多废话。我来说说我在这里踩过的坑，希望对初学者有帮助。Ps:师傅，请绕道走。

既然是入门的例子，那就必须从基础做起。希望初学者耐心观看。首先，列出我们需要的东西：

Node.js环境(npm包管理器)

Vue-cli脚手架施工工具

cnpm npm淘宝形象

安装node.js

从node.js官网下载安装node。安装过程非常简单，可以一直进行到下一步(傻瓜安装)。安装完成后，打开命令行工具并输入node -v，如下所示。如果出现相应的版本号，则安装成功。

npm包管理器集成在节点中，直接输入npm -v会显示npm的版本信息，如下图所示。

好的！节点环境已经安装，npm包管理器已经安装。因为一些npm资源被屏蔽或者因为国外的资源，用npm安装依赖包经常会失败，所以我需要npm - cnpm的国内形象。

安装cnpm

在命令行上，输入npminstall-gcnpm-registry=http://registry.npm.taobao.org，然后等待。安装完成，如下所示。

之后，我们可以用cnpm代替npm来安装依赖包。如果你想了解更多关于cnpm的信息，可以查看淘宝npm镜像官网。

安装vue-cli脚手架搭建工具

在命令行上运行命令npm install -g vue-cli，并等待安装完成。通过以上三个部分，我们需要准备的环境和工具都准备好了，然后我们开始使用vue-cli构建项目。要使用vue-cli构建项目，我们必须首先选择目录，然后在命令行中将目录转移到所选目录。在这里，我选择了桌面来存储新的项目，所以我们需要先将目录cd到桌面上，如下图所示。

在桌面目录下，在命令行上运行命令vue init webpack firstVue。解释这个命令，意思是初始化一个项目，其中webpack是构建工具，也就是说整个项目都是基于webpack的。FirstVue是整个项目文件夹的名称，会在你指定的目录下自动生成(在我的情况下，会在桌面上生成)，如下图所示。

运行初始化命令时，让用户输入几个基本选项，如项目名称、描述、作者等信息。如果不想填写，默认按回车即可。

打开firstVue文件夹，项目文件如下所示。

这是整个项目的目录结构，其中我们主要对src目录进行修改。这个项目只是一个结构框架，整个项目所需的依赖资源还没有安装，如下图所示。

要安装项目所需的依赖项，首先将cd刻录到项目文件夹(firstVue文件夹)，然后运行命令cnpm install等待安装。

安装完成后，在我们项目目录的firstVue文件夹中会有一个额外的node_modules文件夹，我们项目所需的依赖包资源就在这个文件夹中。

安装依赖包后，可以运行整个项目。在项目目录中运行项目，并运行命令npm run dev，它将以热加载的方式运行我们的应用程序。热加载让我们可以实时看到修改后的效果，无需在修改代码后手动刷新浏览器。

这里简单介绍了npm run dev命令，其中“run”对应于package.json文件的scripts字段中的dev，这是node build/dev-server.js命令的快捷方式。项目运行成功后，浏览器会自动打开localhost:8080(如果浏览器没有自动打开，可以手动输入)。运行成功后，会看到如下界面。

如果你看到这一页，你可以开香槟庆祝。恭喜，项目已经成功运行。今天就到这里。下次再和大家分享进一步的小案例，让大家加深对Vue.js的理解