Vue环境安装以及配置

前言

Vue.js 是一款非常流行的渐进式 JavaScript 框架，尤其适用于构建单页面应用程序（SPA）。本文将详细介绍如何在本地环境中安装 Vue 3 及其依赖项，并进行基本的项目配置。

一、前置要求

1.安装Node.js

在安装 Vue 3 之前，需要确保以下软件已经安装在你的电脑上：

1. Node.js 和 npm：Vue.js 依赖于 Node.js 和 npm 来管理项目的依赖包。你可以通过cmd命令行检查是否已经安装：

   node -v
   npm -v
   

   

   如果没有安装，请前往node.js官网 下载并安装最新版的 Node.js，它会自动安装 npm。
   
   

默认安装是c盘，可自行修改

然后一直下一步就行了。

2. 安装VScode

vscode

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

创建两个空文件夹：node_cache和node_global。

创建完之后打开cmd窗口，执行如下命令

将npm的全局模块目录和缓存目录配置到我们刚才创建的那两个目录。

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

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

三、配置环境变量

1.将用户变量最后一行 C:\Users\你的用户名\AppData\Roaming\npm
修改为 你的安装目录\node_global

2.系统变量中新增一个变量
变量名：NODE_PATH
变量值：你的node_global安装目录\node_modules

3.系统变量中的path增加下面三个

%NODE_PATH%

%NODE_PATH%\node_modules

%NODE_PATH%\node_global

四、权限

然后右击我们配置node.js的文件夹点击属性，选中安全
编辑，把所有的权限都打开
注意，那四个组或用户名都看一下把权限都打开

五、npm换源

// 查看 npm 源
npm config get registry
// 默认是指向 https://registry.npmjs.org/，也就是官⽅源

淘宝镜像

npm install -g cnpm --registry=https://registry.npmmirror.com/

华为云镜像

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

验证是否更改成功

npm config get registry

安装yarn或pnpm
yarn和pnpm、还有npm三者的功能类似，都是包管理⼯具，
⽤来下载或删除模块包, 性能上yarn和pnpm优于npm

#安装yarn或pnpm
npm install yarn -g
npm install pnpm -g
#检测是否安装成功
yarn -v
pnpm -v

脚手架安装

npm install -g @vue/cli --force
#安装vue等模块依赖npm i
#启动项目
npm run dev

vue安装

npm install vue -g

六、vscode插件

1. Vue-Offical

◦ 提供 Vue ⽂件的语法⾼亮
◦ ⽀持 Vue ⽂件的智能感知和⾃动完成
◦ 提供了 Vue ⽂件的格式化⼯具

2. Vue 3 Snippets

◦ 提供 Vue 3 相关的代码⽚段，⽅便快速输⼊常⻅代码结构

3. Path Intellisense

◦ 路径⾃动补全

4. Auto Import

◦ ⾃动导⼊插件，可帮助⾃动完成和⾃动导⼊模块

5. Auto Close Tag

◦ ⾃动闭合HTML标签

6. Auto Rename Tag

◦ ⾃动重命名HTML标签。

7.GitLens

◦功能：GitLens增强了Git功能，支持在VSCode中查看作者、修改时间等Git提交信息，对于管理大型Vue项目中的版本控制非常有帮助。

◦使用方式：安装后，可以通过点击代码中的某一行来查看该行的Git提交历史和相关信息。

总结

本文介绍了如何安装和配置 Vue 3 环境，希望这篇教程能够帮助你顺利开始你的 Vue 3 开发之旅！如果有任何问题，欢迎讨论和补充！

---