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

01vue3实战-----前言

01vue3实战-----前言

  • 1.大前端时代
  • 2.技术栈
  • 3.项目大致展示
  • 4.创建Vue项目
    • 4.1Vue CLI
    • 4.2create-vue
  • 5.参考资料

1.大前端时代

  • 前端
  • 移动端iOS/android开发
  • 桌面端 window/mac
    常用的electron框架来开发
  • 其它平台:穿戴设备、车载系统(智能汽车)、VR、AR…
  • web3方向

2.技术栈

  • 开发工具 :Visual Studio Code
  • 编程语言 :TypeScript4.x+JavaScript(本项目主要用TypeScript)
  • 构建工具 :Vite3.x/Webpack5.x(本项目用Vite)
  • 前端框架 :Vue3.x+setup
  • 路由工具 :Vue Router4.x
  • 状态管理 :Vuex4.x/Pinia(本项目用Pinia)
  • UI 框架 :Element Plus/ElementUI/AntDesignVue(本项目用Element Plus)
  • 可视化 :Echart5.x
  • 工具库 :@vueuse/core + dayjs + countup.js等等
  • CSS预编译 :Sass/Less
  • HTTP工具: Axios
  • Git Hook工具 :husky
  • 代码规范 :EditorConfig+Prettier+ESLint
  • 提交规范 :Commitizen+Commitlint
  • 自动部署 :Centos+Jenkins+Nginx

3.项目大致展示

截图1:
在这里插入图片描述
截图2:
在这里插入图片描述

4.创建Vue项目

4.1Vue CLI

基于webpack工具;
命令:vue create ‘项目名称’

4.2create-vue

基于vite工具;
命令:npm init vue@latest

在这里我用第二种方式创建项目(用第一种方式也可以,很多东西大同小异)。
在这里插入图片描述
在这里简单解释一下上述的配置。JSX这个在react框架中经常用到,在自己开发组件库时候也可能会用到,这个项目中不太用得到,所以选择否。路由和状态管理工具都是需要的,但这里选择否,后续自己手动配置。
以下是目录结构(目录结构大同小异,随着版本更新目录会发生一些变化):
在这里插入图片描述
执行以上命令:

 cd vue3-ts-cmsnpm installnpm run dev

5.参考资料

注意,该专栏是用于讲述基于vue3+ts的简易实战项目的。通过一个简单的后台管理系统,可以学到vue3+ts的大多数编码规范(与vue2有所不同)。
该专栏大多数内容都是参考B站某个老师的,不用于商业用途。参考链接为:https://www.bilibili.com/video/BV1NDBNYZEZe

相关文章:

01vue3实战-----前言

01vue3实战-----前言 1.大前端时代2.技术栈3.项目大致展示4.创建Vue项目4.1Vue CLI4.2create-vue 5.参考资料 1.大前端时代 前端移动端iOS/android开发桌面端 window/mac 常用的electron框架来开发其它平台:穿戴设备、车载系统(智能汽车)、VR、AR…web3方向 2.技术栈 开发工…...

SQL 秒变三线表 sql导出三线表

🎯SQL 秒变三线表,校园小助手超神啦 宝子们,搞数据分析、写论文的时候,从 SQL 里导出数据做成三线表是不是特别让人头疼😩 手动调整格式,不仅繁琐,还容易出错,分分钟把人逼疯&#…...

C_位运算符及其在单片机寄存器的操作

C语言的位运算符用于直接操作二进制位,本篇简单结束各个位运算符的作业及其在操作寄存器的应用场景。 一、位运算符的简单说明 1、按位与运算符(&) 功能:按位与运算符对两个操作数的每一位执行与操作。如果两个对应的二进制…...

Rust错误处理:从灭火器到核按钮的生存指南

