文章目录
- [Vue3 简介](#Vue3 简介)
- [一，Node 下载、安装、配置与创建Vue3项目](#一，Node 下载、安装、配置与创建Vue3项目)
-
- （一）下载Node.js
- （二）安装Node.js
- （三）配置命令
-
- [1. 查看版本信息](#1. 查看版本信息)
- [2. 配置下载镜像源](#2. 配置下载镜像源)
- 二，Idea打开Vue项目
Vue3 简介
-
Vue 3是Vue.js框架的重大升级，带来显著性能优化与开发体验革新。采用Proxy实现响应式系统，解决Vue 2中数据监听的局限，提升响应效率。虚拟DOM重构结合编译优化，静态内容标记与Tree - shaking技术减少渲染负担，降低包体积。
-
创新的组合式API是核心亮点，以函数形式组织逻辑，替代Vue 2的选项式API，解决mixins复用导致的命名冲突与代码冗余问题，尤其适合大型项目与TypeScript集成。新增Teleport组件支持跨层级渲染，Fragment允许组件无单根节点，简化模板结构。
-
生命周期钩子与组合式API深度整合，提供更灵活的逻辑编排方式。生态系统持续完善，适配Vue 3的工具链与插件快速增长。无论是构建高性能SPA、跨平台应用，还是快速迭代的小型项目，Vue 3均展现出卓越的开发效率与运行性能，成为现代Web开发的优选框架。
一，Node 下载、安装、配置与创建Vue3项目
- 详细操作步骤可查看本文：《Node.js 下载与安装教程》。
（一）下载Node.js
官网下载：https://nodejs.org/en/download。
（二）安装Node.js
按照安装向导一步步来，可修改安装路径。
（三）配置命令
1. 查看版本信息
dom
node -v
npm -v
2. 配置下载镜像源
配置镜像
dom
npm config set registry https://registry.npmmirror.com
查看已配置镜像
dom
npm config get registry
二，Idea打开Vue项目
（一）打开Vue项目
1，启动Idea，单击【Open】按钮。
2，找到已创建项目的存放路径------单击【OK】按钮。
3，单击【Trust Project】按钮，打开项目。
4，项目打开后的界面，如下图所示。
（二）添加插件
1，选择【File】------【Settings】。
2，单击【Plugins】------搜索框中输入【vue】进行检索------选择【Vue.js】------单击【Install】按钮，安装该插件------重启Idea。
3，重新启动Idea后，打开项目工程目录，可以看到vue格式的文件，可以显示对应图标。
（三）配置Run运行Vue工程
1，单击【Run】运行按钮，进入配置界面。
2，单击左上角的【+】号------选择【npm】。
3，Script中选择【serve】------单击【OK】按钮。
4，单击【serve】按钮，运行项目。
5，单击【http://localhost:8080/】，进入项目界面。
6，成功访问Vue3界面。
