前置开发环境
首先确保电脑已经安装node.js,vue.js,搜索cmd,以管理员身份运行,
分别输入以下命令,检查环境配置是否成功;
node -v
npm -v
vue -V
如果输出版本号,则说明环境配置成功,这里每个人安装的版本可能不一样;
创建一个Vue3项目
初始化Vue项目,在我们要创建Vue项目的地方打开cmd,执行以下命令:
// demo为项目名
vue create demo
接着选择创建项目的Vue配置信息,这里默认是Vue3项目,这里我们选择自定义配置,也可以直接创建vue3项目,跳过以下步骤
这里我选择的是以下配置,按空格选择,然后下一步
下一步,这里选择3.X,如果你选择 "Choose a version of Vue.js that you want to start the project with 3.x",那么你的项目将基于 Vue.js 3.x 进行开发。在项目的配置和代码中,你将使用与 Vue.js 3.x 相关的特性、选项和 API。
这句话的意思是:是否使用历史模式的路由器?(在生产环境中需要正确的服务器设置以支持索引回退)(Y/n),这里我选择的是n,大家也可以根据自己的需要进行选择;
在 Vue.js 项目中,路由器可以使用历史模式来实现无刷新的页面导航。当使用历史模式时,浏览器不会发送标准的
GET
请求来加载新的页面,而是通过浏览器的历史记录来进行导航。
"Use history mode for router?" 询问你是否要使用历史模式的路由器。
"Requires proper server setup for index fallback in production" 表示在生产环境中需要正确的服务器设置以支持索引回退。这意味着在服务器端需要配置适当的规则,以确保当用户在浏览器中输入错误的 URL 或后退到不存在的页面时,能够正确地显示默认的索引页面或提供适当的错误提示。
"Y/n" 是一个提示,询问你是否同意使用历史模式的路由器。你可以选择输入 "Y" 表示同意,或者输入 "N" 表示不同意。
如果你选择 "Y",那么 Vue.js 的路由器将使用历史模式进行导航,并在服务器端进行适当的配置以支持索引回退。这样可以提供更好的用户体验,特别是在单页面应用(SPA)中。
如果你不确定或不想使用历史模式,或者你的服务器环境不支持或不需要特定的配置,你可以选择输入 "N",然后 Vue.js 的默认路由器模式将被使用。
这句话的意思是:选择一个 CSS 预处理器(PostCSS、Autoprefixer 和 CSS Modules 默认支持)。
在前端开发中,使用 CSS 预处理器可以提高开发效率和代码的可维护性。这里提供了几个常见的 CSS 预处理器供你选择。
PostCSS 是一个强大的工具,它可以对 CSS 进行后处理,提供了丰富的插件生态系统,可用于自动添加浏览器前缀、优化代码、压缩等功能。
Autoprefixer 是 PostCSS 的一个插件,用于自动添加浏览器前缀,确保你的 CSS 在不同的浏览器中都能正确渲染。
CSS Modules 是一种将 CSS 模块化为独立的模块的方法,每个模块具有唯一的类名,避免了全局样式的冲突,并提高了代码的复用性和可维护性。
这句话的意思是:选择一个代码风格检查器/格式化器的配置。
在软件开发中,代码风格和格式的一致性非常重要。代码风格检查器可以帮助你确保代码遵循一定的规范和标准,提高代码的可读性和可维护性。而格式化器则可以自动调整代码的格式,使其更加整洁和易读。
这里提供了一些常见的代码风格检查器/格式化器的配置供你选择。
"ESLint" 是一个广泛使用的 JavaScript 代码风格检查器,它可以检查代码中的语法错误、风格问题等,并提供相应的修复建议。
"Prettier" 是一个强大的代码格式化器,它可以根据你指定的配置对代码进行格式化,确保代码风格的一致性。
"Stylelint" 是一个专门用于 CSS 和 Sass 代码风格检查和格式化的工具。
在选择额外的 Lint 功能时,推荐选择 “Lint on save”。这个选项表示在保存文件时进行代码检查,可以即时发现并修复代码中的潜在问题,有助于保持代码质量和规范。因此,建议选择此功能以确保代码在保存时即时进行Lint检查。。
你可以使用空格键来选择或取消选择特定的检查功能,使用 a 键来切换所有功能的选择状态,使用 i 键来反转选择状态,然后按回车键继续。
这句话的意思是:你更倾向于在哪里放置 Babel、ESLint 等的配置?
在软件开发中,Babel 和 ESLint 等工具通常需要配置一些选项来满足项目的需求。关于配置文件的放置位置,可以根据项目的结构和团队的约定来决定。
这里提供了一些常见的放置位置供你选择。
"Inline" 表示将配置直接写在代码中,与代码本身紧密结合。这种方式简单直接,但不利于团队协作和代码维护。
"Project root" 意味着将配置文件放在项目的根目录下。这样可以方便地在整个项目中共享配置,并且易于管理。
"Package.json" 是 Node.js 项目中常用的配置文件,你可以在其中添加 Babel 和 ESLint 的相关配置。这样可以将配置与项目的依赖管理关联起来。
"VS Code workspace settings" 适用于使用 Visual Studio Code 作为开发工具的项目。你可以在 workspace settings 中设置特定的配置,以满足项目的需求。
你可以使用箭头键上下移动选择你想要的配置放置位置,然后按回车键确认选择。
这里里是问你是否需要将刚才选择的一系列配置保存起来,然后它可以帮你记住上面的一系列选择,以便下次直接重用。
这里根据自己需要输入 y 或者 n,我这里输入 n 不需要。
接着点击回车,开始创建项目
项目创建成功
引入cesium库
打开VS code,打开我们刚刚创建的文件夹,点击package.json,可以查看该项目的详细信息
接着我们新建一个终端
输入以下命令,引入cesiu库,-D 是
--save-dev
的缩写,这里我们将 Cesium 添加至开发时依赖即可。
npm install cesium -D
现在可以在这里看见cesium的版本号,说明我们已经引入成功
修改项目配置
接下来修改配置文件,打开vue.config.js,修改为以下内容
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');
const webpack = require('webpack');
// CesiumJS源代码的路径
const cesiumSource = 'node_modules/cesium/Source';
const cesiumWorkers = '../Build/Cesium/Workers';
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
configureWebpack: {
output: {
sourcePrefix: ''
},
resolve: {
fallback: { "https": false, "zlib": false, "http": false, "url": false },
},
plugins: [
// 复制Cesium的Assets、Widgets和Workers到一个静态目录
new CopyWebpackPlugin({
patterns: [
{ from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' },
{ from: path.join(cesiumSource, 'Assets'), to: 'Assets' },
{ from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' },
{ from: path.join(cesiumSource, 'ThirdParty'), to: 'ThirdParty' }
]
}),
new webpack.DefinePlugin({
//在Cesium中定义一个相对基本路径来加载资源
CESIUM_BASE_URL: JSON.stringify('')
})
],
}
})
接下来修改样式,我们在src目录下新建一个style文件夹,创建两个样式文件,一个是base.css,一个是index.css,
其中base.css用来书写一些基础通用的样式,内容如下
html,
body,
#app {
height: 100%;
margin: 0;
padding: 0;
}
在index.css中引入我们刚刚建立的base.css样式
@import './base.css';
然后我们在main.js中引入index.css
import './style/index.css'
获取token
然后我们需要去cesium官网获取一个token,https://cesium.com/,这里我已经注册过了,只需要输入自己的邮箱按流程注册即可
然后回到VS code,修改App.vue的内容
<template>
<div id="cesiumContainer"></div>
</template>
<script>
import { onMounted } from 'vue';
import { Ion,Viewer } from 'cesium';
import 'cesium/Build/Cesium/Widgets/widgets.css';
Ion.defaultAccessToken = '这里替换为自己的token'
export default {
name: 'App',
setup() {
onMounted(() => {
const viewer = new Viewer('cesiumContainer', {
animation:true, //是否打开创建动画小控件,即左下角的仪表
baseLayerPicker:true,//是否显示图层选择器
fullscreenButton:true,//是否显示全屏按钮
geocoder:true,//是否显示Geocoder(右上角的查询按钮)
homeButton:true,//是否显示Home按钮
infoBox: true,//是否显示信息框
sceneModePicker:true,//是否显示三维地球/二维地图选择器
selectionIndicator:true,//是否显示选取指示器
timeline: true, //是否关闭时间线
navigationHelpButton: false, // 帮助提示
});
// 去除版权信息
viewer._cesiumWidget._creditContainer.style.display = 'none';
})
}
}
</script>
<style scoped>
#cesiumContainer {
height: 100%;
margin: 0;
padding: 0;
}
</style>
运行项目
最后在终端输入以下命令
npm run serve
最终运行效果如下
版权归原作者 过河不拆乔 所有, 如有侵权,请联系我们删除。