如何运行一个Vue项目

如何运行一个Vue项目

一开始刚接手项目内的vue.js，或者在GitHub上找到vue.js的开源项目，会发现不知如何运行这个项目。通过查阅网上教程，成功搭建好项目环境，同时对前段工程化有了朦朦胧胧的认知，因此将环境搭建过程分享给大家。

1. 环境安装

首先，列出来我们需要的东西：

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

安装node.js

从node.js官网下载并安装node，安装过程很简单，一路“下一步”就可以了（傻瓜式安装）。
安装完成之后，打开命令行工具，输入 node -v，如下图，如果出现相应的版本号，则说明安装成功。

npm包管理器直接集成在node中的，所以，不需要额外安装，输入 npm -v就会如下图所示，显示出npm的版本信息。

由于有些npm有些资源被屏蔽或者是国外资源的原因，经常会导致用npm安装依赖包的时候非常慢，甚至会失败，所有我还需要npm的国内镜像—cnpm。

安装cnpm

在命令行中输入 npm install -g cnpm --registry=http://registry.npm.taobao.org，然后等待，安装完成。

安装webpack（可选）

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。

npm install webpack -g

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

在命令行中运行命令 cnpm install -g vue-cli ，然后等待安装完成。(这里使用cnpm来替代npm，以加快速度)

2. 运行项目

从项目的根目录打开cmd

进入项目之后安装依赖

npm install安装项目依赖

安装完成之后项目里面多了一个文件夹

然后运行npm run dev

复制地址到浏览器就可以打开了。