Vue—搭建nodejs环境

1.Vue基本概念和使用

Vue是一个渐进式的前端（JavaScript）框架

渐进式:只使用Vue轻巧的核心库，根据所需引入各种插件

多使用2.X版本，3.X相对较少

官网: https://cn.vuejs.org/

2.Vue-cli安装

验证nodejs环境是否安装，安装好了就跳过2.1

打开黑窗口输入指令：

• node -v
• npm -v

 

2.1Vue-cli介绍

vue-cli是vue的官方脚手架工具（快速工程化命令工具）之一, 用来帮助程序员们快速搭建基于vue框架的开发环境。

网址：cli.vuejs.org/zh/guide

Vue-cli = Vue + 一堆的js插件

• vue-cli 4.5以下，对应的是Vue2

• vue-cli 4.5及以上，对应的是Vue3

2.2搭建nodejs环境

nodejs是javaScript运行环境

1.下载

官网：https://nodejs.org/zh-cn/download/prebuilt-installer

• LTS意为长期维护版，特点是稳定，但有些最新的特性可能没有，建议下载时选择这种版本。
• Current是新特性版本，优点是拥有最新的特性，但可能不稳定，对应一般开发人员，或产品级的项目不建议使用。

注：msi为安装版本，为更好的了解nodejs的配置请下载zip进行手动配置

2.解压

将文件解压到指定位置(例如：C:\Program Files)，并在解压后的目录下建立node_global和node_cache这两个目录

• node_global        npm全局安装位置
• node_cache        npm缓存路径

3 .配置环境变量

环境变量	配置示例
新增NODE_HOME	C:\Program Files\node-v10.16.3-win-x64
修改PATH	在最后添加：;%NODE_HOME%;%NODE_HOME%\node_global;

注意：对于path变量是修改，而不能将以前的变量清除

配置完成后，可以通过以下命令查看配置：

• echo %node_home%
• echo %path%

测试安装是否成功：[见大标题2下]输入黑窗口指令

4.配置npm全局模块路径和cache默认安装位置

cmd，分开执行如下命令：

• npm config set cache "【node_cache路径】"
• npm config set prefix "【node_global路径】"

作用：方便管理，提高系统性能，开发环境中提高团队协作效率......

 5.修改npm镜像提高下载速度

在命令行中执行以下命令，使用淘宝镜像源（这是一种常用的国内镜像源）：

使用 npm config 命令设置：

   npm config set registry=https://registry.npmmirror.com

这将把默认的镜像源设置为淘宝镜像源，以后每次使用 npm 安装包时都会从这个镜像源下载。

编辑 .npmrc 文件：

在你的用户目录下找到 .npmrc 文件（一般在 C:\Users\你的用户名 或者 ~ 目录下），用文本编辑器打开它，添加以下内容：

   registry=https://registry.npmmirror.com

这样就永久修改了 npm 的镜像源，提高下载速度。同时，国内还有其他一些可用的镜像源，如腾讯云镜像源等，你可以根据实际情况选择合适的镜像源进行设置。

检查换源是否成功：

npm config get registry

检查安装结果

node -v
npm -v