Vite+Vue3+Cesium工程搭建及初始化

news2024/11/26 5:48:10

现如今的前端更新太快了,我记得我一年前还在写 vue2+cesium 的工程构建方式。现在转眼都 vue3 了。而且 vite 也越来越火逐渐成为趋势。那么这篇文章我们就来介绍一下如何使用 vite 构建一个 vue3+cesium 的工程。

 首先我们可以打开 vite 的官网学习如何构建 vite 项目。第一步我们可以使用 npm 安装好最新版本的 vite 构建工具。这里电脑的 node 环境和 npm 我就不说了,小白自行百度。

安装最新版的 vite并且创建 vite 项目的命令如下:

npm create vite@latest

然后会提示你项目的名称和所使用的模版类型。名称自己起一个。模版选择 vue,javascript 即可:

 现在我们基于 vite 创建的 vue 项目很快就好了。项目的文件夹结构如下:

 

我们打开项目所在的文件夹直接在 package.json文件里执行 dev 命令即可快速启动项目。

至此我们已经完成了前半部分。接下来进入重头戏我们引入 cesium,首先还是老样子使用 npm 先安装 cesium&#

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

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

相关文章

Nginx缓存代理服务器

Nginx缓存代理服务器 一、实验部署 二、搭建Nginx缓存代理服务器 1.nginx反向缓存代理服务配置 ###关闭和禁止防火墙开机自启功能 systemctl stop firewalld systemctl disable firewalld setenforce 0 sed -i s/enforcing/disabled/ /etc/selinux/config2.安装nginx服务 v…

基于SSM的人力资源管理系统

末尾获取源码 开发语言:Java Java开发工具:JDK1.8 后端框架:SSM 前端:采用JSP技术开发 数据库:MySQL5.7和Navicat管理工具结合 服务器:Tomcat8.5 开发软件:IDEA / Eclipse 是否Maven项目&#x…

剑指offer12.矩阵中的路径

太难了&#xff0c;想了一会儿没有头绪就直接看了题解。 class Solution {public boolean exist(char[][] board, String word) {int clowns board.length;int rows board[0].length;boolean[][] visited new boolean[clowns][rows];for(int i 0;i<clowns;i){for(int j0…

【QT】——QWidget窗口类

1.QWidget基本概念 QWidget 类是所有窗口类的父类 (控件类是也属于窗口类),QWidget 类的父类的 QObject, 也就意味着所有的窗口类对象只要指定了父对象, 都可以实现内存资源的自动回收.可以内嵌到其他窗口的内部&#xff0c;没有边框,需要指定父类窗口可以作为独立的窗口显示&…

DBeaver(一款非常好用的数据库管理工具)大批量数据导入导出非常友好

DBeaver(一款非常好用的数据库管理工具)大批量数据导入导出非常友好 背景说明&#xff1a; 最近因工作需要进行大批量的数据导入导出&#xff0c;很多工具都很难完成千万级以上的单表数据导入导出工作。后来找到了DBeaver这款工具&#xff0c;可以将千万级数据进行分批写入或导…

安装部署mysql

1.二进制方式安装 (1)下载压缩包 (2)创建用户和组 (3)解压 &#xff08;4&#xff09;创建软链接 (5)初始化 &#xff08;6&#xff09; 2.使用yum方式安装 (1)用yum install wget unzip bash-completion tree vim lrzsz net-tools -y命令安装常用软件 (2)用yum install mysql…

【数据仓库】FineBI数据可视化使用体验

FineBI介绍 FineBI是新一代自助式BI工具,企业客户多,服务范围广.凭借finebi简单流畅的操作,强劲的大数据性能和自助式的分析体验。 1&#xff0c;对个人用户来说&#xff0c;免费的无限期试用&#xff0c;解锁所有功能&#xff0c;除了限制两个并发访问&#xff0c;个人用户可以…

vue门户系统实现顶部菜单下拉效果

门户系统实现顶部菜单下拉效果 组件封装 直接上代码&#xff0c;已经封装成组件&#xff0c;只要传输正确的数据格式即可使用。 <template> <div class"head-v3" id"index"><div class"navigation-up"><div class"…

Java SSM 重制版(二)SpringMvc

SpringMVC基础 进入之前&#xff1a;《Spring核心内容》《JavaWeb》《JDK9-17新特性篇》 在前面学习完Spring框架技术之后&#xff0c;差不多会出现两批人&#xff1a;一批是听得云里雾里&#xff0c;依然不明白这个东西是干嘛的&#xff1b;还有一批就是差不多理解了核心思想…

