安装vue脚手架

一、概念

• npm: Nodejs下的包管理器。
• webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。
• vue-cli: 用户生成Vue工程模板。（帮你快速开始一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库，只需要 npm install就可以安装）

二、NPM安装

1、下载npm软件，https://nodejs.org/en/.

2.下载完成之后，双击进行安装，一路默认即可。

三、了解NPM常用命令

• 查看环境变量：echo %PATH%
  

• 查看node版本： node -v
  

• 查看npm版本： npm -v
  

• 查看npm的本地仓库： npm list –global
  

• 修改npm的本地仓库：
  npm的本地仓库跑在系统盘c盘的用户目录了(没见到npm-cache是因为没有用过，一使用缓存目录就生成了)，我们试图把这2个目录移动回到D:\nodejs
  
  首先，在 D:\nodejs 中建立node_cache和node_global文件夹
  
  然后，在命令框中输入以下命令：
  npm config set prefix “D:\nodejs\node_global”
  npm config set cache “D:\nodejs\node_cache”
  

四、在NPM中安装插件

1.配置淘宝 NPM 镜像

国内直接使用 npm 的官方镜像非常慢，这里推荐使用淘宝 NPM 镜像。
输入命令：npm config set registry=https://registry.npm.taobao.org 安装镜像
输入命令：npm config list 显示所有配置信息

2.检查镜像站行不行

方法一：输入命令 npm config get registry

方法二：输入命令 npm info vue看是否能获取到vue的信息

3.安装更新模块

输入命令：npm install npm –g
其中，npm install代表安装更新， 第二个npm是指的模块名字，-g代表安装到global目录下

4.查看npm版本是否升级成功

输入命令：npm -v

五、配置VUE

1.配置PATH和NODE_PATH

• 修改path: D:\nodejs\node_global;

• 新增NODE_PATH：D:\nodejs\node_global\node_modules

2.配置vue

3. 配置 vue-router

输入命令：npm install vue-router -g

4.安装vue脚手架

为了方便可视化创建vue项目，我们安装最新版本的vue-cli
输入命令：npm install @vue/cli -g

5.修改环境变量

6.查看脚手架版本

六、初始化vue 项目

1.切换到d盘根目录

依次输入：
npm i -g @vue/cli-init
vue init webpack vue01

2.进入目录vue01，输入命令：npm run dev，得到如下：

3.如果想要显示可视化界面，可在命令窗口输入命令：vue ui