├── .browserslistrc
├── .eslintrc.js
├── .gitignore
├── README.md
├── babel.config.js
├── config
    └── webpack.base.js
├── package.json
├── postcss.config.js
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   └── HelloWorld.vue
    ├── main.js
    ├── router.js
    ├── store.js
    └── views
    │   ├── About.vue
    │   └── Home.vue
├── vue.config.js
└── yarn.lock


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   extends: ['plugin:vue/essential', '@vue/prettier'],
 7 |   rules: {
 8 |     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
 9 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
10 |     quotes: ['error', 'single'],
11 |     semi: ['error', 'never'],
12 |     'prettier/prettier': [
13 |       'error',
14 |       {
15 |         singleQuote: true,
16 |         trailingComma: 'none',
17 |         bracketSpacing: true,
18 |         jsxBracketSameLine: true,
19 |         parser: 'flow'
20 |       }
21 |     ]
22 |   },
23 |   parserOptions: {
24 |     parser: 'babel-eslint'
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # A Cesium-Vue-CLI-Webpack Project
 2 | 
 3 | webpack latest Vue-CLI and Cesium, you can see the example in router `about` page
 4 | 
 5 | - 最新版本的 Vue-CLI 3.0 和 Cesium 1.6, Cesium 的初始化在 `about` 页面可以看到
 6 | - 老版本的 Cesium-Vue 可以在`old`分支上找到
 7 | 
 8 | ## Project setup
 9 | 
10 | ```
11 | yarn install
12 | ```
13 | 
14 | ### develop
15 | 
16 | ```
17 | yarn run serve
18 | ```
19 | 
20 | ### build
21 | 
22 | ```
23 | yarn run build
24 | ```
25 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: ['@vue/app']
3 | };
4 | 


--------------------------------------------------------------------------------
/config/webpack.base.js:
--------------------------------------------------------------------------------
 1 | const CopyPlugin = require('copy-webpack-plugin')
 2 | const webpack = require('webpack')
 3 | const path = require('path')
 4 | 
 5 | const cesiumSource = 'node_modules/cesium/Source'
 6 | const cesiumWorkers = '../Build/Cesium/Workers'
 7 | 
 8 | const plugins = [
 9 |   new CopyPlugin([
10 |     { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' }
11 |   ]),
12 |   new CopyPlugin([{ from: path.join(cesiumSource, 'Assets'), to: 'Assets' }]),
13 |   new CopyPlugin([{ from: path.join(cesiumSource, 'Widgets'), o: 'Widgets' }]),
14 |   new webpack.DefinePlugin({
15 |     CESIUM_BASE_URL: JSON.stringify('./')
16 |   })
17 | ]
18 | 
19 | module.exports = {
20 |   plugins,
21 |   cesiumSource
22 | }
23 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "cesium-vue",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "core-js": "^2.6.5",
12 |     "vue": "^2.6.10",
13 |     "vue-router": "^3.0.3",
14 |     "vuex": "^3.0.1"
15 |   },
16 |   "devDependencies": {
17 |     "@vue/cli-plugin-babel": "^3.10.0",
18 |     "@vue/cli-plugin-eslint": "^3.10.0",
19 |     "@vue/cli-service": "^3.10.0",
20 |     "@vue/eslint-config-prettier": "^5.0.0",
21 |     "babel-eslint": "^10.0.1",
22 |     "cesium": "^1.60.0",
23 |     "copy-webpack-plugin": "^5.0.4",
24 |     "eslint": "^5.16.0",
25 |     "eslint-plugin-prettier": "^3.1.0",
26 |     "eslint-plugin-vue": "^5.0.0",
27 |     "node-sass": "^4.9.0",
28 |     "prettier": "^1.18.2",
29 |     "sass-loader": "^7.1.0",
30 |     "vue-template-compiler": "^2.6.10",
31 |     "webpack": "^4.39.2"
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     autoprefixer: {}
4 |   }
5 | };
6 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zzcyrus/Cesium-Vue/c26145f75754adbbe88f2b356a2220fe1d9b0355/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta
 7 |       name="viewport"
 8 |       content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
 9 |     />
