VUE(一)-安装vue-cli2和vue-cli3脚手架并创建项目

一.安装nodejs

1. 进入nodejs官网：http://nodejs.cn/download/                                            
2. 下载后双击安装即可
3. 查看是否安装完成，win+R -> cmd - > 回车 ，输入如下命令    （貌似不用配置环境变量，如果输入如下命令提示“...不是内部命令...”，请配置环境变量）                                                  

 

 二.安装vue-cli2脚手架 

1.了解npm与cnpm

• npm（node package manager）是nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）
• cnpm：因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，所以用淘宝的镜像替代国外服务器。使下载更快。

两种方式二选一即可 

2.npm 方式安装

  指定镜像服务器

   命令"npm -install -g vue-vli" 安装vue-cli脚手架时，因为网络原因（服务器国外的），可能安装失败。我们可通过淘宝镜像安装

方法一 输入命令：npm install -gd express --registry=http://registry.npm.taobao.org 

方法二  1.设置npm的下载位置为淘宝镜像，命令 npm config set registry http://registry.npm.taobao.org

（还原地址：npm config set registry http://registry.npmjs.org） 

             2.npm install -g vue-cli

2.cnpm 方式安装 

2.1 安装cnpm

1. WIN+R -> CMD -> 回车，cnmp -v 查看是否安装，
2. 输入命令 ： npm install -g cnpm --registry=http://registry.npm.taobao.org
3. 安装完成后，输入cnmp -v 测试是否安装成功，如下图所示说明安装成功

2.2 安装vue-cli2

1.  cnmp install -g vue-cli 或者 cnmp install -gd vue-cli(加d，包含开发环境的安装)
2. 查看是否安装完成 vue -V (注意是大写的V)

 

 2.3 创建vue-cli2项目

1. vue init webpack 项目名称（命令全部小写，使用webpack的模板创建），如下图按顺序操作即可

三. 安装vue-cli3脚手架并创建项目

卸载vue-cli2

1.如果安装了vue-cli2，先卸载掉

如果是npm安装的输入命令 npm uni vue-cli -g 进行卸载，如果是cnpm安装的，则输入 cnpm uni vue-cli -g

（如果用 npm uni vue-cli -g 卸载不成功就用cnpm uni vue-cli -g试试，没什么科学依据，试试电脑不会爆炸）

 2.安装vue-cli3

• 普通安装：npm install -g @vue/cli
• 淘宝镜像安装：cnpm install -g @vue/cli 

开始安装（安装失败，清楚缓存试试 npm cache clean --force）

查看是否安装成功 vue -V  (V大写)

3.创建项目 

• 图形界面的方式创建项目

a.启动图形界面 

不进行详述

• 通过命令行创建（主流方式）

a.命令 vue create 项目名称 

后面的选择默认的即可，然后等待