要用vue必须要先安装nodejs

nodejs的安装及环境配置

1.下载安装包

下载地址：

https://nodejs.org/zh-cn/download/

2.安装程序

下载完成后，双击安装包开始安装

①点击next

②点同意、next

③默认路径是C:\Program Files\nodejs\，可修改

④根据自己的需要进行选择，我选的默认，之后点next

• Node.js runtime ：表示运行环境
• npm package manager：表示npm包管理器
• online documentation shortcuts ：在线文档快捷方式
• Add to PATH：添加到环境变量

⑤这个不勾选，直接next即可

这句话的意思是：自动安装必要的工具。请注意，这也将安装Chocolatey。安装完成后，脚本将在新窗回中弹出。

⑥install安装

⑦finish完成安装

⑧查看系统变量发现.msi格式的安装包已经将node启动程序添加到系统环境变量path中

查看

打开cmd窗口，输入 node -v 查看node版本

输入 npm -v 查看npm版本

3.环境配置

①打开安装的目录，在安装目录下新建两个文件夹：node_cache和node_global

②用管理员身份运行cmd窗口

输入 npm config set prefix “你的安装目录\node_global” 和 npm config set cache “你的安装目录\node_cache” 命令，将npm的全局模块目录和缓存目录配置到我们刚才创建的那两个目录

npm config set prefix "D:\Program Files\nodejs\node_global"npm config set cache "D:\Program Files\nodejs\node_cache"

③配置环境变量

系统属性–高级–环境变量

在系统变量中新建 变量名：NODE_PATH 变量值：D:\Program Files\nodejs\node_global\node_modules

编辑lenovo的用户变量中的Path，将默认的C盘下的AppData\Roaming\npm修改成D:\Program Files\nodejs\node_global，点击确定

在系统变量的Path中添加NODE_PATH，点击确定

4.测试

配置完成后安装一个module测试下，打开cmd窗口，输入一下命令进行模块的全局安装

npm install express -g   // -g是全局安装的意思

5.修改仓库镜像源地址

查看当前npm仓库镜像地址

npm config get registry

修改仓库镜像地址为淘宝镜像

npm config set registry https://registry.npm.taobao.org/

安装vue

使用管理员命令运行cmd，运行以下命令

这个命令安装好之后是2.9.6版本的，下载最新版本的命令是：npm install -g @vue/cli

如果之前安过，且如果确定可以覆盖现有的文件，可以使用--force参数来强制安装：npm install -g @vue/cli --force

npm install vue -g

出现以下错误就把镜像换为华为源

修改仓库镜像地址为华为源

npm config set registry https://mirrors.huaweicloud.com/repository/npm/

出现下面即安装成功

安装webpack模板

npm install webpack -g

安装webpack-cli

npm install webpack-cli -g

安装脚手架vue-cli

npm install vue-cli -g

输入 vue --version 能看到版本号即成功安装

安装 vue-router

npm install vue-router -g

安装好之后打开 node_modules文件夹，可以看到安装的模块都在这里

浏览器插件安装(在chrome、 Edge 中进行安装)

Edge

打开浏览器的扩展商店

https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home

在搜索框输入Vue Devtools—获取

点击添加扩展

在浏览器中打开一个包含vue的网页，F12打开开发者工具，会看到一个新的Vue选项卡，点击它可以开始调试

chrome

打开chrome的扩展程序（可直接在地址栏输入：chrome://extensions/），需要打开开发者模式

接着呢，点击【加载已解压的扩展程序】选择我们刚刚下载的插件，或者直接将插件拖拽到该区域，----添加扩展程序

插件：

在浏览器中打开一个包含vue的网页，F12打开开发者工具，会看到一个新的Vue选项卡，点击它可以开始调试