10 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
11 |     <title>Cesium-Vue</title>
12 |   </head>
13 |   <body>
14 |     <noscript>
15 |       <strong
16 |         >We're sorry but cesium-vue doesn't work properly without JavaScript
17 |         enabled. Please enable it to continue.</strong
18 |       >
19 |     </noscript>
20 |     <div id="app"></div>
21 |     <!-- built files will be auto injected -->
22 |   </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <div id="nav">
 4 |       <router-link to="/">Home</router-link> |
 5 |       <router-link to="/about">About</router-link>
 6 |     </div>
 7 |     <router-view />
 8 |   </div>
 9 | </template>
10 | 
11 | <style lang="scss">
12 | #app {
13 |   font-family: "Avenir", Helvetica, Arial, sans-serif;
14 |   -webkit-font-smoothing: antialiased;
15 |   -moz-osx-font-smoothing: grayscale;
16 |   text-align: center;
17 |   color: #2c3e50;
18 | }
19 | #nav {
20 |   padding: 30px;
21 |   a {
22 |     font-weight: bold;
23 |     color: #2c3e50;
24 |     &.router-link-exact-active {
25 |       color: #42b983;
26 |     }
27 |   }
28 | }
29 | </style>
30 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zzcyrus/Cesium-Vue/c26145f75754adbbe88f2b356a2220fe1d9b0355/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="hello">
  3 |     <h1>{{ msg }}</h1>
  4 |     <p>
  5 |       For a guide and recipes on how to configure / customize this project,<br />
  6 |       check out the
  7 |       <a href="https://cli.vuejs.org" target="_blank" rel="noopener"
  8 |         >vue-cli documentation</a
  9 |       >.
 10 |     </p>
 11 |     <h3>Installed CLI Plugins</h3>
 12 |     <ul>
 13 |       <li>
 14 |         <a
 15 |           href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
 16 |           target="_blank"
 17 |           rel="noopener"
 18 |           >babel</a
 19 |         >
 20 |       </li>
 21 |       <li>
 22 |         <a
 23 |           href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
 24 |           target="_blank"
 25 |           rel="noopener"
 26 |           >eslint</a
 27 |         >
 28 |       </li>
 29 |     </ul>
 30 |     <h3>Essential Links</h3>
 31 |     <ul>
 32 |       <li>
 33 |         <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
 34 |       </li>
 35 |       <li>
 36 |         <a href="https://forum.vuejs.org" target="_blank" rel="noopener"
 37 |           >Forum</a
 38 |         >
 39 |       </li>
 40 |       <li>
 41 |         <a href="https://chat.vuejs.org" target="_blank" rel="noopener"
 42 |           >Community Chat</a
 43 |         >
 44 |       </li>
 45 |       <li>
 46 |         <a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
 47 |           >Twitter</a
 48 |         >
 49 |       </li>
 50 |       <li>
 51 |         <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
 52 |       </li>
 53 |     </ul>
 54 |     <h3>Ecosystem</h3>
 55 |     <ul>
 56 |       <li>
 57 |         <a href="https://router.vuejs.org" target="_blank" rel="noopener"
 58 |           >vue-router</a
 59 |         >
 60 |       </li>
 61 |       <li>
 62 |         <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
 63 |       </li>
 64 |       <li>
 65 |         <a
 66 |           href="https://github.com/vuejs/vue-devtools#vue-devtools"
 67 |           target="_blank"
 68 |           rel="noopener"
 69 |           >vue-devtools</a
 70 |         >
 71 |       </li>
 72 |       <li>
 73 |         <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
 74 |           >vue-loader</a
 75 |         >
 76 |       </li>
 77 |       <li>
 78 |         <a
 79 |           href="https://github.com/vuejs/awesome-vue"
 80 |           target="_blank"
 81 |           rel="noopener"
 82 |           >awesome-vue</a
 83 |         >
 84 |       </li>
 85 |     </ul>
 86 |   </div>
 87 | </template>
 88 | 
 89 | <script>
 90 | export default {
 91 |   name: 'HelloWorld',
 92 |   props: {
 93 |     msg: String
 94 |   }
 95 | }
 96 | </script>
 97 | 
 98 | <!-- Add "scoped" attribute to limit CSS to this component only -->
 99 | <style scoped lang="scss">
