构建一个 Vite + Vue3 项目 开发Cesium

Posted 2023-04-06

参考技术A 由于 Cesium 不是一个普通的 npm 包，需要依赖一些 css ，图片，json 啥的。我们要参考 Cesium 官方的 webpack 教程 来做一堆额外的工作。

值得庆幸的是现在 Vite 有了 vite-plugin-cesium 插件，来帮我们完成这些配置。

vite.config.js

App.vue

vue3.0入门：vite构建vue项目

使用vite构建项目步骤

1. 安装node，cmd输入：node -v验证是否安装成功；一般node安装后会自动安装npm，cmd输入：npm -v验证是否安装成功
2. 选择一个文件夹作为项目文件夹，搜索框输入cmd，输入：npm init @vitejs/app
3. 输入项目名称或者按enter使用默认名称：vite-project
4. 选择框架vue
5. 进入项目：cd vite-project
6. 执行：npm install
7. 运行项目：npm run dev
8. 如果出现报错，管理vue模板校验：VSCode -> 设置 -> 取消勾选Vetur>Validation:template

单文件组件

<template>  
</template>

<script>  
export default    

</script>

<style>  
</style>

vite项目的单文件组件使用逻辑

1. 自定义的单文件组件如helloworld.vue通过export导出
2. 在app.vue中通过import导入自定义的单文件组件
3. 在main.js中通过mount方法挂载

viet项目在app.vue中同样可使用单文件组件的形式，这时如果同时要引入自定义的单文件组件，需使用如下方式：

<!-- 例如引入自定义单文件组件HelloWorld.vue-->
<script>
import HelloWorld from ./components/HelloWorld.vue     
export default 
  components: 
    HelloWorld
  ,
  data() 
    return 
      // ...根组件中数据
    
  

</script>

使用规范

• 根组件app.vue的template标签中使用引入的子组件HelloWorld.vue时如果报错，子组件中模板应使用单根组件形式

<template>
  <div>
    <!-- HelloWorld.vue文件中只有一个根节点的模板才不会报错-->
  </div>
</template>

• 在父组件app.vue中使用引入的子组件时，可使用小写，必须用横杠连接；使用子组件必须有闭合标签

<template>
  <HelloWorld/>
  <hello-world/>
</template>