Vue环境安装以及配置
这里写目录标题
前言
Vue.js 是一款非常流行的渐进式 JavaScript 框架，尤其适用于构建单页面应用程序（SPA）。本文将详细介绍如何在本地环境中安装 Vue 3 及其依赖项，并进行基本的项目配置。
一、前置要求
1.安装Node.js
在安装 Vue 3 之前，需要确保以下软件已经安装在你的电脑上：
-
Node.js 和 npm：Vue.js 依赖于 Node.js 和 npm 来管理项目的依赖包。你可以通过cmd命令行检查是否已经安装：
node -v npm -v
如果没有安装，请前往node.js官网 下载并安装最新版的 Node.js，它会自动安装 npm。
默认安装是c盘，可自行修改
然后一直下一步就行了。
2. 安装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 开发之旅！如果有任何问题，欢迎讨论和补充！
原文地址：https://blog.csdn.net/weixin_61885496/article/details/142891517
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！