zoukankan      html  css  js  c++  java
  • 一步步建立 Vue + Cesium 初始化项目

    一步步建立 Vue + Cesium 初始化项目

    初始化 Vue 项目

    升级 npm

    npm install -g npm
    

    安装 @vue/cli 和 @vue/cli-service-global

    npm install -g @vue/cli
    npm install -g @vue/cli-service-global
    

    创建项目

    vue create project-name
    

    安装 Cesium

    cnpm install --save-dev cesium
    

    配置 webpack

    使用 Vue CLI 3 创建的项目,需要在目录下新建 vue.config.js 文件对 webpack 进行配置,帮助文件参见 vue.config.js

    安装 webpack 插件

    copy-webpack-plugin

    用于拷贝项目文件至 build 文件

    npm install --save-dev copy-webpack-plugin
    
    strip-pragma-loader(生产环境)

    用于在生产环境中移除 errors 和 warnings

    npm install --save-dev strip-pragma-loader 
    

    vue.config.js 示例

    Cesium 的 webpack 配置参见 cesium-webpack-example

    const path = require('path');
    
    const webpack = require('webpack');
    
    const cesiumSource = 'node_modules/cesium/Source';
    const cesiumWorkers = '../Build/Cesium/Workers';
    const cesiumThirdParty = '../Build/Cesium/ThirdParty';
    
    const CopyWebpackPlugin = require('copy-webpack-plugin');
    
    module.exports = {
      configureWebpack: {
        context: __dirname,
        // 为 cesium 模块创建别名,更方便进行 import 和 require
        resolve: {
          alias: {
            cesium: path.resolve(__dirname, cesiumSource)
          }
        },
        amd: {
          // Enable webpack-friendly use of require in Cesium
          // Tells Cesium that the version of AMD webpack uses to evaluate require statements is not compliant with the standard toUrl function
          toUrlUndefined: true
        },
        plugins: [
          new CopyWebpackPlugin([
            {from: path.join(cesiumSource, cesiumWorkers), to: 'Cesium/Workers'},
            {from: path.join(cesiumSource, cesiumThirdParty), to: 'Cesium/ThirdParty'},
            {from: path.join(cesiumSource, 'Assets'), to: 'Cesium/Assets'},
            {from: path.join(cesiumSource, 'Widgets'), to: 'Cesium/Widgets'}
          ]),
          new webpack.DefinePlugin({
            // Define relative base path in cesium for loading assets
            CESIUM_BASE_URL: JSON.stringify('Cesium')
          })
        ]
      }
    }
    
  • 相关阅读:
    提取字符串中的数字
    监控mysql执行的sql语句
    maven打包跳过单元测试
    idea常用快捷键
    spring boot 从入门到精通(一)启动项目的三种方式
    git从入门到精通(三)(git 生成本地密钥的方法:windows)
    经典面试题
    vue 20道精选面试题
    Angular输入框内按下回车会触发其它button的点击事件的解决方法
    快速搭建angular7 前端开发环境
  • 原文地址:https://www.cnblogs.com/flypopo/p/9638833.html
Copyright © 2011-2022 走看看