Vue JS Workflow

  • build process to optimise and write es6
  • development server - test under realistic circumstances, lazy loading files

VueCLI

  • VueJS project templates

Templates: * simple * webpack-simple * webpack * browserify/browserify-simple

Install the cli: sudo npm install -g vue-cli

Vue-cli quick info

eg: vue init <template-name> <project-name>

Run dev server

npm run dev

Folder structure

  • babel.rc - sets up babel, transpiler for es6
  • index.html - served file
  • package.json - dependencies
  • webpack.config.js - responsible for build

Source folder: src

  • App.vue - single file templates

The render function

Vue Files structure

App.vue: single-file-components

Template: <tempalte>...</template> Script: <script>...</script> - works as vue instance style: <style>...</style>

Debugging

Use the vue-devtools