npm安装vue_新手搭建vue环境和搭建vue项目

第一步：安装node

1.前端开发框架和环境都是需要 Node.js ，先安装node.js开发环境，vue的运行是要依赖于node的npm的管理工具来实现

从node.js官网下载并安装node，Windows 安装包(.msi)

32 位安装包下载地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x86.msi

64 位安装包下载地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x64.msi

2.检查是否安装成功

快捷键WIN+R 打开cmd，输入 node -v ，回车，查看node版本号，出现版本号则说明安装成功。（以管理员身份运行cmd，右击选择管理员身份)

第二步：安装淘宝npm镜像

1.由于npm是国外的，使用起来比较慢，我们这里使用淘宝的cnpm镜像来安装vue.

淘宝的cnpm命令管理工具可以代替默认的npm管理工具。

输入命令：npm install -g cnpm --registry=https://registry.npm.taobao.org

2.检查是否安装成功

输入 cnpm -v，如下图，如果出现相应的版本号，则说明安装成功。

第三步：安装webpack

1.输入命令：cnpm install webpack-cli -g

2. 检查是否安装成功

输入webpack -v，如下图，如果出现相应的版本号，则说明安装成功。

第四部：安装vue-cli脚手架构建工具

1.输入命令cnpm install vue-cli -g

2.检查是否安装成功

输入 vue -V（注意这里是大写的“V”），如下图，如果出现相应的版本号，则说明安装成功。

以上这些安装成功后，就可以搭建vue项目

第五部：搭建vue项目

1.在e盘新建一个项目，先用e:的命令，按回车键进入e盘

输入e: 按回车键进入e盘，如下图

2.初始化一个vue项目

输入vue init webpack myvue (注意项目不能有大写字母)

如下图，搭建成功

3.运行项目

首先切换到项目位置，输入： cd myvue，然后输入 npm run dev

4创建项目创建成功，如下图:

浏览器访问http://localhost:8082/ 如下图，项目搭建成功。

第六步，安装依赖包

1.退出快捷键：ctrl+c

输入命令：cnpm install

2.目录文件解释

用sublime打开myvue项目，如下：

---

快捷键

打开cmd：win+r

终止运行：ctrl+c

返回上一级：cd..

切换哪个盘：e: d:

文件位置：cd +文件名

---

参考文献

vue官网：https://cn.vuejs.org/v2/guide/

Vue2.0史上最全入坑教程（上）—— 搭建Vue脚手架（vue-cli）

使用npm安装一些包失败了的看过来（npm国内镜像介绍） - CNode技术社区

The CLI moved into a separate package: webpack-cli.解决办法

webpack的安装与环境配置 - CSDN博客

vue.js 三种方式安装 - CSDN博客