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

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

news 文章来源：https://blog.csdn.net/m0_63463510/article/details/140308097 2025/5/24 3:47:06

文章目录

  • 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

【Linux】Ubuntu配置JDK环境、MySQL环境

一、 Ubuntu配置JDK环境 在Ubuntu系统中安装JDK 8可以通过以下步骤进行&#xff1a; 打开终端。更新包列表&#xff1a; sudo apt update安装OpenJDK 8&#xff1a; sudo apt install openjdk-8-jdk验证安装是否成功&#xff1a; java -version注&#xff1a;如果系统中安…...

编程日记 2024/7/15 1:32:48

【ElasticSearch】ES 5.6.15 向量插件支持

参考 : https://github.com/lior-k/fast-elasticsearch-vector-scoring 下载插件 安装插件 插件目录&#xff1a; elasticsearch/plugins, 安装后的目录如下 plugins└── vector├── elasticsearch-binary-vector-scoring-5.6.9.jar└── plugin-descriptor.properties修…...

编程日记 2024/7/15 1:29:45

Kafka 高并发设计之数据压缩与批量消息处理

《Kafka 高性能架构设计 7 大秘诀》专栏第 6 章。 压缩&#xff0c;是一种用时间换空间的 trade-off 思想&#xff0c;用 CPU 的时间去换磁盘或者网络 I/O 传输量&#xff0c;用较小的 CPU 开销来换取更具性价比的磁盘占用和更少的网络 I/O 传输。 Kafka 是一个高吞吐量、可扩展…...

编程日记 2024/7/15 1:27:44

设计模式使用场景实现示例及优缺点（行为型模式——模板方法模式）

模板方法模式&#xff08;Template Method Pattern&#xff09; 模板方法模式&#xff08;Template Method Pattern&#xff09;是一种行为设计模式&#xff0c;它定义了一个操作中的算法的骨架&#xff0c;将算法的一些步骤延迟到子类中。这样可以在不改变算法的结构的前提下…...

编程日记 2024/7/15 1:26:43

ETL数据集成丨主流ETL工具(ETLCloud、DataX、Kettle)数据传输性能大PK

目前市面上的ETL工具众多&#xff0c;为了方便广大企业用户在选择ETL工具时有一个更直观性能方面的参考值&#xff0c;我们选取了目前市面上最流行的三款ETL工具&#xff08;ETLCloud、DataX、Kettle&#xff09;来作为本次性能传输的代表&#xff0c;虽然性能测试数据有很多相…...

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

eNSP：防火墙设置模拟公司配置（二）

实验拓扑&#xff1a; 实验要求&#xff08;二&#xff09;&#xff1a; 7&#xff1a; 办公设备可以通过电信连接和移动上网&#xff08;多对多NAT&#xff0c;并且需要保留一个公网IP&#xff09; 8&#xff1a; 分公司通过公网移动电信&#xff0c;访问DMZ的http服务器 9&a…...

编程日记 2024/7/15 1:23:40

vue3 两个组件之间传值

Props 父组件可以通过 props 将数据传递给子组件。这是最常见的组件间通信方式 <!-- 父组件 --><template><ChildComponent :message"parentMessage" /></template><script>import ChildComponent from ./ChildComponent.vue;export…...

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

基于matlab的深度学习案例及基础知识专栏前言

专栏简介 内容涵盖深度学习基础知识、深度学习典型案例、深度学习工程文件、信号处理等相关内容&#xff0c;博客由基于matlab的深度学习案例、matlab基础知识、matlab图像基础知识和matlab信号处理基础知识四部分组成。 一、 基于matlab的深度学习案例 1.1、matlab:基于模…...

编程日记 2024/7/15 1:16:33

机器学习——L1 L2 范数 —＞L1 L2正则化

1、L1范数和L2范数是机器学习和数据分析中经常使用的两种范数&#xff0c;它们之间存在多个方面的区别。 以下是关于L1范数和L2范数区别的详细解释&#xff1a; 一、定义差异 L1范数&#xff1a;也被称为曼哈顿范数&#xff0c;是向量元素的绝对值之和。对于一个n维向量x&am…...

编程日记 2024/7/15 1:15:32

大模型时代，还需要跨端framework吗？

跨端 在我近十年的大前端从业经验中&#xff0c;有一半是在和flutter/rn打交道。虽然&#xff0c;flutter和rn官方和社区已经在非常努力的优化、填坑了&#xff0c;但是这两者的坑还是远远高于原生开发。 但是&#xff0c;在锁表的大周期下&#xff0c;华为带着鸿蒙来了&#…...

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