基于Vue搭建Cesium环境

1、利用脚手架创建一个vue项目

vue create my-test // my-test 是项目名称

2、安装vue-cli-plugin-cesium 插件

npm install --save-dev vue-cli-plugin-cesium

3、安装完成后，使用vue invoke 来初始化这个插件

vue invoke vue-cli-plugin-cesium
//vue invoke 来初始化时会有三个询问
// 1、Please choose a version of 'cesium' from this list 请在列表中选择 cesium 的版本
//2、whether to import styles globally. This operation will automatically import widgets.css in main.js是否全局引入样式,该操作将自动在main.js引入widgets.css?
//3、whether to add sample components to the project components directory是否添加示例组件到项目components目录?

4、项目中全局配置main.js中

import Cesium from '../node_modules/cesium/Build/Cesium/Cesium.js'
import 'cesium/Widgets/widgets.css'
 
Vue.prototype.Cesium=Cesium;

5、页面中调用

<template>
   <div id="cesiumContainer"></div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {}
  },
  mounted () {
     const viewer = new this.Cesium.viewer('cesiumContainer')
     console.log('viewer:', viewer)
  }
}
</script>

<style lang="scss" scoped>

#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>

6、效果如图所示

electron能开发桌面应用，与Vue很好结合

npm install --global @vue/cli
vue create

electronjs的官方地址
https://www.electronjs.org/
electron-vue的官方文档地址
https://simulatedgreg.gitbooks.io/electron-vue/content/cn/?q=
创建项目
vue init simulatedgreg/electron-vue my-project

进入项目目录
cd my-project
安装依赖
npm install

通过package.json查看构建项目和运行命令

运行项目
npm run dev

解决以上报红问题

下载vue-devtools插件网络问题，不影响

项目结构

开始使用，下载蚂蚁金服UI框架依赖
蚂蚁金服UI地址：https://www.antdv.com/docs/vue/getting-started-cn/
npm i --save ant-design-vue

在渲染线程全局main.js中导入使用

使用ant-design导航栏

运行查看
npm run dev

打包（打包为桌面应用）
npm run build

解决上述打包遇到问题，找到项目根目录.electron-vue/build.js修改下面代码，修改其中一对的tasks变量名（与后面一对进行区分即可，自定义修改），需要注意的是本文件中一共包含四个tasks，前两个是一对，后两个是一对，修改时请对应修改。

重新编译打包
npm run build

分析上述报错问题，在.electron-vue\build.js 引入multispinner（安装multispinner模块），原因是在 .electron-vue\build.js文件中，代码中使用了 Multispinner ，但没有在开头引用，并且package.json文件中也没有这个依赖文件。
解决方法：先安装 Multispinner依赖 ，再在文件中引用。
npm i multispinner --save
const Multispinner = require(‘multispinner’)

重新打包
npm run build

上述打包等了很久一直没有进展
重新指定淘宝镜像或者vpn，找到package.json,指定taobao下载镜像地址
“electronDownload”:{
“mirror”:“https://npm.taobao.org/mirrors/electron/”
},

打包成功

打包文件在项目的build包下，可对build下的应用.exe文件进行安装

也可以进入win-unpacked包下直接运行应用.exe，不用安装

1.vue create vue-admin 创建项目

2.选择创建方式

1. 默认Vue2配置
2. 默认Vue3配置
3. 手动选择配置

3.自定义配置选项

( ) Babel // 语法转换
( ) TypeScript // 使用 TypeScript
( ) Progressive Web App (PWA) Support // 支持PWA
( ) Router // 路由
( ) Vuex // store
( ) CSS Pre-processors // CSS 预处理器
( ) Linter / Formatter // 代码风格检查和格式化
( ) Unit Testing // 支持单元测试
( ) E2E Testing // 支持E2E测试

4. 使用版本

5.这一步提示我们是否使用历史路由器，输入 n 回车

6.预编译器选择

7.单元测试选择方案

1.一般选jest

8.依赖选择文件设置

选择package.json

9. 创建成功