Vue安装详细步骤及配置的环境

一、安装node js

下载地址：http://nodejs.cn/download/

二、安装完成后需配置环境

node安装完成后，打开node安装后的文件并复制其路径，到环境变量 -> 系统变量->Path下，新建粘贴其路径，如下图：

配置完成后检查是否安装成功 node -v npm -v

三、配置npm在安装全局模块时的路径和缓存cache的路径

​ 在node 路径里新建两个空文件夹node_cache和node_global。最好在系统环境下

npm config set prefix "C:\Program Files\nodejs\node_global"

npm config set cache "C:\Program Files\nodejs\node_cache"

执行成功后，然后在环境变量 -> 系统变量中新建一个变量名为 “NODE_PATH”， 值为“C:\Program Files\nodejs\node_modules”，如下图：

接着改 用户变量->Path，新建值为：“C:\Program Files\nodejs\node_global”如下图：

四、安装淘宝镜像

在系统环境下安装淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

五、安装vue脚手架

cnpm install -g vue-cli

安装成功后，输入vue --version 查看版本

先来欣赏一下：

欣赏完了，开撸~~

Vue开发环境配置

包括：

Node.js

• Node.js 就是运行在服务端的 JavaScript。
• Node.js 的包管理器 npm，是全球最大的开源库生态系统。
• 简单地说，Vue的开发和运行**（Vue组件：.vue后缀）**需要用到Node.js环境。

Vue

• 安装完Vue才能安装Vue-CLI，Vue-CLI可能依赖Vue。

Vue-CLI（Vue脚手架）

• vue cli 是一个基于 Vue.js 进行快速开发的完整系统（标准化开发工具/平台）。
• vue-cli 提供一个官方命令行工具，可用于快速搭建大型应用。
• 该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。
• 只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。

1、Node.js

1.1 Node.js 下载

下载地址：Nodejs官网下载。

• 根据自己的系统选择对应的版本和位数，我这里选择windows-64位。

• 如果想下载历史版本，可以下滑找到：

• 下载完成，会得到这样一个文件

1.2 Node.js 安装

• 右键–选择安装–点击Next。

• 打钩–点击Next。

• 点击Change可以修改安装位置–点击Next。
• 建议所有的开发环境都放在一个统一的文件夹下，方便管理。

• 保持默认即可。点击Next。

• 点击Next即可。
• 解释说明
  • 一些NPM模块在安装时需要从C/C++编译。如果您希望能够安装这些模块，则需要安装一些工具(Python和VisualStudioBuildTools)，打上勾则安装这些工具。
  • 如果不安装，则后期可以通过：https://github.com/nodejs/node-gyp#on-windows自行进行安装。

• 点击Install进行安装。

• 等待安装完成，点击Finish即可完成安装。

安装完成后，可以简单地检查一下Nodejs是否安装成功。

• 按住windows键和R键，调出运行窗口，输入cmd，按回车（Enter）。

• 输入node -v 显示node.js的版本号，说明node.js安装成功；
• 输入npm -v 显示npm的版本号，说明node.js自带的npm工具也安装成功了。
• 注意 -v 之前有个空格。

1.3 Node.js 配置

安装完的Node.js安装目录的文件如下：

说明：

NPM（节点包管理器）是的NodeJS的包管理器，用于节点插件管理（包括安装，卸载，管理依赖等）。

新版的Node.js已自带npm工具，安装Node.js时会一起安装，npm的作用就是对Node.js依赖的包进行管理，也可以理解为用来安装或卸载Node.js需要装的东西。

1.3.1 其他环境配置（可跳过）

说明：

• 这里的环境配置主要配置的是npm安装的全局模块所在的路径，以及缓存cache的路径，
• 之所以要配置，是因为以后在执行类似：npm install express [-g] （后面的可选参数-g，g代表global全局安装的意思）的安装语句时，
• 会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中，占C盘空间。

1、创建新文件夹

例如：

我在Node.js安装目录下创建node_cache和node_global两个文件夹，用于存放缓存和全局模块，方便统一管理。如下图：

2、执行命令，设置全局模块和缓存位置

创建完两个文件夹后，windows + R 键，在运行窗口输入cmd，打开命令行窗口。输入如下命令，然后按回车。

npm config set prefix "E:\develop\Nodejs\node_global"
npm config set cache "E:\develop\Nodejs\node_cache"

注意！命令中的路径要改成你自己的。如下：

npm config set prefix "你的全局模块文件夹路径"
npm config set cache "你的缓存文件夹路径"

如图，设置完成后，关闭黑窗口。

3、配置环境变量

• 右键–此电脑–属性。

• 高级系统设置–高级–环境变量。

• 选择上面的用户变量–Path–编辑。

• 选择默认路径–编辑。

• 设置为自己创建的全局模块保存位置–确定。

