1.Vue3 - 创建Vue3工程
目录
- 一、 基于vue-cli 脚手架
- 二、基于vite 推荐
- 2.1 介绍
- 2.2 创建项目
- 2.3 文件介绍
- 2.3.1 extensions.json
- 2.3.2 脚手架的根目录
- 2.3.3 主要文件 src
- 2.3.3.1 main.js
- 2.3.3.2 App.vue 组件
- 2.3.3.3 conponents
- 2.3.4 env.d.ts
- 2.3.5 index.html 入口文件
- 2.3.6 package
- 2.3.7 tsconfig
- 2.3.8 vite.config.js
一、 基于vue-cli 脚手架
目前vue-cli已处于维护模式,官方推荐基于Vite创建项目
r## 查看@vue/cli版本,确保@vue/cli版本在4.5.0以上
vue --version## 安装或者升级你的@vue/cli
npm install -g @vue/cli## 执行创建命令
vue create vue_test## 随后选择3.x
## Choose a version of Vue.js that you want to start the project with (Use arrow keys)
## > 3.x
## 2.x## 启动
cd vue_test
npm run serve
二、基于vite 推荐
2.1 介绍
vite
是新一代前端构建工具,官网地址:https://vitejs.cn,vite
的优势如下:
- 轻量快速的热重载(
HMR
),能实现极速的服务启动。 - 对
TypeScript
、JSX
、CSS
等支持开箱即用。 - 真正的按需编译,不再等待整个应用编译完成。
webpack
构建 与vite
构建对比图如下:
webpack构建如下所示
从entry入口文件进来,先route路由对module每一个都分析,分析完成后进行一个Bundle处理,吃力完成之后Server ready 工程启动了
从route到module的过程是很耗时的
如果用webpack架构的时候,当路由和模块特别多的时候,启动项目就会非常的慢
vite构建如下图所示
一上来就Server ready项目就启动,那什么就没准备好就启动么? 其实是我们看哪个,它就会准备哪个
我们不看的路由和模块,就不会进行处理
有点懒加载的意思
2.2 创建项目
官方文档:https://cn.vuejs.org/guide/quick-start#creating-a-vue-application
## 1.创建命令
npm create vue@latest## 2.具体配置
## 配置项目名称
√ Project name: vue3_test
## 是否添加TypeScript支持
√ Add TypeScript? Yes
## 是否添加JSX支持
√ Add JSX Support? No
## 是否添加路由环境
√ Add Vue Router for Single Page Application development? No
## 是否添加pinia环境
√ Add Pinia for state management? No
## 是否添加单元测试
√ Add Vitest for Unit Testing? No
## 是否添加端到端测试方案
√ Add an End-to-End Testing Solution? » No
## 是否添加ESLint语法检查
√ Add ESLint for code quality? Yes
## 是否添加Prettiert代码格式化
√ Add Prettier for code formatting? No
2.3 文件介绍
2.3.1 extensions.json
在这个文件中配置着各种各样的插件
2.3.2 脚手架的根目录
2.3.3 主要文件 src
2.3.3.1 main.js
// 样式内容
import './assets/main.css'// 下面这三行的内容比较重要
// 创建应用 相当于种花时候的花盆
import { createApp } from 'vue'// App组件 相当于花的根
import App from './App.vue'// App组件是所有组件的根 组件 将花插在花盆里
// mount是挂载的意思,挂载到app的容器里面,app容器在index.html文件里<div id="app"></div>
createApp(App).mount('#app')
此文件在入口文件index.html中通过如下代码被引入
<script type="module" src="/src/main.js"></script>
2.3.3.2 App.vue 组件
<script setup>
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
</script><template><header><img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" /><div class="wrapper"><HelloWorld msg="You did it!" /></div></header><main><TheWelcome /></main>
</template><style scoped>
header {line-height: 1.5;
}.logo {display: block;margin: 0 auto 2rem;
}@media (min-width: 1024px) {header {display: flex;place-items: center;padding-right: calc(var(--section-gap) / 2);}.logo {margin: 0 2rem 0 0;}header .wrapper {display: flex;place-items: flex-start;flex-wrap: wrap;}
}
</style>
2.3.3.3 conponents
里面会存放很多的组件,这里其实就是树枝,App.vue是根
2.3.4 env.d.ts
不要把这个文件删除,如果没有node_modules文件夹的话,意味着没有依赖,这个文件就会飘红
飘红的我们是我们直接执行 ”npm i“,安装所有的依赖
如果我们直接向文件引入“.jpg”、“.txt”文件,ts会不认识的
env.d.ts文件的作用就是让ts认识这些文件,当我们加上图片中的代码后,我们的引用就不会飘红
2.3.5 index.html 入口文件
如果我们目前新项目的src目录中的内容都不动的话,我们的页面仅仅会呈现index.html文件中的内容
在这个文件中做了一个非常重要的事情,将"/src/main.js"引入了
<script type="module" src="/src/main.js"></script>
2.3.6 package
包的管理文件,依赖声明文件
2.3.7 tsconfig
ts的配置文件,不能删除
2.3.8 vite.config.js
这是整个工程的配置文件
可以安装插件、配置代理
相关文章:
1.Vue3 - 创建Vue3工程
目录 一、 基于vue-cli 脚手架二、基于vite 推荐2.1 介绍2.2 创建项目2.3 文件介绍2.3.1 extensions.json2.3.2 脚手架的根目录2.3.3 主要文件 src2.3.3.1 main.js2.3.3.2 App.vue 组件2.3.3.3 conponents 2.3.4 env.d.ts2.3.5 index.html 入口文件2.3.6 package2.3.7 tsconfig…...
Spring MVC 执行流程全解析:从请求到响应的七步走
Spring MVC 的工作流程,漏了这一个今天刚好面试提到了,没回答出来,记录一下。 🧭 Spring MVC 整体执行流程一览(从请求到响应) ✅ 1. 请求发出:浏览器发送 HTTP 请求 如用户访问: …...
四元数转旋转矩阵
目录 gsplat 四元数转旋转矩阵等同代码实现 scipy 四元数转旋转矩阵替换代码 gsplat 四元数转旋转矩阵等同代码实现 import torch import torch.nn.functional as Fdef quat_act(x: torch.Tensor) -> torch.Tensor:return x / x.norm(dim-1, keepdimTrue)def normalized_q…...
Pytorch的极简transformer用于时间序列预测
本博客来源于CSDN机器鱼,未同意任何人转载。 更多内容,欢迎点击本专栏,查看更多内容。 目录 0.引言 1.数据准备 2. 网络搭建 3. 完整代码 4. 结语 0.引言 在【博客】中,我们基于tensorflow2.x深度学习框架搭建了transforme…...
垂直行业突围:工业软件在汽车、航空领域的 “破壁” 实践
在当今科技高速发展的时代,工业软件已悄然完成从通用工具到垂直行业 “战略武器” 的蜕变。特别是在汽车与航空这两大高端制造领域,工业软件的价值早已超越单纯的效率提升,成为关乎核心技术自主可控的关键要素,一场围绕工业软件的…...
人工智能在智能家居中的应用与发展
随着人工智能(AI)技术的飞速发展,智能家居逐渐成为现代生活的重要组成部分。从智能语音助手到智能家电,AI正在改变我们与家居环境的互动方式,让生活更加便捷、舒适和高效。本文将探讨人工智能在智能家居中的应用现状、…...
维度建模工具箱 提纲与总结
这里写自定义目录标题 基本概念事实表和维度表BI(Business Intelligence) 产品 事实表事实表的粒度事实表的种类 维度表建模技术基本原则避免用自然键作为维度表的主键,而要使用类似自增的整数键避免过度规范化避免变成形同事实表的维度表 SCD(Slowly Changed Dimen…...
Vue3 源码解析(六):响应式原理与 reactive
今天这篇文章是笔者会带着大家一起深入剖析 Vue3 的响应式原理实现,以及在响应式基础 API 中的 reactive 是如何实现的。对于 Vue 框架来说,其非侵入的响应式系统是最独特的特性之一了,所以不论任何一个版本的 Vue,在熟悉其基础用…...
规则引擎 - Easy Rules
Easy Rules 依赖demodemo1demo2 总结 Easy Rules 是一个轻量级的 Java 规则引擎,使用简单,适合快速开发和简单的规则场景,适合对于一些判断,是否属于白名单,是否有特殊权限,是否属于当前区域,调…...
uniapp打ios包
uniapp在windows电脑下申请证书并打包上架 前言 该开发笔记记录了在window系统下,在苹果开发者网站生成不同证书,进行uniapp打包调试和上线发布,对window用户友好 注:苹果打包涉及到两种证书:开发证书 和 分发证书 …...
from tensorflow.keras.models import Model中Model报红;以及动态链接库(DLL)初始化例程失败
博主也是网上搜索资料又问的kimi 试了一节课 总结下来: 1、用这句话导入Model from tensorflow.keras.models import Model 2、更新pip pip install --upgrade pip 3、卸载重装tensorflow pip uninstall tensorflow 4、使用阿里云使tensorflow降低到2.8.0&a…...
【初阶数据结构】树——二叉树(上)
文章目录 目录 前言 一、树 1.树的概念与结构 2.树相关术语 3.树的表示 二、二叉树 1.概念与结构 2.特殊的二叉树 3.二叉树存储结构 总结 前言 本篇带大家学习一种非线性数据结构——树,简单认识树和二叉数以及了解二叉树的存储结构。 一、树 1.树的概念与结构 树…...
Debian GNU/Linux的新手入门介绍
Debian GNU/Linux:起源、基本介绍与发行版对比 一、起源与发展历程 Debian GNU/Linux 是现存最古老的 Linux 发行版之一,由 Ian Murdock 于 1993 年 8 月 16 日创立。其名称结合了他的女友(后成为妻子)Debra 和他自己的名字 Ian…...
13 数据存储单位与 C 语言整数类型:从位到艾字节、常见整数类型及其范围、字面量后缀、精确宽度类型详解
1 数据存储单位 在计算机科学领域,数据存储采用分层级的单位体系,各层级单位以 2 的幂次方为换算基础,而非传统数学中的 10 的幂次方。 以下是常见的数据存储单位介绍: 位(bit,b)是计算机中的最…...
【CPU】结合RISC-V CPU架构回答中断系统的7个问题(个人草稿)
结合RISC-V CPU架构对中断系统七个关键问题的详细解析,按照由浅入深的结构进行说明: 一、中断请求机制(问题①) 硬件基础: RISC-V通过CLINT(Core Local Interrupter)和PLIC(Platfor…...
基于unsloth微调一个越狱大模型
网上其实并没有找到现成的开源越狱数据集,所以数据集获取是个麻烦事。想了想easydataset,可能还是不行,easydataset是基于大模型回答的,大模型一般都做了对齐训练,那本地文档生成数据这条路也不可靠。 现成的越狱数据…...
城市客运安全员证适用岗位及要求
城市客运安全员证适用岗位及要求 城市客运安全员证是从事城市公共交通行业安全管理工作的重要资格证书,主要适用于以下岗位: 1. 公交车辆安全员 岗位职责:负责公交车辆运行过程中的安全监督,检查乘客携带物品,防止危…...
UDP协议详解
UDP协议详解 一、理解socket套接字 1.1理解IP 我们都知道在网络中IP用来标识主机的唯一性。那么?这句话该如何理解呢?大家来思考一个问题:计算机之间传输传输数据是目的吗?就好比,你爸叫你给你妈带句话ÿ…...
Unreal Engine中FRotator与FQuat在赛车游戏方向盘控制中的协同应用解析
摘要 深入剖析 Unreal Engine 中这两个关键组件在赛车游戏方向盘控制中的协同作用,涵盖全流程与实践技巧。 一、引言 在赛车游戏开发中,实现逼真的方向盘控制是提升玩家体验的关键要素之一。而在 Unreal Engine 里,FRotator 与 FQuat 这两…...
第十四届蓝桥杯 2023 C/C++组 飞机降落
目录 题目: 题目描述: 编辑题目链接: 思路: 核心思路: 思路详解: 代码: 代码详解: 题目: 题目描述: 题目链接: 洛谷 P9241 [蓝桥杯 20…...
完美解决Microsoft Edge浏览器无法同步/一直在同步中/更新失败等问题
在使用Microsoft Edge浏览器的过程中,我们可能会遇到一些常见的问题,例如无法同步数据或无法更新浏览器。这些问题通常可以归结为以下两个主要原因: 一、网络连接问题 当Edge浏览器无法同步或更新时,首要考虑的是网络连接问题。…...
CSS文本属性
CSS文本属性 在CSS中,可以使用以下属性来设置文本的样式和布局: 1.color : 设置文本颜色。可以使用颜色名称、十六进制值或RGB值来指定颜色: p{color:red; }font-family : 设置文本的字体系列。可以指定一个或多个字…...
思科路由器做DNS服务器
1.实验环境中,常常需要一台DNS服务器来做名称解析,一般会安装一台windows server,启用dns服务,或者安装一台Linux服务器,安装Bind来实现;虽然可以实现你想要的功能,但是费时费力且配置复杂&…...
Windows部署FunASR实时语音听写便捷部署教程
FunASR提供可便捷本地或者云端服务器部署的实时语音听写服务,内核为FunASR已开源的runtime-SDK。 FunASR集成了达摩院语音实验室在Modelscope社区开源的语音端点检测(VAD)、Paraformer-large非流式语音识别(ASR)、Paraformer-large流式语音识别(ASR)、标点预测(PUNC) 等相关能…...
C++之unordered封装
目录 一、哈希表的修改 1.1、哈希表节点结构 1.2、迭代器 1.3、哈希表结构 1.4、完整代码 二、unordered_map的实现 二、unordered_set的实现 一、哈希表的修改 注意:这里我们使用哈希桶来封装unordered_map和unordered_set。 1.1、哈希表节点结构 templa…...
Pycharm(九)函数的闭包、装饰器
目录 一、函数参数 二、闭包 三、装饰器 一、函数参数 def func01():print("func01 shows as follows") func01() # 函数名存放的是函数所在空间的地址 print(func01)#<function func01 at 0x0000023BA9FC04A0> func02func01 print(func02)#<function f…...
7. 栈与队列(随想录)
1.栈实现队列 2.用队列实现栈 3.有效的括号 4.删除字符串中的所有相邻重复项 5.逆波兰表达式 6.滑动窗口最大值 7.前k个高频元素...
GPU软硬件架构协同设计解析
GPU软硬件架构协同设计解析 GPU(图形处理器)的软硬件协同设计是其在通用计算和高性能计算(HPC)领域取得突破的核心原因。以下从硬件架构、软件架构、协同设计的关键技术及典型案例展开深度解析。 一、硬件架构的核心设计原则 流式多处理器(SM)的模块化设计 计算单元…...
【软考】论NoSQL数据库技术及其应用示例
论NoSQL数据库技术及其应用 随着互联网web2.0网站的兴起,传统关系数据库在应对web2.0 网站,特别是超大规模和高并发的web2.0纯动态SNS网站上已经显得力不从心,暴露了很多难以克服的问题,而非关系型的数据库则由于其本身的特点得到…...
特伦斯智慧钢琴评测:如何用科技重塑钢琴学习新体验
对于渴望学习钢琴的爱好者而言,传统钢琴的笨重体积、高昂成本与扰民问题往往成为绊脚石。而智能电钢琴的出现,正以轻量化设计、沉浸式体验与智能化功能打破这些壁垒。特伦斯智慧钢琴凭借其专业级硬件配置与创新教学系统,成为市场中兼具性能与…...
UML 状态图:解锁电子图书馆管理系统的高效设计
目录 一、UML 状态图的核心要素 状态:系统行为的 “栖息地” 转换:连接状态的 “桥梁” 动作:赋予功能的 “实践者” 二、电子图书馆管理系统状态图解析 系统空闲状态:一切的起点 读者登录与身份验证:安全的 “…...
UML 状态图:陪伴机器人系统示例
目录 一、状态图的基本概念 1.1 状态 1.2 转换 1.3 动作 二、陪伴机器人系统状态图解析 2.1 初始与待机状态 2.2 情绪检测中状态 2.3 陪伴模式下的细分 2.4 疏导模式的严谨流程 2.5 安抚模式的关键作用 三、状态图绘画 四、UML 状态图的强大 4.1 直观呈现系统行为…...
超详细实现单链表的基础增删改查——基于C语言实现
文章目录 1、链表的概念与分类1.1 链表的概念1.2 链表的分类 2、单链表的结构和定义2.1 单链表的结构2.2 单链表的定义 3、单链表的实现3.1 创建新节点3.2 头插和尾插的实现3.3 头删和尾删的实现3.4 链表的查找3.5 指定位置之前和之后插入数据3.6 删除指定位置的数据和删除指定…...
分布式光纤测温技术让森林火灾预警快人一步
2025年春季,多地接连发生森林火灾,累计过火面积超 3万公顷。春季历来是森林草原火灾易发、多发期,加之清明节已到来,生产生活用火活跃,民俗祭祀用火集中,森林火灾风险进一步加大。森林防火,人人…...
判断链表是否为环(Java版本自己用)
141. 环形链表 核心代码版本: public class Solution {public boolean hasCycle(ListNode head) {if (head null) {return false;}ListNode slow head;ListNode fast head.next;while (fast ! null && fast.next ! null) {if (slow fast) {return true…...
leetcode 516. Longest Palindromic Subsequence
题目描述: 代码: class Solution { public:int longestPalindromeSubseq(string s) {int n s.size();//i<j,dp[i][j]表示s[i,j]的最长回文子串的长度,按照这个定义dp[0][n-1]就是答案,i>j的dp[i][j]不定义vector<vector<int>> dp(n,…...
关于敏感文件或备份 安全配置错误 禁止通过 URL 访问 Vue 项目打包后的 .gz 压缩文件
要禁止通过 URL 访问 Vue 项目打包后的 .gz 压缩文件(如 sc.6abb69d9.css.gz)或其他敏感文件,可以通过 Nginx 配置和 Tomcat 配置双重防护来实现。以下是具体解决方案: 方法 1:通过 Nginx 配置禁止访问 .gz 文件 在 N…...
Linux系统启动全流程解析:从BIOS到用户登录
摘要 深度解析Linux系统启动五阶段:内核加载→init进程初始化→系统服务启动→终端创建→用户登录,涵盖SysV/Systemd差异及运行级别管理,提供故障排查指南。 一、启动流程全景概览 Linux系统启动过程严格遵循5个阶段顺序执行,每…...
unity动态骨骼架设+常用参数分享(包含部分穿模解决方案)
Unity骨骼物理模拟插件Dynamic Bone Dynamic Bone 可用于对角色的骨骼(bones)或者铰链系统(joints)施加物理效果。 物理效果可以使得游戏角色的头发、衣服、胸部或者是其他的任何部位,都可以以近似真实的状态运动。 …...
【云原生】k8s集群部署最新版ELFK日志采集平台
✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN全栈领域优质创作者,掘金优秀博主,51CTO博客专家等。 🏆《博客》:Golang开…...
基于瑞芯微RK3576国产ARM八核2.2GHz A72 工业评估板——ROS2系统使用说明
前 言 本文主要介绍创龙科技TL3576-MiniEVM评估板演示基于Ubuntu的ROS系统(版本:ROS2 Foxy)使用说明,包括镜像编译、镜像替换,以及ROS系统测试的方法。适用开发环境如下。 Windows开发环境:Windows 10 64bit Linux虚拟机环境:VMware16.2.5、Ubuntu22.04.5 64bit U-B…...
android studio sdk unavailable和Android 安装时报错:SDK emulator directory is missing
md 网上说的都是更换proxy代理什么的,还有一些二其他乱七八糟的,根本没用,感觉很多就是解决不了问题,还贼多贼一致,同质化,感觉很坑人,让人觉得他们和我的一样的,大家都是按他们说的…...
qemu构建arm环境(AI生成)
要编译 qemu-system-arm,你需要安装一些依赖库,配置编译环境,并执行编译过程。以下是一般步骤,适用于大多数基于Linux的系统。 1. 安装依赖 首先,你需要安装一些必要的开发工具和库。你可以使用包管理器来安装这些依…...
10天学会嵌入式技术之51单片机-day-4
第十二章 中断系统 中断系统是单片机用于处理外部紧急事件的一种机制。中断系统工作的大致流程如下 图所示:当 CPU 正在处理某项任务时,外部发生了某个紧急事件,此时 CPU 会暂停当前 的工作,转而去处理这个紧急事件,处…...
spark—SQL3
连接方式 内嵌Hive: 使用时无需额外操作,但实际生产中很少使用。 外部Hive: 在虚拟机下载相关配置文件,在spark-shell中连接需将hive-site.xml拷贝到conf/目录并修改url、将MySQL驱动copy到jars/目录、把core-site.xml和hdfs-sit…...
CENTOS 7 安装VNC
一、VNC简介 VNC(Virtual Network Computing),为一种使用RFB协议的屏幕画面分享及远程操作软件。此软件借由网络,可发送键盘与鼠标的动作及即时的屏幕画面。 VNC与操作系统无关,因此可跨平台使用,例如可用…...
第42讲:走进智慧农业的“感知神经系统”——农田遥感 + 边缘计算的融合实践
目录 ✨一、为什么要融合遥感与边缘计算? 🧪二、典型应用场景案例 ✅ 案例 1:棉花田的智能水分监测系统 ✅ 案例 2:水稻纹枯病自动识别与预警系统 💻三、关键技术框架与实现思路 🚦 1. 系统架构流程图: 📦 2. 模型部署建议: 💡四、未来发展趋势展望 �…...
Dify忘记管理员密码,重置的问题
今天本地win10电脑,使用源码启动dify,忘记了管理员账号和密码,于是网上查找解决办法。 1.有的网上资料说是去数据库删除用户表,于是进入数据库: docker exec -it docker-db-1 psql -U postgres -d dify 找到postgre…...
C#—Lazy<T> 类型(延迟初始化/懒加载模式)
C# 的 Lazy<T> 类型 Lazy<T> 是 C# 中的一个类,用于实现延迟初始化(懒加载)模式。它提供了一种线程安全的方式来延迟创建大型或资源密集型对象,直到第一次实际需要时才进行初始化。 主要特点 延迟初始化:…...
unity打包安卓时的签名文件jks转换keystore
前言 unity打包安卓时需要的签名文件格式默认是keystore,而有时我们拿到的是jks格式的签名文件,就需要把jks格式文件转换成keystore格式文件。 其实在windows下也可以不转换,在选择签名文件的文件选择框时,把文件扩展名筛选项&a…...