Vue Js Workflow

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