这里写目录标题
- 前言
- 一、前置要求
- 1.安装Node.js
- 2. 安装VScode
- 二、创建全局安装目录和缓存日志目录
- 三、配置环境变量
- 四、权限
- 五、配置镜像
- 六、vscode插件
- 1. Vue-Offical
- 2. Vue 3 Snippets
- 3. Path Intellisense
- 4. Auto Import
- 5. Auto Close Tag
- 6. Auto Rename Tag
- 7.GitLens
- 总结
前言
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
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 install -g cnpm --registry=https://registry.npmmirror.com/
华为云镜像
npm config set registry https://repo.huaweicloud.com/repository/npm/
验证是否更改成功
npm config get registry
脚手架安装
npm install -g @vue/cli --force
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 开发之旅！如果有任何问题，欢迎讨论和补充！