大的zip文件使用7-zip软件分卷压缩和还原

使用7-zip软件进行分卷压缩和还原 1、7-zip软件的安装 官网&#xff1a;https://www.7-zip.org。 2、将比较大的zip文件拆分 设置压缩格式zip,分卷最大150M 拆分后 3、还原 还原后&#xff0c;又重新生成了原zip文件

qt各控件总结

qt控件又称组件或者部件&#xff0c;指用户看到的所有可视化界面以及界面中的各个元素&#xff0c;比如按钮&#xff0c;文本框&#xff0c;输入框等。1.QMainWindow类生成的窗口自带菜单栏&#xff0c;工具栏和状态栏&#xff0c;中央区域还可添加多个控件&#xff0c;常用来作…

Python_关于python2的encode(编码)和decode(解码)的使用

目录 python执行过程的编解码 encode&decode 中文乱码解决方法 常见问题 格式化带有中文的字符串报错 带有中文的字符串反转后乱码 在使用Python2时&#xff0c;我们习惯于在文件开头声明编码 # coding: utf-8 不然在文件中出现中文&#xff0c;运行时就会报错 Syn…

查看和指定GPU服务器显卡训练模型

查看和指定GPU服务器显卡 1.查看显卡2.间隔查看GPU使用情况3.查看当前显卡信息4. 使用os指定使用的显卡 1.查看显卡 nvidia-smiGPU&#xff1a;GPU 编号&#xff1b;与实际编号不一定一致 Name&#xff1a;GPU 型号&#xff1b; Persistence-M&#xff1a;持续模式的状态。持续…

【TEVC 2023】用于进化计算的知识学习 + 进化计算(Evolutionary computation (EC) )其中的一些概念

Knowledge Learning for Evolutionary Computation 进化计算&#xff08;Evolutionary computation (EC) &#xff09;是一种从自然进化和群体智能行为&#xff08;swarm intelligence behaviors&#xff09;中汲取灵感的元启发式算法。 目前&#xff0c;EC以其解决优化问题的…

《Redis 核心技术与实战》课程学习笔记(二)

数据结构&#xff1a;快速的 Redis 有哪些慢操作 数据库这么多&#xff0c;为啥 Redis 能有这么突出的表现呢&#xff1f; 一方面&#xff0c;因为它是内存数据库&#xff0c;所有操作都在内存上完成&#xff0c;内存的访问速度本身就很快。另一方面&#xff0c;因为&#xff…

SQL入门教程(非常详细)从零基础入门到精通,看完这一篇就够了

导读&#xff1a; SQL语言有40多年的历史&#xff0c;从它被应用至今几乎无处不在。我们消费的每一笔支付记录&#xff0c;收集的每一条用户信息&#xff0c;发出去的每一条消息&#xff0c;都会使用数据库或与其相关的产品来存储&#xff0c;而操纵数据库的语言正是 SQL &…

vue页面中一个小列表中多选框的选中状态的两种设置方法

第一种方法:所有类型都是固定的、后台提供了选中状态的接口(页面进入时默认展示所有类型和类型的选中状态 思路: 1、列出所有类型同时与后台规定好每种类型的id与对应的名称 2、在mounted中执行获取后台给定的选中状态(包含1个或多个的id数组) 3、将得到的结构绑定到el-ch…

单元测试基础

一、什么是单元测试&#xff1a; 单元测试是指&#xff0c;对软件中的最小可测试单元在与程序其他部分相隔离的情况下进行检查和验证的工作&#xff0c;这里的最小可测试单元通常是指函数或者类&#xff1b;单元测试属于最严格的软件测试手段&#xff0c;是最接近代码底层实现…

剑指 Offer 14- II: 剪绳子 II

这道题不能使用动态规划来解决&#xff0c;因为会越界。用贪心算法找规律可以得到答案&#xff08;3越多越好&#xff0c;小于等于4取本身的值&#xff09; 这道题错的原因在于res在存储过程中会越界&#xff0c;最轻微的上溢是 INT_MAX 1 &#xff1a;结果是 INT_MIN。 最严重…

C++学习笔记-第10单元 模板初步

第10单元 模板初步 文章目录 第10单元 模板初步单元导读10.1 模板与泛型编程10.1.1 元编程与泛型编程10.1.2 初识模板 10.2 函数模板10.2.1 函数模板10.2.2 函数模版实例化 10.3 排序示例与泛型化10.3.1 例子&#xff1a;选择排序10.3.2 将一个函数泛型化 10.4 类模板10.4.1 类…