A Es6+webpack-based Vue Mini Demo

Previous article "A ES5-based Vue demo" We talked about how to do a small demo with Es5,vue-router, and then we'll turn it into a es6+webpack based demo.

I. Environment construction and code conversion

We build the Vue development environment first, according to one of my essays, "Vue Development environment Building and thermal Update", we step by step to build the development environment, project named Es6-demo.

In a previous essay, "Understanding the most basic Vue project", I mentioned that in the SRC folder where the component and portal files are placed, the Main.js file is the portal file, App.vue is the main component, and all components are switched under App.vue. The Components folder is where the component is stored, like our project, where the first is just a Hello component, assets folder is a picture, router folder is a routing file.

From the demo we wrote earlier ES5, we need to create four component files, respectively, for Play.vue,home.vue,time.vue,about.vue. Below is the directory of the modified SRC

--assets--components//component------ABOUT.VUE------HOME.VUE------PLAY.VUE------time.vue--router// Routing------index.js--app.vue//main component--main.js//Portal file

Let's take a look at what this code looks like in turn.

About.vue

<template>    <div>        default{    name:' about ',    data () {         return{            msg2:' This was about page! '     }}} </script>

About.vue

Home.vue

<template>    <div>        default{    name:' Home ',    data () {        return{            msg1:' This is Home page! '     }}} </script>

Home.vue

Play.vue

 <template> <div class= "container" > <div class= "Row" > <div class= "Col-md-2 C Ol-md-offset-2 "> <div class=" List-group "> <router-link to="/play/home "class = "List-group-item" >Home</router-link> <router-link to= "/play/about" class= "List-group-ite M ">About</router-link> </div> </div> <div class=" col-md-6 "&G                T <div class= "Panel" > <div class= "panel-body" > <router-view><    /router-view> </div> </div> </div> </div> </div></template><script>export  default  {name:  ' play ' 

Play.vue

Time.vue

<template> <table class= "Table table-striped" > <tr> <td> year </td> <td> month </td> <td> Day </td> </tr> <tr V for= "T in dates" > <td>{{t.year}}</td> <td>{{t.month}}</td> <td >{{t.day}}</td> </tr> </table></template><script>Exportdefault{name:' Time ', data () {const D=NewDate (); return{dates:[{year:d.getfullyear (), Month:d.getmonth ()+1, Day:d.getdate ()}] }    }}</script>

Time.vue

Index.js

Import vue from ' Vue 'Import Router from' Vue-router 'Import Home from' @/components/home 'Import Play from' @/components/play 'Import time from' @/components/time 'import about from' @/components/about 'Vue.use (Router) exportdefault NewRouter ({routes: [{path:'/play ', Name:' Play ', Component:play, children: [{path:'/play/home ', Name:' Home ', Component:home, children:[{path:'/play/home/time ', Name:' Time ', Component:time}] }, {path:'/play/about ', Name:' About ', component:about}] }]})

Index.js

App.vue

<template>      <div class= "container" >      <div class= "Jumbotron" >          s play a demo</p>         <p><router-link to= "/play" class= "btn btn-primary Btn-lg ">play</router-link></p>      </div>     </div>    <router-view>< /router-view></template>  <script>  export default{      name:' app '}  

App.vue

Main.js

Import vue from ' Vue'./app './router/index.js 'falsenew  vue ({  router,  ' <App/> ', components  : {App}})

Main.jsSecond, error modification

We will temporarily change ES5 's demo to this, it is best to understand the role of each file, and then look at these pieces of code. After this project runs, there are some errors that we'll take a look at.

This error means that the Vue template can only have one root object, and we put <router-view> on the <div> outside, so you want to have a normal effect, in the App.vue file directly put <router-view> in the <div> inside, we'll try again after we've changed.

You will see here is about where there are spaces, so it is wrong, but when you go back to see the code, you will find that you write the grammar is right AH! This is because you opened the Eslint plugin, Eslint is a grammar checker, but the restrictions are too strict, most developers can not adapt, so let's turn it off. This plugin is when you create the Webpack template ("Vue development environment Building and Thermal Update" 3rd), use ESLint to lint your code? (y/n) This step selects Yes

To turn off this function directly select No, in case the installation of what to do, don't be afraid. In the build folder, find Webpack.base.conf.js, delete the inside of this paragraph is ok

Run again, this time we found that CMD does not error can run, but the interface inside but nothing is rendered out, open the console and there is no error. It's been a long time before I found out. Originally in Main.js inside, we actually forgot to mount these components to index.html inside the ID for the app Div, main.js is the portal file, after packaging will produce app.js, and then import index.html, so we will main.js code to change

New Vue ({  ' #app ',// plus this sentence   router,  ' <App/> ',  Components: {APP}})

After the run, the heavens! Finally has the effect.

Third, the use of bootstrap

Each button works correctly, but the style we set for them is not rendered, which is for sure, we did not import Bootstrap.js and bootstrap.css.

Let's first install jquery first by typing it on the cmd command line

NPM install [email protected]1.11. 3 --save-dev

Then configure jquery, and in the Build/webpack.base.conf.js file, add a piece of code to the Module.exports.

plugins: [    new  webpack. Provideplugin ({      "jquery",            "jquery", "Windows.jquery": "jquery"    })    ]

Also remember to import webpack at the beginning of the file

var webpack = require (' Webpack ')

Otherwise, the following error will occur

Then go to bootstrap official website to download the bootstrap package, we use the 3.3.7 version, download down after the Fonts,js,css folder is placed under the project directory/src/assets.

Finally, refer to bootstrap. We add the following references to the bootstrap main file at the top of the Src/main.js file.

Import './assets/css/bootstrap.min.css'./assets/js/bootstrap.min '

In fact, Bootstrap also need to be configured, but in the Build/webpack.base.conf.js file Moudle the rules settings are already included in the font file packaging settings

No, we'll get it.

Let's meet the next sacred moment, package, cmd input

CNPM Run Build

Generate the Dist folder, and finally we run on the local server, in CMD input

CNPM Run Dev

I'm so excited, I sansheng three, and I finally succeeded.

Four, the conclusion of these two small demo here finally came to an end, if you have any problems in the process of operation, we can explore each other, progress together! PS: Maybe this article some pictures in the browser look small not too clear, each master of the road Ctrl + Roller HA!

Code address: Https://github.com/Nangxif/ES6-demo Please give us a lot of support

A Es6+webpack-based Vue Mini Demo