当前位置： 首页 > news >正文

【前端速通系列|第二篇】Vue3前置知识

news 2026/4/7 1:21:25

文章目录

  • 1.前言
  • 2.包管理工具npm
    • 2.1下载node.js
    • 2.2配置 npm 镜像源
    • 2.3 npm 常用命令
  • 3.Vite构建工具
  • 4.Vue3组件化
  • 5.Vue3运行原理

在这里插入图片描述

1.前言

本系列文章旨在帮助大家快速上手前端开发。

2.包管理工具npm

npm 是 node.js中进行 包管理 的工具. 类似于Java中的Maven。

2.1下载node.js

因此要想使用npm,首先要下载node.js。

node.js下载地址: https://nodejs.org/zh-cn

  • node -v 查看node.js版本
  • npm -v 查看npm版本

image-20240709210838964

2.2配置 npm 镜像源

npm镜像源指的是npm包管理器所使用的替代性服务器，用于下载和安装npm包。由于npm的官方源服务器位于美国，对于中国或其它网络条件不佳的地区的用户来说，直接从官方源下载可能会非常缓慢。为了提高下载速度，一些组织和个人提供了npm的镜像源，这些镜像源定期与官方源同步，以提供相同的服务但更快的下载速度。

以阿里云镜像源举例:

npm config set registry https://registry.npmmirror.com  #设置国内阿里云镜像源
npm config get registry  #查看镜像源

2.3 npm 常用命令

  • npm init： 项目初始化；

    • npm init -y：默认一路yes，不用挨个输入信息

  • npm install 包名：安装js包到项目中（仅当前项目有效）。指定 包名，或者 包名@版本号

    • npm install -g： 全局安装，所有都能用
    • 可以去 npm仓库 搜索第三方库

  • npm update 包名：升级包到最新版本

  • npm uninstall 包名：卸载包

  • npm run：项目运行

3.Vite构建工具

Vite官网: https://cn.vitejs.dev/

  • 快速创建前端项目脚手架
  • 统一的工程化规范:目录结构、代码规范、git提交规范 等
  • 自动化构建和部署:前端脚手架可以自动进行代码打包、压缩、合并、编译等常见的构建工作，可以通过集成
  • 自动化部署脚本，自动将代码部署到测试、生产环境等;

使用Vite初始化项目命令:

npm create vite

image-20240709213014665

启动项目命令也提示给我们了

cd vite-project
npm install 
npm run dev

如下:

image-20240709213343601

Local:就是项目的url

image-20240709213446228

项目打包命令:npm run build

打包好的项目都在dist目录下

image-20240709213642962

项目部署:

  • 前后分离方式：需要把 dist 文件夹内容部署到如 nginx 之类的服务器上。
  • 前后不分离方式：把 dist 文件夹内容复制到 SpringBoot 项目 resources 下面

4.Vue3组件化

组件化是Vue3架构和设计的核心特性之一，它帮助开发者将复杂的应用分解为更小、更可管理的部分。

Vue 3继续支持单文件组件（Single File Components），这是Vue中组件的主要形式。SFC允许你在一个文件中定义一个组件的所有方面，包括模板、脚本和样式。

<script setup>//编写脚本
</script><template>//编写页面模板
</template><style scoped>//编写样式
</style>

创建组件: 右键src下的components目录,选择Vue Component,输入组件名即可

image-20240709214535815

在App.Vue中即可完成组件的使用

image-20240709214958828

image-20240709215011614

5.Vue3运行原理

先来看下index.html

<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" type="image/svg+xml" href="/vite.svg" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vite + Vue</title></head><body><div id="app"></div><script type="module" src="/src/main.js"></script></body>
</html>

这个页面很简单,有一个div,id选择器是app.还有script,以模块化的方式引入了src下的main.js

main.js是整个项目模块化的入口

main.js 内容

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'createApp(App).mount('#app')

解释:

  • 从 Vue 的核心库中导入 createApp 函数
  • 导入了style.css导入全局样式表
  • 从 ./App.vue 文件中导入根组件。在 Vue 项目中，App.vue 通常是最顶层的组件，所有其他组件都将嵌套在这个根组件内。
  • 使用 createApp 函数创建一个新的 Vue 应用实例，并将 App 组件作为其根组件。将应用实例挂载到 HTML 文档中的某个元素上。在这里，应用实例被挂载到了 ID 为 app 的元素上。

具体如下图所示

项目中，App.vue 通常是最顶层的组件，所有其他组件都将嵌套在这个根组件内。

  • 使用 createApp 函数创建一个新的 Vue 应用实例，并将 App 组件作为其根组件。将应用实例挂载到 HTML 文档中的某个元素上。在这里，应用实例被挂载到了 ID 为 app 的元素上。

