Vue_base_workflow

Vue_base_workflow.txt

Alone in html5 file
In a html file add a CDN link.:
https://vuejs.org/v2/guide/installation.html#CDN

For prototyping or learning purposes, you can use the latest version with:

In the head section of the html. If I put at the bottom of the body, it doesn't work.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

For production, we recommend linking to a specific version number and build to avoid unexpected breakage from newer versions:

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

If you are using native ES Modules, there is also an ES Modules compatible build:

<script type="module">
  import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.esm.browser.js'
</script>

NPM

NPM is the recommended installation method when building large scale applications with Vue. It pairs nicely with module bundlers such as Webpack or Browserify. Vue also provides accompanying tools for authoring Single File Components.

# latest stable
$ npm install vue


If error message: Syntax error, illegal character:
The only difference is the ENTER after the last method that brakes it... regardless if I paste new method or just ass ENTER it stops to work.
answer from :
https://laracasts.com/discuss/channels/vue/syntaxerror-illegal-character



mkdir Vue_Real

Vue ClI global install:
npm i -g @vue/cli
(/usr/local/lib/node_modules)
Please try running this command again as root/Administrator.
so 
sudo npm i -g @vue/cli


error not important:
Not compatible with your operating system or architecture: fsevents@1.2.12
answer from SO:
Since fsevents is an API in OS X allows applications to register for notifications of changes to a given directory tree. Running:
npm install --no-optional
Will do the trick, with no drawbacks.

vue create real-world-vue

(vue cli 4.3.1)

it suggests:
cd real-world-vue
npm run serve

//
 App running at:
  - Local:   http://localhost:8080/
//

With Vue UI 
vue ui 

// @ is an alias to /src


main.js =>  index.html =>
App.vue is the root of all components.

recommended installs in Vscode:
VLC -> Vetur, eslint, prettier,

in eslintrc file:in extends
"plugin:prettier/recommended"


VUE VS CODE extension paxk by sarah.drasner

---

## data Must Be a Function

When we defined the <button-counter> component, you may have noticed that data wasn’t directly provided an object, like this:

data: {
  count: 0
}

Instead, a component’s data option must be a function, so that each instance can maintain an independent copy of the returned data object:

data: function () {
  return {
    count: 0
  }
}