ol5 + npm: https://www.npmjs.com/package/ol (no vue, I may have done this one already)
ol5 + vue: https://github.com/ghettovoice/vuelayers
ol5 + vue (again): https://vuelayers.github.io/#/ (may be the same as above)
mkdir ol5+vue cd ol5+vue/ npm init
npm install vuelayers
NOPE, nothing, and too hard...
maybe need to do the vue init thing...
here goes...
cd ~/gis/applications vue create ol5-vue cd ol5-vue/ npm install vuelayers
looks ok, proceeding...
vim App.vue
to include
<!-- include Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- include OpenLayers -->
<script src="https://unpkg.com/openlayers/dist/ol.js"></script>
<!-- include UMD VueLayers build -->
<link rel="stylesheet" href="https://unpkg.com/vuelayers/lib/style.css">
<script src="https://unpkg.com/vuelayers/lib/index.umd.js"></script>
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
git clone https://github.com/ghettovoice/vuelayers-demo.git
cd vuelayers-demo
npm install
cp ../xxx/makefile
cp ../xxx/vue.config.js
s/4/6/
node build/build.js
Hash: 02f853963d621d6b26a6
Version: webpack 4.20.2
Time: 40118ms
Built at: 12/09/2018 10:57:02 PM
Asset Size Chunks Chunk Names
img/flag.b922504.png 11.9 KiB [emitted]
css/app.de0f22f72890f73865e4.css 1.64 KiB 0 [emitted] app
js/app.926f9a871d66fa5435e7.js 24.2 KiB 0 [emitted] app
css/vendor.66002ccd6e4511d7dbb7.css 256 KiB 1 [emitted] [big] vendor
js/vendor.8b2afe98acc5c15a6f4d.js 989 KiB 1 [emitted] [big] vendor
css/app.de0f22f72890f73865e4.css.map 12.5 KiB [emitted]
css/vendor.66002ccd6e4511d7dbb7.css.map 398 KiB [emitted]
js/app.926f9a871d66fa5435e7.js.map 71.4 KiB 0 [emitted] app
js/vendor.8b2afe98acc5c15a6f4d.js.map 5.06 MiB 1 [emitted] vendor
index.html 562 bytes [emitted]
Entrypoint app [big] = css/vendor.66002ccd6e4511d7dbb7.css js/vendor.8b2afe98acc5c15a6f4d.js js/vendor.8b2afe98acc5c15a6f4d.js.map css/app.de0f22f72890f73865e4.css js/app.926f9a871d66fa5435e7.js js/app.926f9a871d66fa5435e7.js.map
WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
css/vendor.66002ccd6e4511d7dbb7.css (256 KiB)
js/vendor.8b2afe98acc5c15a6f4d.js (989 KiB)
WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
app (1.24 MiB)
css/vendor.66002ccd6e4511d7dbb7.css
js/vendor.8b2afe98acc5c15a6f4d.js
css/app.de0f22f72890f73865e4.css
js/app.926f9a871d66fa5435e7.js
WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
Build complete.
Tip: built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.
then: http://here.ilikecarrots.com/myvue6.html
> Loading failed for the <script> with source “http://here.ilikecarrots.com/js/vendor.8b2afe98acc5c15a6f4d.js”. myvue6.html:1:1
> Loading failed for the <script> with source “http://here.ilikecarrots.com/js/app.926f9a871d66fa5435e7.js”.
wendell@webfaction:~/webapps/cherry
> cp -R vue6/js .
Exception
columnNumber: 0
data: null
filename: "http://here.ilikecarrots.com/js/vendor.8b2afe98acc5c15a6f4d.js"
lineNumber: 80
message: ""
name: "NS_ERROR_NOT_AVAILABLE"
result: 2147746065
stack: "@http://here.ilikecarrots.com/js/vendor.8b2afe98acc5c15a6f4d.js:80:139197\nFt</t.prototype.drawPoint@http://here.ilikecarrots.com/js/vendor.8b2afe98acc5c15a6f4d.js:80:142096
# Mar 25, 2020
will try again:
source code: (has remnants of hook experiments): ~/vue_mdb/openlayers
makefile: works
deploy to: ~/webapps/cherry/vue_mdb/ ~/webapps/cherry/js/
target: https://vue.ilikecarrots.com/ ~~~~
following along from the Quick Start