具体如下图所示

image-20240709220554526

相关文章：

【前端速通系列|第二篇】Vue3前置知识

文章目录 1.前言2.包管理工具npm2.1下载node.js2.2配置 npm 镜像源2.3 npm 常用命令 3.Vite构建工具4.Vue3组件化5.Vue3运行原理 1.前言 本系列文章旨在帮助大家快速上手前端开发。 2.包管理工具npm npm 是 node.js中进行 包管理 的工具. 类似于Java中的Maven。 2.1下载nod…...

编程日记 2024/7/15 2:40:54

ES6 Module 的语法（十二）

ES6&#xff08;ECMAScript 2015&#xff09;引入了模块&#xff08;Modules&#xff09;的概念&#xff0c;使得JavaScript代码可以更容易地组织和复用。 1. export 关键字 命名导出 (Named Exports) 你可以使用 export 关键字导出多个变量、函数或类。 // module.js export…...

编程日记 2024/7/15 2:39:52

Redis 主从复制，哨兵与集群

目录 一.redis主从复制 1.redis 主从复制架构 2.主从复制特点 3.主从复制的基本原理 4.命令行配置 5.实现主从复制 6.删除主从复制 7.主从复制故障恢复 8.主从复制完整过程 9.主从同步优化配置 二.哨兵模式&#xff08;Sentinel&#xff09; 1.主要组件和概念 2.哨…...

编程日记 2024/7/15 2:35:48

CV05_深度学习模块之间的缝合教学(1)

1.1 在哪里缝 测试文件&#xff1f;&#xff08;&#xff09; 训练文件&#xff1f;&#xff08;&#xff09; 模型文件&#xff1f;&#xff08;√&#xff09; 1.2 骨干网络与模块缝合 以Vision Transformer为例&#xff0c;模型文件里有很多类&#xff0c;我们只在最后…...

编程日记 2024/7/15 2:32:45

【密码学】公钥密码的基本概念

在先前我写的密码学体制文章中谈到&#xff0c;现代密码学分为两大体制&#xff0c;介绍了一些有关对称密码体制诸如流密码和分组密码的内容。本文的主要内容则切换到公钥密码体制&#xff08;又称非对称密码体制&#xff09;&#xff0c;简述了公钥密码体制的基本思想和应用方…...

编程日记 2024/7/15 2:31:44

【前端项目笔记】10 项目优化上线

项目优化上线 目标&#xff1a;优化Vue项目部署Vue项目&#xff08;上线提供使用&#xff09; 项目优化 项目优化策略&#xff1a; 生成打包报告&#xff1a;根据生成的报告发现问题并解决第三方库启用CDN&#xff1a;提高首屏页面的加载效率Element-UI组件按需加载路由懒加…...

编程日记 2024/7/15 2:13:26

Qt基础控件总结—多页面切换(QStackWidget类、QTabBar类和QTabWidget类)

QStackedWidget 类 QStackedWidget 类是在 QStackedLayout 之上构造的一个便利的部件，其使用方法与步骤和 QStackedLayout 是一样的。QStackedWidget 类的成员函数与 QStackedLayout 类也基本上是一致的，使用该类就和使用 QStackedLayout 一样。 使用该类可以参考QStackedL…...

编程日记 2024/7/15 2:04:18

团队融合与业务突破

结束了在上海久事集团下属公司的《团队融合与业务突破》课程&#xff0c;不仅探讨了团队领导力的关键技巧&#xff0c;更重要的是&#xff0c;我们从业务协同的视角&#xff0c;在跨团队中如何达成了共识&#xff0c;结合系统思考的相关内容&#xff0c;让大家看到跨部门冲突的…...

编程日记 2024/7/15 2:03:17

mybatilsplaus 常用注解

官网地址 baomidou注解配置...

编程日记 2024/7/15 2:01:15

vue引入sm-crypto通过sm4对文件进行加解密，用户输入密码

对文件加密并保存&#xff1a; import { sm4 } from sm-cryptofetch("你的文件地址") .then(response > response.blob()) .then(byteStream > {const reader2 new FileReader();reader2.onload function(event) {const arrayBuffer event.target.result;l…...

编程日记 2024/7/15 1:59:14

vue3实现无缝滚动列表（大屏数据轮播场景）

实现思路 vue3目前可以通过第三方组件来实现这个需求。 下面介绍一下这个第三方滚动组件--vue3-scroll-seamless vue3-scroll-seamless 是一个用于 Vue 3 的插件&#xff0c;用于实现无缝滚动的组件。它可以让内容在水平或垂直方向上无缝滚动&#xff0c;适用于展示轮播图、新…...

