企业培训笔记: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

官网下载: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界面。

相关推荐
知识分享小能手19 分钟前
Vue3 学习教程,从入门到精通,Vue3 中使用 Axios 进行 Ajax 请求的语法知识点与案例代码(23)
前端·javascript·vue.js·学习·ajax·vue·vue3
凤年徐35 分钟前
【数据结构与算法】21.合并两个有序链表(LeetCode)
c语言·数据结构·c++·笔记·算法·链表
奕辰杰6 小时前
关于npm前端项目编译时栈溢出 Maximum call stack size exceeded的处理方案
前端·npm·node.js
JiaLin_Denny7 小时前
如何在NPM上发布自己的React组件(包)
前端·react.js·npm·npm包·npm发布组件·npm发布包
_Kayo_8 小时前
VUE2 学习笔记14 nextTick、过渡与动画
javascript·笔记·学习
咔咔一顿操作9 小时前
Vue 3 入门教程7 - 状态管理工具 Pinia
前端·javascript·vue.js·vue3
AI视觉网奇10 小时前
语音识别dolphin 学习笔记
笔记·学习
killer Curry11 小时前
B站 XMCVE Pwn入门课程学习笔记(6)
笔记·学习
小猪扒饭12 小时前
C基础 12_day
c语言·笔记·学习·算法
Eli_Optics14 小时前
《通信原理》学习笔记——第六章
笔记·学习