• 选择系统变量–新建–输入变量名和变量值–确定。

  变量名：NODE_PATH

  变量值：你自己的全局模块存放位置\node_modules

  变量值如：E:\develop\Nodejs\node_global\node_modules

• 然后一路点击确定即可完成配置。

4、测试

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

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

• 如果出现如下图所示的错误，关掉命令行窗口，以管理员的身份再重新运行命令行即可。

• 重新运行，安装成功如下图所示：

• 打开自己配置的全局模块安装目录，即可看到刚刚安装的全局模块。

1.3.2 npm配置国内镜像源：淘宝镜像

node.js的npm源默认是在国外的，国内下载有时候很慢，建议配置国内镜像源。

这里配置的是淘宝的，也可以配置其他的，看自己的个人习惯了。

通过npm方式配置

• 打开命令行窗口（以管理员身份运行），输入以下命令：

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

• 验证：返回所设置的地址，则说明设置成功。

  npm config get registry
  

• 设置成功，如下图所示：
  

1.3.3 安装cnpm

1. 说明：因为谷歌安装插件是从国外服务器下载，受网络影响大，可能出现异常。
2. 所以需要安装cnpm（淘宝的），用于加速下载。
3. 官方网址：http://npm.taobao.org

• 打开命令行窗口（以管理员方式运行），输入以下命令，安装cnpm：

  npm install -g cnpm --registry=https://registry.npm.taobao.org
  

• 验证

  cnpm -v
  

• 出现如下界面，表示安装验证成功：

注：CNPM跟NPM用法完全一致，只是在执行命令时将NPM改为CNPM。

• 之后就可以使用cnpm了：（安装xxx）

  npm install xxx  # npm方式
  cnpm install xxx # cnpm方式
  

---

2、安装Vue

2.1 命令

• 以管理员身份打开命令行窗口，输入如下命令（cnpm方式）：

cnpm install vue -g

如下图：

---

3、安装 Vue-CLI（Vue脚手架）

3.1 安装

• 以管理员身份打开命令行窗口，输入如下命令（cnpm方式）：

cnpm install vue-cli -g

• 如下图：

3.2 验证

• 以管理员身份打开命令行窗口，输入如下命令（cnpm方式）：
• 以下方式二选一，进行验证，注意空格。

vue -V
vue --version

• 如下图：vue-cli 版本号为：2.9.6

3.3 卸载（重装）vue-cli 或 Vue.js

安装新版本或要重装前，需要先把之前安装的版本卸载掉。

• vue-cli（Vue.js） 卸载

  cnpm uninstall vue-cli -g  # 3.0以下版本卸载
  cnpm uninstall -g @vue/cli  # 3.0以上版本卸载
  

• vue-cli（Vue.js） 重装（指定版本号）

  cnpm install -g @vue/cli  # 安装的是最新版
  cnpm install vue-cli@2.9.6  # 指定版本安装【指定版本为3.0以下版本】，其中2.9.6为版本号
  cnpm install -g @vue/cli@3.11.0 # 指定版本安装【指定版本为3.0以上版本】，其中3.11.0为版本号
  

---

4、参考博客

vue-cli指定版本安装

搭建 vue 开发环境: node.js安装+vue脚手架配置

npm配置国内镜像资源+淘宝镜像

本文也参考了一些比较好的博客，参考的博客在文章第四点已列出。

本文有说的不对或者不完善的地方，欢迎批评指正，谢谢。

至此，Vue基本开发环境配置完成，希望能帮助到你，欢迎点赞，评论，转发，收藏。

Hbuilder下uni-app的vue环境配置

下载Hbuilder：Hbuilder下载地址


有Windows和MacOS两个系统可以进行选择（推荐下载APP开发版）
下载完压缩包，解压即可运用该文本编辑器
如果不会安装可以去hbuilder官网看如何操作（因为太简单了，所以就放个下载后操作步骤的链接）下载后操作步骤

配置环境

去uni-app官网上下载：vue环境

全局安装可暂时忽略（因为本博主也没安装全局hhh）
接下来就是：

选择一个版本命令在终端执行（我选的是JavaScript）
在操作过程中如果出现：

直接去gitee下下载uni-preset-vue：

下载地址：uni-preset-vue
或者直接点击gitee就可跳转，进行机器人识别后，就会自动帮你下载

下载完压缩包进行解压：

点开Hbuilderx的文件夹，找到Hbuilder.exe文件，打开：


这里面的内容与该篇博客无关（无聊的时候随手打的h5）

点击uni-preset-vue，选择该文件下的子目录uni-preset-vue-vite（一开始点击的那个uni-preset-vue-vite是父目录）：

将该文件夹拖入Hbuilderx左侧的项目栏中中：

在Hbuilderx中找到运行（最上面），点击运行到终端：


根据你的所需选择需要建立的环境即可
如果和我一样是建立app的环境，可选择内部终端或者外部终端，若选择外部终端会自动下载：

到这里vue环境就下载完成了，这个warm可以暂时不用理