bulma on opalstack

from their main page

then...

After creating a project with vue-cli or custom-made (usually Webpack)

HA!

startup attempt #3.

will COPY (working) ol-webpack and try to add buefy to it

on opal4:

    cd src
    tar zcvf my_ol_startup.tgz ol-webpack/ --exclude=*/node_modules/* --exclude=*/.git/*

on laptop:

    > scp wendell@carrotseverywhere.com:src/my_ol_startup.tgz .
    > tar zxvf my_ol_startup.tgz
    > cd ol-webpack/
    > npm install

copy ol-webpack and add code from buefy startup page

copy baseline from working ol-webpack:

    > cp -r ol-webpack/ ol-buefy
    > cp -r ol-webpack/ ol-buefy
    > cd ol-buefy/
    > rm -r node_modules/
    > npm install

now add buefy components:

setup webpack framework (should have tried this one)

Setup VueJs with Webpack 4

> cp -R ol-webpack/ ol-wp-serve
> rm -r node_modules/
> npm install
> npm i -D webpack webpack-dev-server webpack-cli
> npm i -D @babel/cli @babel/core @babel/preset-env babel-loader

NOPE.

setup webpack framework (inop!)

Webpack for Vue.js 3 from Scratch

    npm init
    npm install --save vue vue-router
    npm install --save-dev webpack webpack-cli

    vim src/app.js
import Vue from 'vue'
import App from './App.vue'new Vue({
  el: '#app',
  render: h => h(App)
})

help:

    vim ???
<template>
  <div>
    <h1>Hello World!</h1>
  </div>
</template>

and then:

    vim build/webpack.config.dev.js
'use strict'const { VueLoaderPlugin } = require('vue-loader')module.exports = {
  mode: 'development',
  entry: [
    './src/app.js'
  ],
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}

and more installs:

npm install --save-dev vue-loader vue-template-compiler vue-style-loader css-loader

and add this build script:

    vim package.json
"build": "webpack --config build/webpack.config.dev.js"

and:

    vim index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>My Vue app with webpack 4</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="dist/main.js" type="text/javascript"></script>
  </body>
</html>

from a video (inop)

> mkdir demo_from_video
> cd demo_from_video/
> npx merced-spinup vue project5

npx: installed 1 in 3.439s
 BUILDING YOUR PROJECT FOLDER, BE PATIENT, IN THE MEANTIME VISIT DEVNURSERY.COM AND ALEXMERCEDCODER.COM
Cannot read property 'toString' of null