Vue.js

I had the example from a YouTube Tutorial on Vue working, but I'm having a little trouble creating an empty project for my own development.

Part of the issue is that Vue is compiled. What you're running is minified (or not) JavaScript that includes a ton of stuff along with your app. So you can write a little, compile it, look at it in a browser (using the WAMP server) and repeat those steps to death, or you can use their system development which automatically compiles and auto-runs when it notices a source code change.

vue ui

brings up an app (at /localhost:8000) that manages this process, in theory, but I've forgotten the mechanics of it.

In the example, we had a tree:

public
`--src
     `--App.vue
     `--views
     |    `--Home.vue
     |    `--About.vue
     `--components
          `--Todos.vue
          `--TodoItem.vue
          `--AddTodo.vue
          `--layout
               `--Header.vue

Each .vue file in the tutorial had three sections:

<template>

   HTML here with {{data inserts}} and v-if, v-bind in HTML elements

</template>

<script>

   JavaScript such as an object literal export { name, props, methods }

</script>

<style scoped>

   CSS for the template HTML

   The 'scoped' attribute means it only affects the template

</style>

The .vue files in the /views dir had the same sections, but in the template, we refer to components as if they were HTML elements. So a <div> might include an <AddTodo>.

So, the command line vue tool can do many things:

vue create <app-name>  - creates a new project (this is where I went wrong, I cloned the directory)
vue add <plugin>
vue invoke <plugin>
vue serve - create a local development server
vue build - minify for release
vue ui - display the dashboard in the browser
vue config - inspect and modify the config
vue info - print debug info about the environment

Tutorial Steps

* @7:17 Use Node.js, NPM (Node Package Manager). Download Vue.js devtools for Chrome. Vue.js
* npm install -g @vue/cli
* vue --version to see it
* vue create test - Choose default babel, eslint plugins. npm run serve.
** Or use the vue ui - Click 'Create' choose the folder, give it a name. Default preset babel, eslint
** Plugins will include vue/cli, babel, eslint
** Tasks let you serve, build, lint, inspect. Click serve, then Run task.
** Click Open App
* Open the source in VS Code.
** package.json - keeps the dependencies
** public/index.html is the page served in the browser
** src/main.js is the main entry point; it creates a new Vue()
** App.vue is also an entry point. Template/Script/Style - style here can be global for the app
** If you're using a Component name in your Template, you'll likely import it in your Script section.