编程日记 2024/7/15 1:56:11

element ui ts table重置排序

#日常# 今天带的实习生&#xff0c;在遇到开发过程中&#xff0c;遇到了element ui table 每次查询的时候都需要重置排序方式&#xff0c;而且多个排序是由前端排序。 <el-table :data"tableData" ref"restTable"> </<el-table> <script…...

编程日记 2024/7/15 1:54:09

python热门面试题三

面试题1&#xff1a;Python中的列表推导式是什么&#xff1f;请给出一个例子。 回答&#xff1a; 列表推导式&#xff08;List Comprehension&#xff09;是Python中一种非常强大且简洁的构建列表的工具。它允许你通过一个表达式来创建一个新的列表&#xff0c;这个表达式定义…...

编程日记 2024/7/15 1:53:08

sql monitoring 长SQL ASH AWR 都没有 未Commit or export to csv

Duration 4小时&#xff0c; Database Time 22.5&#xff0c; Session Inactive&#xff0c; 1.未Commit原因, 2.慢慢导出成csv文件&#xff1f; How is v$session status INACTIVE and v$sql_monitor status EXECUTING concurrently 2641811 Posts: 8 Jan 11, 2016 6:47P…...

编程日记 2024/7/15 1:51:07

算法学习day12(动态规划)

一、不同的二叉搜索树 二叉搜索树的性质&#xff1a;父节点比左边的孩子节点都大&#xff1b;比右边的孩子节点都小&#xff1b; 由图片可知&#xff0c;dp[3]是可以由dp[2]和dp[1]得出来的。(二叉搜索树的种类和根节点的val有关) 当val为1时&#xff0c;左边是一定没有节点的…...

编程日记 2024/7/15 1:50:06

Vue 3 ＜script setup＞ 使用v-bind（或简写为 :）来动态绑定图片的 src 属性

<img :src"images[currentIndex]" > <template> <div> <!-- 使用 v-bind 或简写为 : 来动态绑定图片的 src 属性 --> <img :src"images[currentIndex]" alt"Dynamic Image" style"width: 100px; height: a…...

编程日记 2024/7/15 1:46:02

​前端Vue自定义签到获取积分弹框组件设计与实现

摘要 随着前端技术的不断演进&#xff0c;开发的复杂性日益凸显。传统的整体式开发方式在面临功能迭代和修改时&#xff0c;常常牵一发而动全身&#xff0c;导致开发效率低下和维护成本高昂。组件化开发作为一种解决方案&#xff0c;通过实现模块的独立开发和维护&#xff0c;…...

编程日记 2024/7/15 1:42:59

闲置服务器废物利用_离线下载_私人影院_个人博客_私人云笔记_文件服务器

背景 家里有台旧windows笔记本&#xff0c;PentiumB940 2.00GHz的cpu 4G内存&#xff0c;512G硬盘 放在家里吃灰很久,最近几个月折腾折腾&#xff0c;装了linux操作系统&#xff0c;换了一个2T的硬盘 这里记录下折腾的过程,有需要的可以参考 开通公网IP 打电话给运营商一般都可…...

编程日记 2024/7/15 1:41:58

【Python学习笔记】调参工具Optuna + 泰坦尼克号案例

【Python学习笔记】调参工具Optuna&泰坦尼克号案例 背景前摇&#xff1a;&#xff08;省流可不看&#xff09; 最近找了份AI标注师的实习&#xff0c;但是全程都在做文本相关的活&#xff0c;本质上还是拧螺丝&#xff0c;就想着学点调参、部署什么的技能增加一些竞争力&a…...

编程日记 2024/7/15 1:38:55

GPT带我学-设计模式13-策略模式

概述 策略模式 例子 你可以创建一个策略工厂&#xff08;Strategy Factory&#xff09;来根据传入的 orgId 动态地选择合适的策略。以下是实现示例&#xff1a; 首先&#xff0c;定义策略接口和具体策略类&#xff1a; public interface CardPathStrategy {String generat…...

编程日记 2024/7/15 1:37:54

002、环境搭建：Python虚拟环境、LangChain安装与核心依赖解析

002、环境搭建&#xff1a;Python虚拟环境、LangChain安装与核心依赖解析从一次深夜调试说起 上周三凌晨两点&#xff0c;我被一个诡异的错误钉在屏幕前&#xff1a;明明本地测试通过的LangChain智能体&#xff0c;在同事的机器上死活跑不起来。报错信息指向一个版本冲突——py…...

