webpack introduced vue ordinary page using difference vue

A : Use vue ordinary web page

Use the script tag, the package is introduced vue
In ndex page, create a container div with id of App
Vue example obtained by a new Vue

Two : Use the vue in webpack

　　Run: npm i vue -S vue package mounted to project operational dependency

main.js：

// entry file
 // how webpack the framework of the project, developed using Vue
 //       execute command npm i vue -s, the vue package installed to run the project relies 

// try to use Vue in webpack in;
 // Note: webpack using import Vue from 'vue' introduced Vue constructor function, dysfunction, only provides a runtime-only manner, and is not provided as the web using methods such as, the actual introduction of the package is introduced according lookup rules package the 
import Vue from 'VUE' // this method to add the alias specified webpack.config.js (modify the path to import Vue packet)
 // import from Vue '../node_modules/vue/dist/vue.js' // this is possible, you can also use the website to use like that, and no longer webpack.config.js added to the alias alias;
 // Find the rules package:
 //     1: find project root directory has no node_modules folder
 //     2: folders based on the package name to find the corresponding file in node_modules in vue
 //    3: vue find a folder named package.json package configuration file
 //      4: Find a main attribute [attribute specifies the main entrance of this package file to be loaded in time] in package.json file 

var vm = new new VUE ({ 
    EL: '#app' , 
    Data: { 
        MSG: '123' 
    } 
});

webpack.config.js :( Add resolve node)

const path = the require ( 'path') // Node use URL path module operation 

// import plug generates html page in memory
 // long as the plug to be put in the plugin node 
const htmlWebpackPlugin the require = ( 'HTML- plugin-WebPACK ' ) 

// node syntax
 // this file is a configuration file js, by operation of the module in the node, a configuration object exposed outwardly 
module.exports = {
     // need to specify the active inlet and outlet in the configuration file 
    entry: path.join (__ dirname, '/ the src / main.js.'), // entry indicates that the file to be packaged webpack 
    output: { // output configuration file 
        path:. path.join (__ dirname, '/ dist '), // specified, the packaged file, the output go to that directory 
        filename:' bundle.js' // specify the output file name
     },
    plugins: [ // node configuration widget 
        new new htmlWebpackPlugin ({ // create a widget generated HTML page in memory 
            Template: '. / the src / index.html' path.join (__ dirname,), // specified page template, the path will be specified page, the page in memory to generate the 
            filename: 'index.html', // the name of the specified page generated 
        }) 

    ], 
    Module1: { // this node configuration for all third-party modules loaded is 
        the rules: [ // all third-party modules matching rules 
            {Test:. / \ CSS $ /, use: [ 'style-Loader', 'CSS-Loader']}, // configuration file to third processing .css rule loader 
            {Test: / \ SCSS $ /, use:. [ 'style-loader', 'CSS-loader', 'Sass-loader']}, // configuring third-party file loader rule .scss
            The Test {: / \ (JPG | PNG | GIF | BMP | jpeg) $ /, use:. '?. Url-Loader limit = 6000 & name = [name] [EXT]' }, 
            {the Test: /\.js$/ , use: 'babel-Loader', the exclude: / the node_modules /} // configuration babel syntax conversion ES6 
        ] 
    }, 
    Resolve: { 
        Alias: { // modify Vue is introduced into the package path when the 
            "vue $": "vue / dist / vue.js " 
        } 
    } 
}

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <!--这时容器-->
    <div id="app">

        <p>{{msg}}</p>

    </div>

</body>
</html>

If you add a node is not webpack.config.js resolve, and it's looking for the real path of the file:

First error:

Find the path to the file's real node_modules / vue / package.json file has one of the main attribute, i.e. the actual value of the attribute file import js true introduced

webpack introduced vue ordinary page using difference vue

A : Use vue ordinary web page

Two : Use the vue in webpack

Guess you like