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

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

news 2025/7/14 10:53:54

文章目录

  • 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

Appium+python自动化（十六）- ADB命令

简介 Android 调试桥(adb)是多种用途的工具&#xff0c;该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具&#xff0c;其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利&#xff0c;如安装和调试…...

编程新知 2025/7/13 10:04:15

基于数字孪生的水厂可视化平台建设：架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

编程新知 2025/6/16 21:39:46

（一）单例模式

一、前言 单例模式属于六大创建型模式，即在软件设计过程中，主要关注创建对象的结果，并不关心创建对象的过程及细节。创建型设计模式将类对象的实例化过程进行抽象化接口设计，从而隐藏了类对象的实例是如何被创建的，封装了软件系统使用的具体对象类型。 六大创建型模式包括…...

编程新知 2025/7/12 6:16:45

五子棋测试用例

一.项目背景 1.1 项目简介 传统棋类文化的推广 五子棋是一种古老的棋类游戏&#xff0c;有着深厚的文化底蕴。通过将五子棋制作成网页游戏&#xff0c;可以让更多的人了解和接触到这一传统棋类文化。无论是国内还是国外的玩家&#xff0c;都可以通过网页五子棋感受到东方棋类…...

编程新知 2025/7/14 8:43:11

高防服务器价格高原因分析

高防服务器的价格较高&#xff0c;主要是由于其特殊的防御机制、硬件配置、运营维护等多方面的综合成本。以下从技术、资源和服务三个维度详细解析高防服务器昂贵的原因&#xff1a; 一、硬件与技术投入 大带宽需求 DDoS攻击通过占用大量带宽资源瘫痪目标服务器&#xff0c;因此…...

编程新知 2025/7/9 7:41:51

Vue3 PC端 UI组件库我更推荐Naive UI

一、Vue3生态现状与UI库选择的重要性 随着Vue3的稳定发布和Composition API的广泛采用&#xff0c;前端开发者面临着UI组件库的重新选择。一个好的UI库不仅能提升开发效率&#xff0c;还能确保项目的长期可维护性。本文将对比三大主流Vue3 UI库&#xff08;Naive UI、Element …...

编程新知 2025/7/10 14:35:45

向量几何的二元性：叉乘模长与内积投影的深层联系

在数学与物理的空间世界中&#xff0c;向量运算构成了理解几何结构的基石。叉乘&#xff08;外积&#xff09;与点积&#xff08;内积&#xff09;作为向量代数的两大支柱&#xff0c;表面上呈现出截然不同的几何意义与代数形式&#xff0c;却在深层次上揭示了向量间相互作用的…...

编程新知 2025/7/11 23:25:16

简约商务通用宣传年终总结12套PPT模版分享

IOS风格企业宣传PPT模版&#xff0c;年终工作总结PPT模版&#xff0c;简约精致扁平化商务通用动画PPT模版&#xff0c;素雅商务PPT模版 简约商务通用宣传年终总结12套PPT模版分享:商务通用年终总结类PPT模版https://pan.quark.cn/s/ece1e252d7df...

编程新知 2025/7/10 2:34:42

Python[数据结构及算法 --- 栈]

一.栈的概念 在 Python 中&#xff0c;栈&#xff08;Stack&#xff09;是一种 “ 后进先出&#xff08;LIFO&#xff09;”的数据结构&#xff0c;仅允许在栈顶进行插入&#xff08;push&#xff09;和删除&#xff08;pop&#xff09;操作。 二.栈的抽象数据类型 1.抽象数…...

编程新知 2025/7/14 8:14:58

C++.OpenGL （9/64）摄像机（Camera）

颜色（Color） 颜色理论在OpenGL中的应用 #mermaid-svg-dKNDfS4EKDUmG4Ts {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-dKNDfS4EKDUmG4Ts .error-icon{fill:#552222;}#mermaid-svg-dKNDfS4EKDUmG4Ts .error-text…...

编程新知 2025/7/5 5:37:15