VUE安装及环境配置（完整版）

目录

一、VUE框架简介

二、官网下载安装

1.  Node.js下载官网

2. 安装

三、创建全局安装目录和缓存日志目录

​四、配置环境变量

4.1  进入环境变量，新建【系统变量】

4.2  【系统变量】中的【Path】下：添加两行

五、配置淘宝镜像

六、安装VUE

6.1  安装VUE

6.2  安装 webpack 模板

6.3  安装脚手架 vue-cil

七、创建并运行项目

7.1  创建VUE项目

7.2  运行项目：

八、说明

---

一、VUE框架简介

        VUE是一套用于构建用户界面的渐进式JavaScript框架。

        渐进式：主张最少（没有强主张），可以在原有的大系统中，把一两个组件改用它实现。渐进式框架也就是说：你可以只用我的一部分，而不是用了我的一部分就必须用我的全部。

        特点：

                1.采用组件化模式，提高代码复用率、且更好维护；

                2.采用声明式编码，让编码人员无需操作DOM，提高开发效率。

                3.使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。

二、官网下载安装

1.  Node.js下载官网

推荐直接下载最新版本。

2. 安装

双击下载的安装包，点击Next，勾选使用许可协议，点击Next，选择安装位置（根据个人需要选择即可）。出现这个画面，但这个文字的含义是我的电脑已经安装过Node.js，未安装的按照以上步骤进行安装即可。

然后可以测试以下安装是否成功

使用 Win + R 调出电脑 cmd控制台 输入 node -v 和 npm -v 验证是否安装成功。

node -v

npm -v

如果可以成功输出版本号，就说明Node.js安装成功。

三、创建全局安装目录和缓存日志目录

在Node.js安装的目录下创建两个空文件夹node_cache和node_global

打开cmd窗口，执行下面命令，将npm的全局模块目录和缓存陌路配置在刚刚创建的两个目录下：

npm config set prefix "你的安装目录\node_global"

npm config set cache "你的安装目录\node_cache"

四、配置环境变量

4.1  进入环境变量，新建【系统变量】

变量名：NODE_PATH

变量值：安装目录\node_modules

4.2  【系统变量】中的【Path】下：添加两行

%NODE_PATH%\node_modules

%NODE_PATH%\node_global

至此环境变量配置完成。

五、配置淘宝镜像

将npm默认的registry修改为淘宝的registry（改为国内镜像提高下载速度）

以管理员身份运行cmd，安装淘宝镜像cnpm

执行以下命令：

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

检查cnpm配置修改是否成功

cnpm config list

cnpm -v

到此，说明淘宝镜像安装完成。

六、安装VUE

6.1  安装VUE

cnpm install vue -g

npm install -g @vue/cli

验证VUE安装成功

cnpm i webpack webpack-cli webpack-dev-server -g

vue -v

6.2  安装 webpack 模板

官网解释：从本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具。

cnpm i webpack webpack-cli webpack-dev-server -g

6.3  安装脚手架 vue-cil

cnpm install @vue/cli –g

七、创建并运行项目

7.1  创建VUE项目

选择一个文件夹，执行下面的命令：

vue create test 文件名称

可以选择创建Vue2版本或Vue3版本的项目，创建成功则出现下图：

7.2  运行项目：

cd test
npm run serve

如下图运行成功

按Ctrl点击链接即可在浏览器中打开，成功访问网页！

到此，VUE安装和配置结束。期间可能会遇到很多小问题（我第一次配置的时候是遇到了不少，只能说是遇到一个解决一个）

八、说明

本人才疏学浅，VUE也是刚刚开始接触，但已经需要投入实践了，希望有更多的小伙伴一起交流，能找到一些学习的方向就更好了。