preface

Among the front-end frameworks on the market, Vue+Cesium is the best partner. Companies that do Cesium B-side products generally use Vue, so the subsequent content will be based on Vue

Usually, we need to use Cesium in Vue. First we need to install Cesium, and then we need to configure a lot of things in the VUe-CLI webpack. It’s just a bit of a hassle for some experienced people, but it’s a pain for beginners of Cesium because we haven’t used it before. Do not know how to configure, can only search the network of tutorials, step by step on the pit

For both experienced and novice users, reconfiguring these things every time you write a project can be troublesome

Vue-cli-plugin-cesium is designed to solve this problem

introduce

Vue-cli-plugin-cesium is a VueCLI extension for Cesium. Using VueCLI will allow us to use Cesium with zero configuration in VueCLI, based on VueCLI3.0+

In fact, when I started to do Cesium, I felt that every configuration was too troublesome, so I wrote a plug-in to save development time without configuration. Later, I sent it to several Cesium development groups to give you a wave of experience, and the effect was good

It will do the Cesium based extension in the VueCLI project that we have already created. So far, its functions can also be said to solve the following problems

  • Automatically installs Cesium and appends to package.json dependencies (optional version)

  • Automatic extension of Cesium related Webpack configuration in VueCLI

    • Add acesiumAlias, so that we can easily introduce Cesium file resources in the project
    • Make Cesium object instances available in each Vue module without import import
    • Make WebPack pack Cesium properly
    • Allow Webpack to use require friendly in Cesium, addressing the warning introduced by require
    • The development environment generates sourcemAP and the production environment cancels sourcemAP
    • The production environment extracts common modules for compression
    • The Loader in the production environment switches to optimized mode

  • Automatically introduce Widgets. CSS in global main.js, optional

  • Automatically generate sample files in the Components/folder, optional

The installation

Vue-cli-plugin-cesium is a VueCLI based extension, so create a Vue project using VueCLI before using it

If you are not familiar with the use of VueCLI, please go to VueCLI- official website

The current plugin only supports Vue Li 3.0+ version

Once you’ve created a Vue project, follow these steps to use the plug-in. Like all VueCLI plug-ins, it can be used in two ways

Mode of use 1

Vue Add is recommended for one-step installation

vue add vue-cli-plugin-cesium

// Non-globally installed VUE - CLI yes
npx vue add vue-cli-plugin-cesium
Copy the code

Mode of use 2

Install vuE-cli-plugin-cesium first. Yarn installation is recommended because it is simpler

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

// yarn
yarn add vue-cli-plugin-cesium
Copy the code

Once installed, we will use Vue Invoke to initialize the plug-in

vue invoke vue-cli-plugin-cesium

// Non-globally installed VUE - CLI yes
npx vue invoke vue-cli-plugin-cesium
Copy the code

The installation process

There are three queries during vue Invoke or Vue Add

Ask a

Please choose a version of 'cesium' from this listCopy the code

Select the version of Cesium you want to use here

Ask two

Whether to import styles globally. This operation will automatically import widgets.css in main.js Do you globally introduce styles that will automatically introduce widgets.css in main.js?Copy the code

This default is yes, and will automatically introduce widgets. CSS in main.js, that is, Cesium CSS styles globally

If this is set to no, we manually import the widgets. CSS style file at development time with the following command

import "cesium/Widgets/widgets.css"
Copy the code

Ask three

Whether to add sample Components to the project Components directory?Copy the code

This option defaults to yes and automatically generates the CesiumExample folder in the SRC/Components folder, which contains some examples of Cesium usage for reference

If this is set to no, the sample file is not generated

In the generated example, each file is a module, which can be directly introduced into the project to view. Welcome to PR example module

GUI installation

If we are using the Vue UI to create a project, we can also directly search for vue-cli-plugin-cesium in the plug-in options after the project is created and install it

As follows:

Select the plug-in and click Install

use

The development is as follows, using Cesium objects directly in the module

Take a look at the sample components, which are introduced as follows

Q&A

When you start developing with Cesium objects after installing the plug-in smoothly, you may encounter this error

Error: Cesium is no - undefCopy the code

This is a syntax error. Yes, this is because the plugin uses Webpack’s built-in ProvidePlugin to eliminate the need for import or require when using Cesium objects. By default, when creating a project using VueCLI, Eslint is used. Eslint syntactically checks that Cesium is an undeclared variable and throws an error

Solution 1

Json Eslint rules allow no-undef, as shown below, in package.json rules under the eslintConfig field configure “no-undef”: 0, allows undeclared variables to be configured separately without turning off Eslint

{
  "dependencies": {},
  "devDependencies": {},
  "eslintConfig": {
    "root": true."env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential"."eslint:recommended"]."parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {
      "no-undef": 0}}}Copy the code

Solution 2

We can turn off Eslint directly by removing the eslintConfig object directly from package.json

You can also configure Eslint to be turned off in vue.config.js as follows

module.exports = {
  lintOnSave: false
}
Copy the code

Eslint syntax verification is a great constraint development tool that allows us to keep syntax styles consistent within a team. It’s best not to turn it off

The end of the

Once installed, you can use Cesium in any module in the VUE project. You can use Cesium object instances in each vUE module without importing import. If you want to import files from the Cesium package, we have aliases for the Cesium package directory. Call cesium, so the introduction of Widgets. CSS when introducing path for cesium/Widgets/Widgets. The CSS, if will be helpful to you, then it will be my pleasure

If you are using scaffolding > Vecli3.0, you will not be able to use this plugin. However, there is a vecli2.0 configuration, but you need to configure it manually. See 👉 VueCLI2.0 integrated Cesium for more details

We will gradually improve this plug-in in the future, and we will continue to iterate. We welcome your suggestions and PR

Plugin address 👉 isboyjc/vue-cli-plugin-cesium

This article is posted on GitHub and more highlights can be found at 👉 isboyjc/blog/issues

Is the front end, and not just the front end, so not serious, seriously share dry goods, public number “not serious front end”, welcome to pay attention to