企业培训笔记：Vue3前端框架配置

---

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. 查看版本信息

node -v
npm -v

2. 配置下载镜像源

配置镜像

npm config set registry https://registry.npmmirror.com

查看已配置镜像

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界面。