编程新知 2026/4/7 0:37:31

BK1086/88 DSP收音机Arduino库详解

1. 项目概述PU2CLR BK108X 是一款专为 BEKEN BK1086 和 BK1088 高集成度数字信号处理&#xff08;DSP&#xff09;广播接收芯片设计的 Arduino 库。该库并非通用型通信封装&#xff0c;而是面向射频接收系统工程实践的底层控制框架&#xff0c;其核心价值在于将芯片复杂的寄存器…...

编程新知 2026/4/7 0:21:28

回溯算法双杀：子集 + 电话号码的字母组合 | 经典模板题解析

目录 一、LeetCode 78&#xff1a;子集 题目描述 核心思路&#xff08;回溯法&#xff09; 完整代码 关键解析 二、LeetCode 17&#xff1a;电话号码的字母组合 题目描述 核心思路&#xff08;回溯法&#xff09; 完整代码 关键解析 三、两道题核心对比 总结 一、L…...

编程新知 2026/4/6 23:22:27

HJ166 讨厌鬼进货

题目题解(40)讨论(20)排行 入门 通过率&#xff1a;61.91% 时间限制&#xff1a;1秒 空间限制&#xff1a;256M 知识点贪心 校招时部分企业笔试将禁止编程题跳出页面&#xff0c;为提前适应&#xff0c;练习时请使用在线自测&#xff0c;而非本地IDE。 描述 讨厌鬼需要采…...

编程新知 2026/4/6 23:05:50

【26大英赛】全国大学生英语竞赛高频核心词汇表pdf电子版（考前必背单词）

2026年全国大学生英语竞赛进入最后冲刺阶段&#xff0c;考试日期定于4月12日。距离考试仅剩6天时间&#xff0c;备考工作刻不容缓。 为助力考生高效复习&#xff0c;现推出最新版竞赛核心词汇手册。该资料以PDF电子版形式提供&#xff0c;支持自由下载和打印使用&#xff0c;方…...

编程新知 2026/4/6 22:25:20

9篇8章2节：MIMIC 数据库的 CITI 注册与课程选择（2026年版）

作为包含敏感患者信息的公共数据库，MIMIC 对使用权限的申请设置了严格的伦理与合规门槛，其核心目的在于保障患者隐私、维护学术诚信。其中，通过 CITI Program 的人体研究伦理认证是不可或缺的前置条件，也是衡量研究人员是否具备合规研究素养的关键标准。本文将详细拆解 202…...

编程新知 2026/4/6 21:46:13

DENSO电装机器人软件授权序列号 wincaps3软件授权和软件安装包及软件手册

DENSO电装机器人软件授权序列号 wincaps3软件授权和软件安装包及软件手册 永久使用序列号 给机器人工程师的WinCaps3安装避坑指南 最近在调试DENSO机械臂的时候&#xff0c;发现不少同行在WinCaps3的安装和授权环节翻车。今天就结合自己的踩坑经验&#xff0c;聊聊怎么搞定这个…...

编程新知 2026/4/6 20:07:13

本地多人游戏分屏工具：突破单机限制的创新解决方案

本地多人游戏分屏工具&#xff1a;突破单机限制的创新解决方案 【免费下载链接】nucleuscoop Starts multiple instances of a game for split-screen multiplayer gaming! 项目地址: https://gitcode.com/gh_mirrors/nu/nucleuscoop 你是否曾遇到这样的困境&#xff1a…...

编程新知 2026/4/6 19:31:03

汽车NVH分析避坑指南：OptiStruct声固耦合频响分析中5个常见错误及解决方法

汽车NVH工程师必读&#xff1a;OptiStruct声固耦合频响分析五大实战陷阱与解决方案 当你在深夜的办公室里盯着屏幕上闪烁的OptiStruct报错信息&#xff0c;是否曾感到束手无策&#xff1f;声固耦合频响分析作为汽车NVH开发中的关键环节&#xff0c;隐藏着无数可能让初级工程师踩…...

编程新知 2026/4/6 19:14:50

DeepAnalyze参数详解：Llama3:8b模型在信息提炼任务中的Prompt工程与输出结构优化

DeepAnalyze参数详解&#xff1a;Llama3:8b模型在信息提炼任务中的Prompt工程与输出结构优化 1. 项目概述&#xff1a;深度文本分析引擎 DeepAnalyze是一个基于Ollama框架构建的本地化大模型应用&#xff0c;专门用于深度文本分析任务。这个引擎的核心功能是模仿专业文本分析…...

编程新知 2026/4/6 19:04:45