初识vue（2）——如何搭建脚手架项目

  今天尝试搭建vue脚手架项目，总结一下过程，方便以后使用。

1、安装vue-cli

可以用npm或者cnpm安装，这里我用的是cnpm：

利用淘宝镜像安装cnpm：

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

安装完成后，可以查看当前cnpm版本：

cnpm -v

全局安装 vue-cli（这个命令只需要运行一次，安装后，以后不用再安装）：

cnpm install -g vue-cli

2、使用vue-cli创建基于 webpack 模板的脚手架项目

创建项目——方式一（如果使用下面代码，应先cd到你要保存项目的文件夹，然后创建）：

vue init webpack 

创建项目——方式二（如果使用下面代码，在你cmd的文件夹中将生成以vue_demo命名的文件夹，创建的项目都在该文件夹中。）：

vue init webpack vue_demo

这里我用的是第二种。如下图所示，第一个是让你输入项目名称，其它的根据自己需要自行考虑yes还是no。

创建完成后 vue_demo 文件夹内会有如下文件：

安装项目所需要的依赖：
先cd到项目文件夹，然后安装项目所需要的依赖

cnpm install

运行项目：

cnpm run dev

在浏览器中输入 http://localhost:8080 便得到运行后的项目，如下图所示：

如此脚手架项目便搭建完成了。