开篇:错误处理的生存哲学 在Rust的平行宇宙里,错误分为两种人格: panic! → 核按钮💣(不可恢复,全系统警报)Result → 灭火器🧯(可控制,局部处理&#xff0…...

YK人工智能(六)——万字长文学会基于Torch模型网络可视化

1. 可视化网络结构 随着深度神经网络做的的发展,网络的结构越来越复杂,我们也很难确定每一层的输入结构,输出结构以及参数等信息,这样导致我们很难在短时间内完成debug。因此掌握一个可以用来可视化网络结构的工具是十分有必要的…...

对象的实例化、内存布局与访问定位

一、创建对象的方式 二、创建对象的步骤: 一、判断对象对应的类是否加载、链接、初始化: 虚拟机遇到一条new指令,首先去检查这个指令的参数能否在Metaspace的常量池中定位到一个类的符号引用,并且检查这个符号引用代表的类是否已经被加载、解析和初始化…...

Java面试题2025-并发编程进阶(线程池和并发容器类)

线程池 一、什么是线程池 为什么要使用线程池 在开发中,为了提升效率的操作,我们需要将一些业务采用多线程的方式去执行。 比如有一个比较大的任务,可以将任务分成几块,分别交给几个线程去执行,最终做一个汇总就可…...

Vue Router 客户端路由解决方案:axios 响应拦截(跳转到登录页面)

文章目录 引言客户端路由 vs. 服务端路由简单的路由案例术语I Vue Router 提供的组件RouterLinkRouterViewII 创建路由器实例调用 createRouter() 函数创建路由选项III 注册路由器插件通过调用 use() 来完成注册路由器插件的职责对于组合式 API,Vue Router 给我们提供了一些组…...

Redis的通用命令

⭐️前言⭐️ 本文主要介绍Redis的通用命令 🍉欢迎点赞 👍 收藏 ⭐留言评论 🍉博主将持续更新学习记录收获,友友们有任何问题可以在评论区留言 🍉博客中涉及源码及博主日常练习代码均已上传GitHub 📍内容导…...

[Python人工智能] 四十九.PyTorch入门 (4)利用基础模块构建神经网络并实现分类预测

从本专栏开始,作者正式研究Python深度学习、神经网络及人工智能相关知识。前文讲解PyTorch构建回归神经网络。这篇文章将介绍如何利用PyTorch构建神经网络实现分类预测,其是使用基础模块构建。前面我们的Python人工智能主要以TensorFlow和Keras为主,而现在最主流的深度学习框…...

SpringBoot使用 easy-captcha 实现验证码登录功能

文章目录 一、 环境准备1. 解决思路2. 接口文档3. redis下载 二、后端实现1. 引入依赖2. 添加配置3. 后端代码实现4. 前端代码实现 在前后端分离的项目中,登录功能是必不可少的。为了提高安全性,通常会加入验证码验证。 easy-captcha 是一个简单易用的验…...

RabbitMQ 从入门到精通:从工作模式到集群部署实战(一)

#作者:闫乾苓 文章目录 RabbitMQ简介RabbitMQ与VMware的关系架构工作流程RabbitMQ 队列工作模式及适用场景简单队列模式(Simple Queue)工作队列模式(Work Queue)发布/订阅模式(Publish/Subscribe&#xff…...

Unity中的虚拟相机(Cinemachine)

Unity Cinemachine详解 什么是Cinemachine Cinemachine是Unity官方推出的智能相机系统,它提供了一套完整的工具来创建复杂的相机运动和行为,而无需编写大量代码。它能够大大简化相机管理,提高游戏开发效率。 Cinemachine的主要组件 1. Vi…...

响应式编程_04Spring 5 中的响应式编程技术栈_WebFlux 和 Spring Data Reactive

文章目录 概述响应式Web框架Spring WebFlux响应式数据访问Spring Data Reactive 概述 https://spring.io/reactive 2017 年,Spring 发布了新版本 Spring 5, Spring 5 引入了很多核心功能,这其中重要的就是全面拥抱了响应式编程的设计思想和实…...

网络设备的安全加固

设备的安全始终是信息网络安全的一个重要方面,攻击者往往通过控制网络中设备来破坏系统和信息,或扩大已有的破坏。网络设备包括主机(服务器、工作站、PC)和网络设施(交换机、路由器等)。 一般说来&#xff…...

OpenCV:特征检测总结

目录 一、什么是特征检测? 二、OpenCV 中的常见特征检测方法 1. Harris 角点检测 2. Shi-Tomasi 角点检测 3. Canny 边缘检测 4. SIFT(尺度不变特征变换) 5. ORB 三、特征检测的应用场景 1. 图像匹配 2. 运动检测 3. 自动驾驶 4.…...

Java高频面试之SE-17

hello啊,各位观众姥爷们!!!本牛马baby今天又来了!哈哈哈哈哈嗝🐶 Java缓冲区溢出,如何解决? 在 Java 中,缓冲区溢出 (Buffer Overflow) 虽然不是像 C/C 中那样直接可见…...

移动机器人规划控制入门与实践:基于navigation2 学习笔记(一)

课程实践: (1)手写A*代码并且调试,总结优缺点 (2)基于Gazebo仿真,完成给定机器人在给定地图中的导航调试 (3)使用Groot设计自己的导航行为树 掌握一门技术 规划控制概述 常见移动机器人...

每日一题洛谷P5721 【深基4.例6】数字直角三角形c++

#include<iostream> using namespace std; int main() {int n;cin >> n;int t 1;for (int i 0; i < n; i) {for (int j 0; j < n - i; j) {printf("%02d",t);t;}cout << endl;}return 0; }...

RTMP 和 WebRTC

WebRTC(Web Real-Time Communication)和 RTMP(Real-Time Messaging Protocol)是两种完全不同的流媒体协议,设计目标、协议栈、交互流程和应用场景均有显著差异。以下是两者的详细对比,涵盖协议字段、交互流程及核心设计思想。 一、协议栈与设计目标对比 特性RTMPWebRTC传…...

数据库技术基础

1 数据库系统概述 1.1 数据库的4个概念 &#xff08;1&#xff09;数据&#xff08;信息&#xff09; 数据&#xff1a;指已记录或可获取的事实&#xff0c;是数据库存储的最小单元。除文本、数字外&#xff0c;还有图形、图像、声音等。 数据由于能为用户利用才被记录和保…...

如何获取sql数据中时间的月份、年份(类型为date)

可用自带的函数month来实现 如&#xff1a; 创建表及插入数据&#xff1a; create table test (id int,begindate datetime) insert into test values (1,2015-01-01) insert into test values (2,2015-02-01) 执行sql语句,获取月份&#xff1a; select MONTH(begindate)…...

每日Attention学习18——Grouped Attention Gate

模块出处 [ICLR 25 Submission] [link] UltraLightUNet: Rethinking U-shaped Network with Multi-kernel Lightweight Convolutions for Medical Image Segmentation 模块名称 Grouped Attention Gate (GAG) 模块作用 轻量特征融合 模块结构 模块特点 特征融合前使用Group…...

分析用户请求K8S里ingress-nginx提供的ingress流量路径

前言 本文是个人的小小见解&#xff0c;欢迎大佬指出我文章的问题&#xff0c;一起讨论进步~ 我个人的疑问点 进入的流量是如何自动判断进入iptables的四表&#xff1f;k8s nodeport模式的原理&#xff1f; 一 本机环境介绍 节点名节点IPK8S版本CNI插件Master192.168.44.1…...

TensorFlow是个啥玩意?

TensorFlow是一个开源的机器学习框架&#xff0c;由Google开发。它可以帮助开发者构建和训练各种机器学习模型&#xff0c;包括神经网络和深度学习模型。TensorFlow的设计理念是使用数据流图来表示计算过程&#xff0c;其中节点表示数学运算&#xff0c;边表示数据流动。 Tens…...

初识C语言、C语言的学习方向总述与入门

目录 1. 什么是C语言&#xff1f; 2. 第一个C语言程序 3. 数据类型 4. 变量、常量 4.1 定义变量的方法 4.2 变量的命名 4.3 变量的分类 4.4 变量的作用域和生命周期 4.5 常量 5. 字符串转义字符注释 5.1 字符串 5.2 转义字符 6. 注释 7. 选择语句 8. 循环语句 …...

零基础学习书生.浦语大模型-入门岛

第一关&#xff1a;Linux基础知识 任务一&#xff1a;Cursor连接SSH运行代码 使用Remote - SSH插件即可 运行指令 python hello_world.py端口映射 ssh -p 46561 rootssh.intern-ai.org.cn -CNg -L 7860:127.0.0.1:7860 -o StrictHostKeyCheckingno 注&#xff1a;46561&a…...

【R语言】获取数据

R语言自带2种数据存储格式&#xff1a;*.RData和*.rds。 这两者的区别是&#xff1a;前者既可以存储数据&#xff0c;也可以存储当前工作空间中的所有变量&#xff0c;属于非标准化存储&#xff1b;后者仅用于存储单个R对象&#xff0c;且存储时可以创建标准化档案&#xff0c…...

MongoDB学习笔记-解析jsonCommand内容

如果需要屏蔽其他项目对MongoDB的直接访问操作&#xff0c;统一由一个入口访问操作MongoDB&#xff0c;可以考虑直接传入jsonCommand语句解析执行。 相关依赖包 <!-- SpringBootDataMongodb依赖包 --> <dependency><groupId>org.springframework.boot</…...

国产编辑器EverEdit - 工具栏说明

1 工具栏 1.1 应用场景 当用户想显示/隐藏界面的标签栏、工具栏、状态栏、主菜单等界面元素时&#xff0c;可以通过EverEdit的菜单选项进行设置。 1.2 使用方法 选择菜单查看 -> 工具栏&#xff0c;在工具栏的子菜单中选择勾选或去掉勾选对应的选项。 标签栏&#xff1…...

linux 函数 sem_init () 信号量、sem_destroy()

&#xff08;1&#xff09; &#xff08;2&#xff09; 代码举例&#xff1a; #include <stdio.h> #include <stdlib.h> #include <pthread.h> #include <semaphore.h> #include <unistd.h>sem_t semaphore;void* thread_function(void* arg) …...

制造业设备状态监控与生产优化实战:基于SQL的序列分析与状态机建模

目录 1. 背景与挑战 2. 数据建模与采集 2.1 数据表设计 设备状态表(记录设备实时状态变更)...

密码学的数学基础1-素数和RSA加密

数学公式推导是密码学的基础, 故开一个新的课题 – 密码学的数学基础系列 素数 / 质数 质数又称素数。 一个大于1的自然数&#xff0c;除了1和它自身外&#xff0c;不能被其他自然数整除的数叫做质数&#xff1b;否则称为合数&#xff08;规定1既不是质数也不是合数&#xff0…...

C++ Primer 算术运算符

欢迎阅读我的 【CPrimer】专栏 专栏简介&#xff1a;本专栏主要面向C初学者&#xff0c;解释C的一些基本概念和基础语言特性&#xff0c;涉及C标准库的用法&#xff0c;面向对象特性&#xff0c;泛型特性高级用法。通过使用标准库中定义的抽象设施&#xff0c;使你更加适应高级…...

计算图 Compute Graph 和自动求导 Autograd | PyTorch 深度学习实战

前一篇文章&#xff0c;Tensor 基本操作5 device 管理&#xff0c;使用 GPU 设备 | PyTorch 深度学习实战 本系列文章 GitHub Repo: https://github.com/hailiang-wang/pytorch-get-started PyTorch 计算图和 Autograd 微积分之于机器学习Computational Graphs 计算图Autograd…...

Vue 图片引用方式详解:静态资源与动态路径访问

目录 前言1. 引用 public/ 目录2. assets/ 目录3. 远程服务器4. Vue Router 动态访问5. 总结6. 扩展&#xff08;图片不显示&#xff09; 前言 &#x1f91f; 找工作&#xff0c;来万码优才&#xff1a;&#x1f449; #小程序://万码优才/r6rqmzDaXpYkJZF 在 Vue 开发中&#x…...

熟练掌握Http协议

目录 基本概念请求数据Get请求方式和Post请求方式 响应数据响应状态码 基本概念 Http协议全称超文本传输协议(HyperText Transfer Protocol)&#xff0c;是网络通信中应用层的协议&#xff0c;规定了浏览器和web服务器数据传输的格式和规则 Http应用层协议具有以下特点&#…...

爬虫学习笔记之Robots协议相关整理

定义 Robots协议也称作爬虫协议、机器人协议&#xff0c;全名为网络爬虫排除标准&#xff0c;用来告诉爬虫和搜索引擎哪些页面可以爬取、哪些不可以。它通常是一个叫做robots.txt的文本文件&#xff0c;一般放在网站的根目录下。 robots.txt文件的样例 对有所爬虫均生效&#…...

血压计OCR文字检测数据集VOC+YOLO格式2147张11类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;2147 标注数量(xml文件个数)&#xff1a;2147 标注数量(txt文件个数)&#xff1a;2147 …...

正则表达式详细介绍

目录 正则表达式详细介绍什么是正则表达式&#xff1f;元字符转义字符字符类限定字符字符分枝字符分组懒惰匹配和贪婪匹配零宽断言 正则表达式详细介绍 什么是正则表达式&#xff1f; 正则表达式是一组由字母和符号组成的特殊文本&#xff0c;它可以用来从文本中找出满足你想…...

初识ArkTS语言

文章目录 ArkTS是HarmonyOS优选的主力应用开发语言。ArkTS围绕应用开发在TypeScript&#xff08;简称TS&#xff09;生态基础上做了进一步扩展&#xff0c;保持了TS的基本风格&#xff0c;同时通过规范定义强化开发期静态检查和分析&#xff0c;提升程序执行稳定性和性能。 从…...

Go语言并发之美:构建高性能键值存储系统

摘要 本文介绍了基于Go语言实现的高性能并发键值存储系统。通过深入探讨Go语言在并发编程中的优势&#xff0c;文章详细阐述了系统的锁机制、分片优化、内存管理和持久化设计等关键环节。这些设计展示了如何在系统开发中进行有效的权衡&#xff0c;以确保最优性能。该系统不仅充…...

6. k8s二进制集群之各节点部署

获取kubernetes源码安装主节点&#xff08;分别执行以下各节点命令&#xff09;安装工作节点&#xff08;同步kebelet和kube-proxy到各工作节点&#xff09;总结 继续上一篇文章《k8s二进制集群之ETCD集群部署》下面介绍一下各节点的部署与配置。 获取kubernetes源码 https:/…...

从0开始使用面对对象C语言搭建一个基于OLED的图形显示框架

目录 前言 环境介绍 代码与动机 架构设计&#xff0c;优缺点 博客系列指引 前言 笔者前段时间花费了一周&#xff0c;整理了一下自从TM1637开始打算的&#xff0c;使用OLED来搭建一个通用的显示库的一个工程。笔者的OLED库已经开源到Github上了&#xff0c;地址在&#xf…...

spring基础总结

先修知识&#xff1a;依赖注入&#xff0c;反转控制&#xff0c;生命周期 IDEA快捷键 Ctrl Altm:提取方法&#xff0c;设置trycatch 通用快捷键&#xff1a; Ctrl F&#xff1a;在当前文件中查找文本。Ctrl R&#xff1a;在当前文件中替换文本。Ctrl Z&#xff1a;撤销…...

基础相对薄弱怎么考研

复习总体规划 明确目标 选择专业和院校&#xff1a;根据你的兴趣、职业规划和自身实力&#xff0c;选择适合自己的专业和院校。可以参考往年的分数线、报录比、复试难度等。了解考试科目&#xff1a;不同专业考试科目不同&#xff0c;一般包括&#xff1a; 公共课&#xff1a…...

代码随想录36 动态规划

leetcode 343.整数拆分 给定一个正整数 n &#xff0c;将其拆分为 k 个 正整数 的和&#xff08; k > 2 &#xff09;&#xff0c;并使这些整数的乘积最大化。 返回 你可以获得的最大乘积 。 示例 1: 输入: n 2 输出: 1 解释: 2 1 1, 1 1 1。 示例 2: 输入: n 1…...

p5r预告信生成器API

p5r预告信生成器API 本人将js生成的p5r预告信使用go语言进行了重写和部署&#xff0c;并开放了其api&#xff0c;可以直接通过get方法获取预告信的png。 快速开始 http://api.viogami.tech/p5cc/:text eg: http://api.viogami.tech/p5cc/persona5 感谢p5r风格字体的制作者和…...

React图标库: 使用React Icons实现定制化图标效果

React图标库: 使用React Icons实现定制化图标效果 图标库介绍 是一个专门为React应用设计的图标库&#xff0c;它包含了丰富的图标集合&#xff0c;覆盖了常用的图标类型&#xff0c;如FontAwesome、Material Design等。React Icons可以让开发者在React应用中轻松地添加、定制各…...

说说Redis的内存淘汰策略?

大家好&#xff0c;我是锋哥。今天分享关于【说说Redis的内存淘汰策略?】面试题。希望对大家有帮助&#xff1b; 说说Redis的内存淘汰策略? 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 Redis 提供了多种内存淘汰策略&#xff0c;用于在内存达到限制时决定如何…...