The Command Line Interface

vue init [template name] [project]

npm i -g vue-cli

simple

• no build process
• no project.json
• no dependencies

lite-server/live-server will just start the index.html

vue init simple simple-prj

whats included:

https://github.com/vuejs-templates/simple

webpack simple

vue init webpack-simple wp-simple-prj

whats included:

• npm run dev: Webpack + vue-loader with proper config for source maps & hot-reload.
• npm run build: build with HTML/CSS/JS minification.

https://github.com/vuejs-templates/webpack-simple

webpack (prd ready)

vue init webpack wp-simple-prj

whats included:

• npm run dev: first-in-class development experience.
• npm run build: Production ready build.
• npm run unit: Unit tests.
• npm run e2e: End-to-end tests with Nightwatch.

https://github.com/vuejs-templates/webpack

pwa

https://github.com/vuejs-templates/pwa

vue init pwa pwa-prj

whats included:

• Service Worker precaching of application shell + static assets 
• Script (async chunk) preloading using <link rel="preload">
• Web Application Manifest + favicons
• Mobile-friendly meta-viewport
• Lighthouse score of 90+/100

vue's way of doing web components

 Vue Loader to the resque

vue-loader is a loader for webpack that can transform Vue components written in a specific format into a plain JavaScript module.

• ES2015 enabled by default;
• Allows using other webpack loaders for each part of a Vue component, for example Sass for <style> and Jade for <template>;
• Allows custom sections in a .vue file that can have custom loader chains applied to them
• Treat static assets referenced in <style> and <template> as module dependencies and handle them with webpack loaders;
• Can simulate scoped CSS for each component (PostCSS);
• Supports component hot-reloading during development.

File structure

supported langs

We can also use preprocessors such as Pug, Babel (with ES2015 modules), and Stylus for cleaner and more feature-rich components.

You could as easily use Bublé, TypeScript, SCSS, PostCSS - or whatever other preprocessors that help you be productive. If using Webpack with vue-loader, it also has first-class support for CSS Modules.

The vue-router

vue's way of doing SPA navigation

Getting started

Dynamic routes

Programatic navigation

Named routes

Named views

props & route components

Navigation guards

Navigation guards provided by vue-router are primarily used to guard navigations either by redirecting it or canceling it. There are a number of ways to hook into the route navigation process: globally, per-route, or in-component.

Params or query changes won't trigger enter/leave navigation guards. You can either watch the $route object to react to those changes, or use the beforeRouteUpdate in-component guard.

Global Guards

• to: Route: the target Route Object being navigated to.

• from: Route: the current route being navigated away from.

• next: Function: this function must be called to resolve the hook. 

next(), next(false),next('/'), next({ path: '/' }), next(error)(transfer to router.onError())

Per-Route Guard

In-Component Guards

Data fetching

Fetching After Navigation: perform the navigation first, and fetch data in the incoming component's lifecycle hook. 

Fetching Before Navigation: Fetch data before navigation in the route enter guard, and perform the navigation after data has been fetched.

Fetching After Navigation

Fetching Before Navigation

Lazy loading routes