An example of vue.js learning

has been seen Vue.js official website API, but very little practice, here to take time to thank an entry-level demo, record some knowledge points, to prevent the follow-up pit, involved in the knowledge Points: Vue, vue-cli, Vue-router, Webpack and so on.

First look at the effect of the implementation:

SOURCE Download stamp here: source code

1. Create a project using VUE-CLI scaffolding

VUE-CLI Init webpack tll

Note: Use the Webpack template to create a project named Tll, here will follow the prompts to enter some basic configuration of the project, such as project name, version number, description, author, whether to enable Eslint check, etc., do not know how to fill the direct carriage

2. Start the project according to the prompts

When the TLL project is created, Vue will automatically prompt several commands to run and execute directly:

CD TLLNPM inpm Run dev

In this way, an automatically configured Vue project will run, including hot updates, auto-check, of course, these configurations in the build folder under the Webpack.base.conf.js, find loader, Preloader Loader, directly comment out the corresponding function is also OK. For example, when I write code, after configuring the Eslint, there is a little space what

Redundant eslint will cause the whole project to fail to run, then directly preloader and eslint related can be injected.

3. Writing components

In the SRC components directory, create the Home.vue component, detailed code:

<!--home Components--><template>    <div class= "Home" >        
Similarly, create the User.vue component:
<template>    <div>        
Finally, the Product.vue component:
<template>    <div class= "Product" >        
4. Modify App.vue, add route
<template> <div id= "app" > <nav class= "Top-menu" > <ul> <!--traverse L I, Output top toolbar--<li v-for= "item in Menulist" > <router-link:to= "Item.url" >{{ite        m.name}}</router-link> </li> </ul> </nav> 
5. Create a detailed routing configuration
Create a new file directly under the SRC root directory router.js as our custom route, detailed code:
Import Vuerouter from "Vue-router" to "Import Home from"./components/home.vue "Import User from"./components/user.vue " Import Product from "./components/product.vue" Export default new Vuerouter ({    routes:[        {path: "/Home", Component:home},        {path: "/user/:id", Component:user},        {path: "/product/:id", component:product}    ]})
This creates a matching route for three navigation, and finally one more thing to do, which is to make way for it to take effect: mount the router on the Vue instance.
6. Mount the routing component to the Vue instance
Modify the Main.js file as follows:
The Vue build version to load with the ' import ' command//(runtime-only or standalone) have been set in Webpack.base.con  F with a alias.import vue from ' Vue ' import App from './app '//Introduce routing component, custom routing component import vuerouter from "Vue-router"    Import Router from "./router"//using the Routing component Vue.use (vuerouter)/* eslint-disable no-new */new Vue ({  el: ' #app ',  Template: ' <App/> ', components  : {App},  router:router})
At this point, all the code is finished, the effect browser directly to see it.
An example of vue.js learning