100 | h3 {
101 |   margin: 40px 0 0;
102 | }
103 | ul {
104 |   list-style-type: none;
105 |   padding: 0;
106 | }
107 | li {
108 |   display: inline-block;
109 |   margin: 0 10px;
110 | }
111 | a {
112 |   color: #42b983;
113 | }
114 | </style>
115 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import router from './router'
 4 | import store from './store'
 5 | require('cesium/Widgets/widgets.css')
 6 | 
 7 | Vue.config.productionTip = false
 8 | 
 9 | new Vue({
10 |   router,
11 |   store,
12 |   render: h => h(App)
13 | }).$mount('#app')
14 | 


--------------------------------------------------------------------------------
/src/router.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | import Home from './views/Home.vue'
 4 | 
 5 | Vue.use(Router);
 6 | 
 7 | export default new Router({
 8 |   mode: 'history',
 9 |   base: process.env.BASE_URL,
10 |   routes: [
11 |     {
12 |       path: '/',
13 |       name: 'home',
14 |       component: Home
15 |     },
16 |     {
17 |       path: '/about',
18 |       name: 'about',
19 |       // route level code-splitting
20 |       // this generates a separate chunk (about.[hash].js) for this route
21 |       // which is lazy-loaded when the route is visited.
22 |       component: () =>
23 |         import(/* webpackChunkName: "about" */ './views/About.vue')
24 |     }
25 |   ]
26 | });
27 | 


--------------------------------------------------------------------------------
/src/store.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | 
 4 | Vue.use(Vuex)
 5 | 
 6 | export default new Vuex.Store({
 7 |   state: {},
 8 |   mutations: {},
 9 |   actions: {}
10 | })
11 | 


--------------------------------------------------------------------------------
/src/views/About.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="about">
 3 |     <h1>This is an about page</h1>
 4 |     <div id="cesiumContainer" />
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | import Cesium from 'cesium/Cesium'
10 | 
11 | export default {
12 |   mounted() {
13 |     this.$nextTick(() => {
14 |       const viewer = new Cesium.Viewer('cesiumContainer')
15 |     })
16 |   }
17 | }
18 | </script>


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="home">
 3 |     <img alt="Vue logo" src="../assets/logo.png" />
 4 |     <HelloWorld msg="Welcome to Your Vue.js App" />
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | // @ is an alias to /src
10 | import HelloWorld from '@/components/HelloWorld.vue'
11 | 
12 | export default {
13 |   name: 'home',
14 |   components: {
15 |     HelloWorld
16 |   }
17 | }
18 | </script>
19 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | const { cesiumSource, plugins } = require('./config/webpack.base')
 2 | const path = require('path')
 3 | 
 4 | module.exports = {
 5 |   configureWebpack: {
 6 |     output: {
 7 |       sourcePrefix: ''
 8 |     },
 9 |     amd: {
10 |       toUrlUndefined: true
11 |     },
12 |     node: {
13 |       fs: 'empty'
14 |     },
15 |     resolve: {
16 |       alias: {
17 |         cesium: path.resolve(__dirname, cesiumSource)
18 |       }
19 |     },
20 |     module: {
21 |       unknownContextCritical: /^.\/.*$/,
22 |       unknownContextCritical: false
23 |     },
24 |     plugins: plugins
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------