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.
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:
Each .vue file in the tutorial had three sections:
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
* 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.
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.
Comments
Post a Comment