idea开发工具 vue+cesium+webpack的环境配置(helloworld)

准备工作及环境node 及npm ;

1.新建一个项目名vueCesium;idea 打开至该目录;

2.利用terminal,执行命令npm install vue-cli -g;全局安装 vue-cli

idea开发工具 vue+cesium+webpack的环境配置(helloworld)_第1张图片

3.vue-cli安装完成,继续利用terminal,执行命令vue init webpack cesiumVue(自己命名的项目名)

idea开发工具 vue+cesium+webpack的环境配置(helloworld)_第2张图片

到上面这一步,已经完成项目新建,idea 的项目列表

idea开发工具 vue+cesium+webpack的环境配置(helloworld)_第3张图片

4. 执行命令进入项目:cd cesiumVue 

5.执行命令:npm run dev ;出现如下ip+端口(复制即可正常访问)已经成功,至此vue+webpack的环境已经构建完成;

idea开发工具 vue+cesium+webpack的环境配置(helloworld)_第4张图片

6.进入正题,安装cesium;首先终止正在运行的端口,执行命令:连续两次ctrl+c ,再执行命令:npm install cesium --save

idea开发工具 vue+cesium+webpack的环境配置(helloworld)_第5张图片

7.修改环境,首先对整个项目有一定的大致熟悉:

idea开发工具 vue+cesium+webpack的环境配置(helloworld)_第6张图片

7.1 webpack.base.conf.js文件添加;代码如下只为你们方便复制

const cesiumSource = '../node_modules/cesium/Source'
var webpack = require('webpack')

sourcePrefix: ' '

amd: {
  toUrlUndefined: true
},

'cesium': path.resolve(__dirname, cesiumSource)

idea开发工具 vue+cesium+webpack的环境配置(helloworld)_第7张图片

7.2webpack.dev.conf.js文件添加;代码如下只为你们方便复制

const cesiumSource = 'node_modules/cesium/Source'
const cesiumWorkers = '../Build/Cesium/Workers'
new CopyWebpackPlugin([{ from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' }]),
new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Assets'), to: 'Assets' }]),
new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' }]),
new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'ThirdParty/Workers'), to: 'ThirdParty/Workers' }]),
new webpack.DefinePlugin({
  // Define relative base path in cesium for loading assets
  CESIUM_BASE_URL: JSON.stringify('')
}),

idea开发工具 vue+cesium+webpack的环境配置(helloworld)_第8张图片

7.3 webpack.prod.conf.js文件添加;代码如下只为你们方便复制

const cesiumSource = 'node_modules/cesium/Source'
const cesiumWorkers = '../Build/Cesium/Workers'
new CopyWebpackPlugin([ { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' } ]),
new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'Assets'), to: 'Assets' } ]),
new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' } ]),
new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'ThirdParty/Workers'), to: 'ThirdParty/Workers' } ]),
new webpack.DefinePlugin({
  // Define relative base path in cesium for loading assets
  //定义 Cesium 从哪里加载资源,如果使用默认的'',却变成了绝对路径了,所以这里使用'./',使用相对路径
  CESIUM_BASE_URL: JSON.stringify('./')}),

idea开发工具 vue+cesium+webpack的环境配置(helloworld)_第9张图片

7.4 index.js 新增一行代码:

assetsPublicPath: '',

idea开发工具 vue+cesium+webpack的环境配置(helloworld)_第10张图片

7.5 cesium 包(路径:\node_modules\cesium\Build\Cesium)拷贝到static文件夹中;

idea开发工具 vue+cesium+webpack的环境配置(helloworld)_第11张图片

7.6 index.html 引入cesium.js包,至此环境修改结束了;

idea开发工具 vue+cesium+webpack的环境配置(helloworld)_第12张图片

8.vue cesium 的helloworld来了;

mian.js(路径:\cesiumVue\src)

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import Cesium from 'cesium/Cesium'
import widgets from 'cesium/Widgets/widgets.css'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})

idea开发工具 vue+cesium+webpack的环境配置(helloworld)_第13张图片

App.vue文件(路径:\cesiumVue\src)





idea开发工具 vue+cesium+webpack的环境配置(helloworld)_第14张图片

利用terminal执行npm run dev 

再次访问网址即可,大功告成,看庆余年去了。。。。。。。。。

你可能感兴趣的:(webgl的日常学习)