vue3+vite+pinia+vue-router+ol项目创建及配置

一、vite

(一)、定义

vite官网

(二)、操作步骤

注意:两种方式创建目录结构一致

方式一:vite创建脚手架命令:

命令行:npm create vite@latest

然后选择

方式二:命令行直接声明带上vue

二、pinia

(一)、定义

定义:pinia是一个是Vue官方团队推荐代替Vuex的一款轻量级状态管理库。

pinia官网中文文档

(二)、操作步骤

命令行:yarn add pinia 或者 npm i pinia

三、vue-router

(一)、定义

vue-router官网

(二)、操作步骤

命令行:npm install vue-router@4 或者 yarn add vue-router@4

四、openlayers

(一)、定义

openlayers官网

(二)、操作步骤

命令行:npm install -s ol

五、其它

写到这儿整个项目的目录结构及安装的版本如下:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/3870.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

快速批量改名文件!随机字母命名,让文件名更有创意!

想要让文件名更加有创意和个性化吗?不妨尝试使用随机字母来批量改名文件!无论是照片、文档还是其他文件,只需要简单的几个步骤,您就可以为它们赋予一个独特的随机字母命名。这不仅可以帮助您整理文件,还能增加一些乐趣…

非50欧系统阻抗的S参数测试

1. S参数依赖于系统阻抗 S参数的定义需要约定一个系统阻抗。同一个微波电路,在不同系统阻抗下的S参数是不同的。例如,50欧电阻在50欧系统阻抗下的S11为零,是没有反射的匹配状态;但50欧电阻在75欧系统阻抗下的S11不为零&#xff0…

Orange:一个基于 Python 的数据挖掘可视化平台

本篇介绍一个适合初学者入门的机器学习工具。 Orange 简介 Orange 是一个开源的数据挖掘和机器学习软件。Orange 基于 Python 和 C/C 开发,提供了一系列的数据探索、可视化、预处理以及建模组件。 Orange 拥有漂亮直观的交互式用户界面,非常适合新手进…

计算机网络 day11 tcpdump - 传输层 - netstat - socket - nc - TCP/UDP头部

目录 故障排查 tcpdump抓包工具 传输层(TCP和UDP协议) 传输层的作用 应用程序和端口号有什么关系? 传输层端对端连接实现拓扑图 如何查看自己的linux机器开放了哪些端口? 1、netstat(network status 网络的状态) netsta…

【ceph】存储池pg个数如何设置

存储池pg个数如何设置 参考官方文档说明:https://old.ceph.com/pgcalc/参数说明TargePGs per OSD:每个OSD的pg数OSD#存储池包含osd个数%Data存储池写入数据占总OSD容量百分比Size存储池冗余数

【复盘】记录一次类型不一致导致的Kafka消费异常问题

背景 业务主要是通过A系统向B系统写入Kafka,然后B系统消费Kafka 将结果写到Kafka中,A进行消费最终结果。 在整个流程中,A写入Kafka会写入一张 record1表记录,然后在A消费最终结果的时候也记录一张record2表。主要改动的话 只是B系…

设计模式07-责任链模式

责任链模式属于行为设计模式,常见的过滤器链就是使用责任链模式设计的。 文章目录 1、真实开发场景的问题引入2、责任链模式讲解2.1 核心类及类图2.2 基本代码 3、利用构建者模式解决问题4、责任链模式的应用实例5、总结5.1 解决的问题5.2 使用场景5.3 优缺点 1、真…

MFC 基于数据库的管理系统

文章目录 初始化设置菜单 添加数据库类创建数据库配置数据库 全部代码 初始化 创建文件选择基于CListView 初始化数据 public:CListCtrl& m_list;CSQLView::CSQLView() noexcept:m_list(GetListCtrl()) {// TODO: 在此处添加构造代码}void CSQLView::OnInitialUpdate() {C…

数据结构与算法——什么是线性表(线性存储结构)

我们知道,具有“一对一”逻辑关系的数据,最佳的存储方式是使用线性表。那么,什么是线性表呢? 线性表,全名为线性存储结构。使用线性表存储数据的方式可以这样理解,即“把所有数据用一根线儿串起来&#xf…

餐饮业油烟在线监测系统的具体应用 安科瑞 许敏

摘要:本文利用物联网技术,构建了一套餐饮企业智能油烟在线监测系统,该系统前台由厨房端和管道端组成,通过网关接入云平台管理系统,实时监控烟道阀门的启闭、变频风机的启停与风速及功率调节、油烟浓度数据等。结合动态…

随手笔记——如何手写高斯牛顿法

随手笔记——如何手写高斯牛顿法 说明源代码 说明 将演示如何手写高斯牛顿法 源代码 #include <iostream> #include <chrono> #include <opencv2/opencv.hpp> #include <Eigen/Core> #include <Eigen/Dense>using namespace std; using names…

HBase

一 HBase简介与环境部署 1.1 HBase简介&在Hadoop生态中的地位 1.1.1 什么是HBase HBase是一个分布式的、面向列的开源数据库HBase是Google BigTable的开源实现HBase不同于一般的关系数据库, 适合非结构化数据存储 1.1.2 BigTable BigTable是Google设计的分布式数据存储…

【Linux工具】编译器、调式器、项目自动化构建工具以及git的使用3(GDB调试器的基础使用)

【Linux工具】编译器、调式器、项目自动化构建工具以及git的使用3&#xff08;GDB调试器的基础使用&#xff09; 目录 【Linux工具】编译器、调式器、项目自动化构建工具以及git的使用3&#xff08;GDB调试器的基础使用&#xff09;背景gdb的一些指令gdb实际运用显示代码运行程…

【NLP】transformers的位置编码

一、背景 本文是“实现的变压器”系列的第二篇。它从头开始引入位置编码。然后,它

划片机的作用将晶圆分割成独立的芯片

划片机是将晶圆分割成独立芯片的关键设备之一。在半导体制造过程中&#xff0c;晶圆划片机用于将整个晶圆切割成单个的芯片&#xff0c;这个过程被称为“晶圆分割”或“晶圆切割”。 晶圆划片机通常采用精密的机械传动系统、高精度的切割刀具和先进的控制系统&#xff0c;以确保…

恢复idea删除的git本地文件

idea中删除git本地文件无法远程拉取pull已删除文件的问题 当前本地库处于另一个分支中&#xff0c;需将本分支Head重置&#xff0c;git 强行pull并覆盖本地文件 解决方式一&#xff1a; git fetch --all git reset --hard origin/master git pull解决方式二&#xff1a; git…

ylb-项目简介

1、各模块服务功能 注&#xff1a;其部分实体类、接口、mapper文件由MyBatis逆向工程生成。 2、Maven管理&#xff08;多模块&#xff0c;继承和聚合&#xff09; 2.1 parent模块 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"…

在SPringBoot生成验证码

1.引入依赖,这个依赖中包含了生成验证码的工具类 <!--引入hutool --><dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.3.9</version></dependency> 2.编写配置类 import cn.hu…

华润燃气牵手腾讯云 数字技术助力燃气行业高质量发展

7月13日&#xff0c;华润燃气与腾讯云正式签署战略合作协议。双方将充分发挥各自优势&#xff0c;探索AI大模型在燃气行业的深度应用&#xff0c;并深耕分布式计算、连接和客户运营等领域&#xff0c;不断提升燃气民生服务的效率、质量&#xff0c;共同推动行业数字化转型和高质…