展示型网站可以做推广的吗,h5 小米网站模板,深业资本有限公司网站建设,微信公众平台开发者文档这里写目录标题 前言一、前置要求1.安装Node.js2. 安装VScode 二、创建全局安装目录和缓存日志目录三、配置环境变量四、权限五、npm换源六、vscode插件1. Vue-Offical2. Vue 3 Snippets3. Path Intellisense4. Auto Import5. Auto Close Tag6. Auto Rename Tag7.GitLens总结 前… 这里写目录标题 前言一、前置要求1.安装Node.js2. 安装VScode 二、创建全局安装目录和缓存日志目录三、配置环境变量四、权限五、npm换源六、vscode插件1. Vue-Offical2. Vue 3 Snippets3. Path Intellisense4. Auto Import5. Auto Close Tag6. Auto Rename Tag7.GitLens总结 前言
Vue.js 是一款非常流行的渐进式 JavaScript 框架尤其适用于构建单页面应用程序SPA。本文将详细介绍如何在本地环境中安装 Vue 3 及其依赖项并进行基本的项目配置。
一、前置要求
1.安装Node.js
在安装 Vue 3 之前需要确保以下软件已经安装在你的电脑上 Node.js 和 npmVue.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_globalnpm 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 --registryhttps://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 开发之旅如果有任何问题欢迎讨论和补充
