如何运行Vue项目

技多不压身，也刚好最近工作需要，进军前端Vue领域，以此做一个自我学习记录（工作所迫）。

工欲善其事，必先利其器。首先需要环境：

   1.node.js环境（npm包管理器）

   2.Vue-cli 脚手架构建工具

   3.cnpm  npm的淘宝镜像

 

安装node.js

从node.js官网下载并安装node，安装过程很简单，一路“下一步”就可以了，若版本不同可以问度娘。

安装成功，文件夹结构如下，并在上面安装过程中已自动配置了环境变量和安装好了npm包，此时可以执行 node -v 和 npm -v 分别查看node和npm的版本号：

 

OK！node环境已经安装完成，npm包管理器也有了。由于有些npm有些资源被屏蔽或者是国外资源的原因，经常会导致用npm安装依赖包的时候失败，所有我还需要npm的国内镜像---cnpm。

安装cnpm

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

 

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

在命令行中运行命令 cnpm install -g vue-cli ，然后等待安装完成。(注意，这里使用cnpm来替代npm，不然速度超级慢，会导致卡在那)

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

npm路径设置

设置npm的默认安装路径，和缓存路径
// 设置npm安装程序时的默认位置
npm config set prefix "D:\Program Files\nodejs\X64\node_global"
// 设置npm安装程序时的缓存位置
npm config set cache "D:\Program Files\nodejs\X64\node_cache"
然后在把D:\Program Files\nodejs\X64\node_global\node_modules路径添加到环境变量PATH中。

 

安装webpack和vue-cli脚手架

在命令行中执行下列两个命令，进行安装。

npm install webpack -g

npm install vue-cli -g

vue项目测试

1、打开命令行，进入到希望创建vue测试项目的路径，然后在命令行中执行下列命令，进行项目创建。

vue init webpack vue_test //其中vue_test为项目名称

 

 

2、在命令行中进入到项目路径，然后执行npm install命令，安装项目需要的依赖。

3、然后执行npm run dev命令，运行项目。

4. 浏览器访问 http://localhost:8080