Windows系统下安装vue

三个概念

• npm：Nodejs下的包管理器。
• webpack：它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。
• vue-cli：用户生成Vue工程模板。

 

---

 

一。下载安装node

Node.js官网  https://nodejs.org/en/

本次安装目录为D:\nodejs。安装后目录如下：

 

1. 检查安装是否正常

进入cmd输入指令 echo %PATH% ，如果已经存在nodejs的安装路径，则安装正常。还可以查看node的版本( node -v )和npm的版本( npm -v )

 

 

2. 创建npm本地仓库

在nodejs目录下新建两个目录： node_cache  和  node_global 

 

 

然后运行以下2条命令

npm config set prefix “D:\nodejs\node_global”

npm config set cache “D:\nodejs\node_cache”

再运行  npm list -global  查看目录，可以看到目录已经改变了，目前为空。

注意：安装后可能提示node或npm或vue不是内部或外部命令，也不是可运行的程序或批处理文件，关掉cmd命令行重新打开即可

3. 配置镜像站

输入命令  npm config set registry=http://registry.npm.taobao.org ，配置一个镜像站，提升速度。

输入命令  npm config list  显示所有配置信息：

 

 

检查一下镜像站行不行： npm config get registry 

看看能否获得vue的信息： npm info vue 

 

 

4.下载模块

输入指令  npm install npm -g  升级npm模块。

再次查看global里面有什么模块： npm list -global  ，发现已经不为空了。

 

 

二。安装vue

npm安装vue.js： npm install vue -g 

npm安装vue-router： npm install vue-router -g 

安装vue脚手架： npm install vue-cli -g 

1. 查看vue

输入vue指令会提示 vue’ 不是内部或外部命令，也不是可运行的程序或批处理文件，原因是vue脚本不在path环境变量中，在自定义的global目录下。
所以打开环境变量编辑系统变量path，添加一个  D:\nodejs\node_global  ：

 

 

重新查看  vue  和  vue -V  ：

 

 

2. 使用vue-cli搭建项目

进入到D盘，切换到想要存放项目的根目录，使用  vue init webpack vue01  指令搭建项目：（vue01为自定义的项目名）

 

 

出现黄色的两条指令说明搭建成功了：

 

 

按照指令提示，进入项目目录  cd vue01  ，安装npm  npm install   ：

 

 

成功后使用指令  npm run dev  来运行vue项目：

 

 

出现 http://localhost:8080 说明运行成功。进入这个网址就可看到自己的项目了。