vue.js中如何用vue-cli搭建项目

今天我们来介绍一下，如何用vue-cli搭建项目模板

第一、 安装 node.js

首先需要安装node环境，可以直接到中文官网http://nodejs.cn/下载安装包。

安装完成后，可以令行工具中输入 node -v 和 npm -v，如果能显示出版本号，就说明安装成功。

第二、安装 vue-cli

安装好了 node，我们可以直接全局安装 vue-cli：

npm install -g vue-cli

但是这种安装方式比较慢，推荐使用国内镜像来安装，所以我们先设置 cnpm： 

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

如果安装失败，可以使用 npm cache clean 清理缓存，然后再重新安装。后面的安装过程中，如有安装失败的情况，也需要先清理缓存 

然后使用 cnpm 安装 vue-cli 和 webpack

cnpm install -g vue-cli

最新的 vue 项目模板中，都带有 webpack 插件，所以这里可以不安装 webpack 

安装完成后，可以使用 vue -V （注意 V 大写）查看是否安装成功。

第三、生成项目

首先需要在命令行中进入到项目目录，然后输入：

vue init webpack Vue-Project

其中 webpack 是模板名称 

Vue-Project 是自定义的项目名称，命令执行之后，会在当前目录生成一个以该名称命名的项目文件夹

配置完成后，可以看到目录下多出了一个项目文件夹，里面就是 vue-cli 创建的一个基于 webpack 的 vue.js 项目

第四.然后进入项目目录（cd Vue-Project），使用 cnpm 安装依赖

cnpm install

第五.然后启动项目

npm run dev

项目运行成功后，浏览器会自动打开localhost:8080（如果浏览器没有自动打开，可以手动输入）。运行成功后，会看到如下所