运行vue项目

一、环境准备

1. node.js环境（npm包管理器）
2. vue-cli 脚手架构建工具
3. cnpm  npm的淘宝镜像

安装Node.js
Node.js安装完成之后，就会自带npm包管理器。
安装cnpm
那cnpm是什么呢？由于有些npm资源是国外资源，经常会导致用npm安装依赖包的时候失败，这时候可以使用npm的国内镜像也就是cnpm。

在命令行中输入

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

然后等待，完成之后，我们就可以用cnpm代替npm来安装依赖包了。
安装vue-cli
在命令行中运行命令 

npm install -g vue-cli

通过以上三个步骤，我们需要准备的环境和工具都准备好了，接下来就开始使用vue-cli来构建项目。

二、用vue-cli构建项目

要创建项目，首先我们要选定目录，然后在命令行中把目录转到选定的目录，我这里用的是C:\myworkspace目录，执行命令：

vue init webpack my-project #创建一个基于 webpack 模板的新项目

初始化执行过程中会让用户输入几个基本的选项，如项目名称，描述，作者等信息，如果不想填直接回车默认就好。
构建好的项目目录结构如下所示：

我们主要在src目录中做修改。初始化的项目还只是一个结构框架，整个项目需要的依赖资源还需要安装，如下图

 

三、安装项目所需的依赖

进入到项目所在的目录，执行以下命令

npm install

安装完成之后，就会在我们的项目中生成一个node_modules文件夹，如上图所示。

四、运行项目

进入到项目所在的目录，执行命令

npm run dev

会用热加载的方式运行我们的应用，让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。
这里的dev对应的是package.json文件中scripts字段中的dev，也就是

webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

的快捷方式。
终端的命令执行过程

项目运行成功后，打开浏览器输入http://localhost:8080。
运行成功后，会看到vue.js的欢迎页面。