webpack of use vue

Now, we want to use vuejs in the project, then there must be dependent on their needs, so you need to install on the line
Note: Because we follow are also used in the actual project vue, it is not dependent upon the development of
    npm install vue --save

Then configure VUE - Loader (development time dependence)
npm  install --save-dev vue-loader vue-template-compiler

After configuring vue vue editions and in webpack.config.js inside -loader

the require path = const ( 'path'); // import module path, since the Node-dependent, it must be package.json, i.e. create a project 

module.exports = {
    entry: './src/index.js', // entry 
    output: {
        path: path.resolve (__ dirname, 'dist'), // there must absolute path 
        filename: 'bundle.js', // outlet, 
        publicPath: 'dist /', //   configuration file path url 
    },
    module:{
        rules:[
            {
                the Test: /\.css$/ ,
                 // css-Loader is responsible only for the css file to load 
                // style-Loader is responsible for adding style to the DOM   
                // when using multiple loader. From right to left 
                use: [ 'style-Loader', 'CSS-Loader' ,]
            },
            {
                test:/\.(png|jpg|gif|jpeg)$/,
                use:[
                    {
                        loader:'url-loader',
                        options:{
                            // When loading the image, is less than limit, the image will be translated into base64 string 
                            // When loading the image, is greater than limit, require the use of file-loader module for loading 
                            limit: 8196 ,
                            name: 'IMG / [name]. [the hash:. 8] [EXT].'   // name rule 
                        },
                        
                    }
                ]
            },
            // Babel configuration (ES6 => ES5) 
            {
                test:/\.js/,
                // exclude:排除
                exclude:/(node_modules|bower_components)/,
                use:{
                    loader:'babel-loader',
                    options:{
                        presets:['es2015']
                    }
                }
            },
            // Configure-Loader VUE 
            {
                test: /\.vue$/ ,
                use:['vue-loader']
            }
        ]
    },
    // Specify vue version 
    Resolve: {
         // Alias: Alias 
        Alias: {
             // Runtime-only -> code, may not have any Template 
            // Runtime-compiler -> code, there may Template, because the compiler can Template used to compile 
            // specified vue-> compiler 
            'VUE $': 'VUE / dist / vue.esm.js'
        }
    }
}

Well, then you can follow the way before we learn to use the vue

Next we use as components in webpack inside vue

 

 

 

demo.html (page file, only one label #app

 

 

index.js inlet js file referenced assembly vue

 

 

APP.vue vue component files (templates, css, js pages are written in a)

 

 

 

 

 

Run npm run bulid. vue will be packaged together

 

 

 

 

- development environment in

 

 

If you want to change the version, directly modify the save, then perform npm install the terminal like