移动端和pc网站,机票旅游网站开发,做网站一年赚80亿,遂宁市建设银行网站创建vue3项目并集成cesium插件
一、vue项目创建
1、前期准备 node.jsnpm或yarn 本地开发环境已经安装好。
参考安装
2、安装vue-cli#xff0c;要求3以上版本
#先查看是否已经安装
vue -V#安装
npm install -g vue/cli4.5.17
示例#xff1a;Idea工具 页面 Termin…创建vue3项目并集成cesium插件
一、vue项目创建
1、前期准备 node.jsnpm或yarn 本地开发环境已经安装好。
参考安装
2、安装vue-cli要求3以上版本
#先查看是否已经安装
vue -V#安装
npm install -g vue/cli4.5.17
示例Idea工具 页面 Terminal 窗口 安装查看 cmd 命令窗口 查看 3、如果版本不合适协助重装
#查看版本
vue -V #全局卸载
npm uninstall -g vue-cli
4、创建项目
vue create vue_cesium_project
示例图 选择版本Vue3点击鼠标下键然后回车 5、创建完成后进入项目目录 6、启动项目
yarn serve
示例图 两个访问地址 # 自己访问的地址- Local: http://localhost:8080/ # 同网段别的电脑访问你服务器的地址- Network: http://192.168.1.2:8080/访问结果 另外这些依赖和配置文件都是创建项目时下载的 二、配置cesium地图插件
1、安装cesium插件依赖
#默认安装最新的
yarn add cesium#卸载插件
yarn remove cesium#安装指定版本的
yarn add cesium1.96.0#安装指定版本到测试环境
yarn add cesium1.96.0 -D
安装成功 配置文件变化 cesium目录内容
Build文件夹是打包之后的Cesium库文件压缩。
Source文件夹是Cesium整个项目工程的重中之重涉及到的所有类的源码和自定义shader渲染源码都存储在此文件夹里可以通过阅读源码研究每个类、属性、方法及事件的实现原理。
node_modules 文件夹的目录结构通常是因为 Cesium 使用了 npm 或者其他类似的包管理工具来管理其依赖项和开发环境。
.husky 文件夹通常用于存放 Husky 工具的配置文件和钩子脚本。 .husky 文件夹用于配置 Git 钩子Git hooks和相关脚本。
Husky 是一个 Git 钩子工具它可以让开发人员在 Git 操作的不同阶段执行自定义的脚本比如在提交代码前执行代码格式化、Lint 检查、单元测试等操作。在 .husky 文件夹中通常会包含一些预定义的 Git 钩子脚本比如 pre-commit、pre-push 等。开发人员可以根据需要自定义 Git 钩子脚本并将其放置在 .husky 文件夹中相应的钩子文件中例如 pre-commit 钩子脚本会在提交代码前执行。配置 Husky 工具的方式通常是在项目的 package.json 文件中添加相应的配置项例如指定钩子脚本的路径和需要执行的命令等。 2、卸载后安装指定版本 依赖自动删除 安装指定版本去官网看看Downloads – Cesium 找稳定版本方法GitHub - CesiumGS/cesium: An open-source JavaScript library for world-class 3D globes and maps :earth_americas: 比如我们就按照1.99版本 安装结果 如果安装到开发环境 会生成在这里。
整体package.json引用 {name: vue_cesium_1,version: 0.1.0,private: true,scripts: {serve: vue-cli-service serve,build: vue-cli-service build,lint: vue-cli-service lint},dependencies: {cesium: 1.96.0,core-js: ^3.6.5,vue: ^3.0.0,vue-router: ^4.0.0-0,vuex: ^4.0.0-0},devDependencies: {open-wc/webpack-import-meta-loader: ^0.4.7,vue/cli-plugin-babel: ~4.5.17,vue/cli-plugin-eslint: ~4.5.17,vue/cli-service: ~4.5.17,vue/compiler-sfc: ^3.0.0,babel-eslint: ^10.1.0,eslint: ^6.7.2,eslint-plugin-vue: ^7.0.0,sass: ^1.26.5,sass-loader: ^8.0.2,strip-pragma-loader: ^1.0.0},eslintConfig: {root: true,env: {node: true},extends: [plugin:vue/vue3-essential,eslint:recommended],parserOptions: {parser: babel-eslint},rules: {}},browserslist: [ 1%,last 2 versions,not dead]
}3、配置入口文件main.js
import { createApp } from vue
import App from ./App.vue
import router from ./router
import store from ./storecreateApp(App).use(store).use(router).mount(#app)
申请令牌步骤参考
如果不加令牌也可以只不过访问不到具体的地图数据。
注意cesium类的引用问题
#正常情况
import Cesium from cesium/Build/Cesium/Cesium;#非正常情况容易报错除非你加了其他配置
import Cesium from cesium/Cesium;如果报错是什么错误呢
This dependency was not found:* cesium/Cesium in ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!
./node_modules/vue-loader-v16/dist??ref--1-1!./src/App.vue?vuetypescriptlangjsTo install it, you can run: npm install --save cesium/Cesium 大概是找不到cesium相关类。
vue.config.js 配置文件新增然后配置填写内容 // Vue 项目中引入 webpack 模块以便对 webpack 构建配置进行自定义和扩展。
// webpack 是一个流行的 JavaScript 模块打包工具Vue CLI 在底层使用 webpack 来进行项目的构建和打包。
const webpack require(webpack)
const path require(path)// 引入 Node.js 的 path 模块以便在 Vue 项目中处理文件路径的操作。
const CopyWebpackPlugin require(copy-webpack-plugin)// 引入 webpack 插件,以便在 Vue 项目中使用该插件来进行文件复制操作。
const cesiumSource node_modules/cesium/Build/Cesium// 指定 Cesium 库的源代码路径.module.exports { // 导出一个对象模块可以在其他文件中使用 require 来引入这个模块。// 默认情况下Vue CLI 会假设你的应用是被部署在一个域名的根路径上例如 https://www.my-app.com/。如果应用被部署在一个子路径上你就需要用这个选项指定这个子路径。例如如果你的应用被部署在 https://www.my-app.com/my-app/则设置 publicPath 为 /my-app/。publicPath: ./, // 这个值也可以被设置为空字符串 () 或是相对路径 (./)assetsDir: ./static, // 当运行 vue-cli-service build 时生成的生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录 默认为,默认与生成的index.html同级.productionSourceMap: false, // 如果你不需要生产环境的 source map可以将其设置为 false 以加速生产环境构建 这玩意设置成false之后能把打包后的文件大小减小80% 当时我的项目大小是8m 设成false之后变成了2m productionSourceMap:false,之后就不会生成map文件map文件的作用在于项目打包后代码都是经过压缩加密的如果运行时报错输出的错误信息无法准确得知是哪里的代码报错。也就是说map文件相当于是查看源码的一个东西。如果不需要定位问题并且不想被看到源码就把productionSourceMap 置为false既可以减少包大小也可以加密源码。// 1.是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码。这个值会在 vue/cli-plugin-eslint 被安装之后生效。// 2.设置为 true 时eslint-loader 会将 lint 错误输出为编译警告。默认情况下警告仅仅会被输出到命令行且不会使得编译失败。// 3.如果你希望让 lint 错误在开发时直接显示在浏览器中你可以使用 lintOnSave: error。这会强制 eslint-loader 将 lint 错误输出为编译错误同时也意味着 lint 错误将会导致编译失败。lintOnSave: false, // 是否开启eslintdevServer: {open: true // 在启动开发服务器时自动打开浏览器}, // (config)表示传入的参数即 webpack 的配置对象可以在这里进行对 webpack 的配置项进行修改和定制。configureWebpack: (config) { // 表示在 webpack 配置中进行自定义配置。let plugins []plugins [// 配置了一个 webpack 的插件 DefinePlugin用于定义环境变量 CESIUM_BASE_URL。new webpack.DefinePlugin({CESIUM_BASE_URL: JSON.stringify()// 是设置 Cesium 的基础 URL 为静态资源目录以便在项目中正确加载和引用 Cesium 相关资源文件。}), // CopyWebpackPlugin 是 webpack 的一个插件可以在 webpack 构建过程中复制文件或目录通常用于处理静态资源文件的复制操作。// 将 cesiumSource 目录下的 Workers 目录中的所有文件复制到构建输出目录的 static/Workers 目录中。new CopyWebpackPlugin([{ from: path.join(cesiumSource, Workers), to: Workers }]),new CopyWebpackPlugin([{ from: path.join(cesiumSource, Assets), to: Assets }]),new CopyWebpackPlugin([{ from: path.join(cesiumSource, ThirdParty), to: ThirdParty }]),new CopyWebpackPlugin([{ from: path.join(cesiumSource, Widgets), to: Widgets }])]return {module: {unknownContextCritical: false, // 表示在 webpack 处理模块时遇到未知的上下文时不会报错即不会抛出错误。默认情况下webpack 在遇到未知上下文时会抛出错误这可能会导致构建失败。rules: [ // 定义了一组模块处理规则包括对 JavaScript 文件的处理规则。{test: /\.js$/, // 指定匹配的文件类型为 .js 文件。enforce: pre, // 表示该 Loader 的执行优先级是最高的会在其他 Loader 之前执行。// include 表示只对指定的目录或文件进行处理其他目录或文件不会被处理。// 告诉 webpack 只对指定目录下的模块进行处理这里指定的目录是 Cesium 库的源码目录。这样可以确保 webpack 只处理 Cesium 源码而不会对其他模块进行处理提高构建效率并避免不必要的问题。include: path.resolve(__dirname, node_modules/cesium/Source),sideEffects: false, // 含义是告诉 webpack 模块没有副作用可以进行一些额外的优化处理,进行 Tree Shaking 优化。。use: [{ // 使用了 strip-pragma-loader 来处理模块该 Loader 可以去除指定的注释。loader: strip-pragma-loader,options: {pragmas: {debug: false}}}]},{test: /.js$/,include: path.resolve(__dirname, node_modules/cesium/Source),// 用于指定模块加载器.使用了名为 open-wc/webpack-import-meta-loader 的加载器。// 该加载器是为了处理 JavaScript 中的 import.meta.url在构建过程中将 import.meta.url 替换为文件的实际路径以便在构建后的代码中使用。use: { loader: require.resolve(open-wc/webpack-import-meta-loader) }}]},optimization: { // 用于配置 webpack 的优化选项。usedExports: true, // 表示启用 Tree Shaking即在打包时移除未使用的代码以减小最终打包文件的体积提高应用性能。splitChunks: { // 这是 webpack 的代码分割配置用于将打包后的代码分割成多个包以便更好地利用浏览器缓存提升加载速度和性能。maxInitialRequests: Infinity, // 允许并行加载的最大请求数默认为 3。minSize: 0, // 拆分模块的最小大小默认为 30000 字节。maxSize: 250000, // 拆分模块的最大大小默认为 0表示没有限制。cacheGroups: { // 缓存组配置用于定义拆分规则。vendor: { // 缓存组名称用于将来自 node_modules 的模块打包成一个单独的包。test: /[\\/]node_modules[\\/]/, // 正则表达式用于匹配 node_modules 目录下的模块。priority: -10, // 缓存组的优先级数值越大优先级越高。chunks: all, // 表示包含所有类型的 chunk。name (module) { // 根据模块的 context上下文生成名称通常是模块的文件夹名或者包名用于最终生成的文件名称。// 这是 webpack 中的一个变量用于获取当前模块的上下文context即模块所在的目录路径。// 这是一个正则表达式匹配用于从模块的上下文中提取模块所在的包名。[\\/]: 匹配斜杠 / 或反斜杠 \。// node_modules[\\/]: 匹配 node_modules/ 或 node_modules\表示模块在 node_modules 目录下。// (.*?): 匹配任意字符非贪婪模式即尽可能少地匹配字符。// ([\\/]|$): 匹配斜杠 / 或反斜杠 \或者字符串结尾 $用于确定包名的结束位置。// 这是正则表达式中捕获组的索引表示获取第一个捕获组的内容即包名。const packageName module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]// 这是对提取的包名进行处理将其中的 符号替换为空字符串通常是因为包名中的 符号是用来表示作用域的例如 babel/core 中的 babel 是一个作用域需要将其去除。// 这是模板字符串用于生成最终的包名字符串格式为 npm.包名。return npm.${packageName.replace(, )}}},commons: { // 缓存组名称用于将来自 cesium 模块的模块打包成一个单独的包。name: Cesium, // 最终生成的文件名称。test: /[\\/]node_modules[\\/]cesium/, // 正则表达式用于匹配 cesium 模块。priority: 10, // 缓存组的优先级数值越大优先级越高。chunks: all // 表示包含所有类型的 chunk。}}}},output: { // 配置输出的文件信息sourcePrefix: // 是其中的一个选项用于设置在生成的打包文件中每行代码前添加的前缀。},// 这个配置项表示当 webpack 碰到 AMD 模块的 toUrl 方法未定义时是否报错。通常情况下AMD 模块规范中有一个 toUrl 方法用于将模块名称转换为实际的模块文件路径但是在某些情况下该方法可能会未定义。// 设置 toUrlUndefined: true 表示即使 toUrl 方法未定义webpack 也不会报错而是继续处理这些模块以免因为一个小问题导致整个构建过程中断。amd: {toUrlUndefined: true},resolve: { // 用于配置模块解析的选项包括模块路径、模块文件的别名等。alias: { // 用于指定模块的别名使得在代码中可以使用别名来引用模块而不需要使用相对路径或绝对路径。: path.resolve(src) // 表示将 别名映射到项目中的 src 目录即当代码中使用 别名时webpack 将会解析为项目的 src 目录路径。}},node: { // node 是用于配置 webpack 在 Node.js 环境中模拟的一些全局变量和模块的选项。fs: empty, // 禁止 webpack 对 fs 模块的解析通常用于在客户端项目中避免引入 Node.js 中的文件系统模块因为在浏览器环境下无法使用。Buffer: false, // 禁止 webpack 对 Buffer 全局对象的解析通常用于在客户端项目中避免引入 Node.js 中的 Buffer 对象因为在浏览器环境下无法使用。http: empty, // empty: 禁止 webpack 对 http 模块的解析通常用于在客户端项目中避免引入 Node.js 中的 HTTP 模块因为在浏览器环境下无法使用。https: empty,zlib: empty // 禁止 webpack 对 zlib 模块的解析通常用于在客户端项目中避免引入 Node.js 中的压缩模块因为在浏览器环境下无法使用。},// plugins 是一个变量应该是一个包含了需要引入的 webpack 插件的数组。// 表示引入的插件将会按照数组 plugins 中的顺序依次应用到 webpack 构建过程中。plugins: plugins}}
}这是一个整体的配置大家可以根据需求自行调整。
4、App.vue 文件配置
templaterouter-view /
/templatestyle langscss
html,
body {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;
}
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;color: #2c3e50;width: 100%;height: 100%;
}
/style路由文件router/index.js
import { createRouter, createWebHashHistory } from vue-router
import CesiumContainer from ../views/CesiumContainer.vue
const routes [{path: /,name: CesiumContainer,component: CesiumContainer}
]const router createRouter({history: createWebHashHistory(),routes
})export default router使用 Cesium 对象进行操作在 mounted 生命周期钩子中创建 Cesium 场景。CesiumContainer.vue 文件
templatediv idcesiumContainer/div
/templatescript
import cesium/Build/Cesium/Widgets/widgets.css
import { onMounted } from vue
import { Viewer } from cesium // OR /* import * as Cesium from cesium */
import * as Cesium from cesiumexport default {name: CesiumContainer,setup() {onMounted(() {Cesium.Ion.defaultAccessToken xxxxxxxxxxxx.....yUkGXAtmJBA/* eslint no-new: */var viewer new Viewer(cesiumContainer, {animation: true, // 动画小组件baseLayerPicker: true, // 底图组件选择三维数字地球的底图imagery and terrain。fullscreenButton: false, // 全屏组件vrButton: true, // VR模式geocoder: true, // 地理编码搜索组件homeButton: true, // 首页点击之后将视图跳转到默认视角infoBox: true, // 信息框sceneModePicker: true, // 场景模式切换2D、3D 和 Columbus View (CV) 模式。selectionIndicator: true, // 是否显示选取指示器组件timeline: true, // 时间轴navigationHelpButton: true, // 帮助提示如何操作数字地球。// 如果最初应该看到导航说明则为true如果直到用户明确单击该按钮则该提示不显示否则为false。navigationInstructionsInitiallyVisible: true})})}
}
/script!-- Add scoped attribute to limit CSS to this component only --
style scoped
#cesiumContainer {width: 100%;height: 100%;
}
/styleindex.html文件不变默认挂载app。
5、启动验证 6、访问页面 到此创建vue3项目并集成cesium插件运行暂时分享完毕后期我们会深入讲解敬请期待
