CODEWITHSUNDEEP
webpackvue.js
alex
alex

Reputation: 7905

run vue with webpack

I'm trying to run vue using webpack but when i run webpack , index.htmlshows a blank page.whats wrong with my code?

index.html

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Vue Example</title>
  </head>
  <body>
    <div id="app">{{ message }}</div>
    <script src="dist/build.js"></script>
  </body>
</html>

.

//main.js
import Vue from 'vue'

var a = new Vue({
  el: '#app',
  data: {
    message: "i know you"
  }
})

. 

//webpack.config.js
module.exports = {
    // This is the "main" file which should include all other modules
    entry: './src/main.js',
    // Where should the compiled file go?
    output: {
        // To the `dist` folder
        path: './dist',
        // With the filename `build.js` so it's dist/build.js
        filename: 'build.js'
    },
    module: {
        // Special compilation rules

        loaders: [
            {
                // Ask webpack to check: If this file ends with .js, then apply some transforms
                test: /\.js$/,
                // Transform it with babel
                loader: 'babel',
                // don't transform node_modules folder (which don't need to be compiled)
                exclude: /node_modules/

            }
        ]
    }
}

Upvotes: 0

Views: 672

Answers (1)

AlloyTeamZy
AlloyTeamZy

Reputation: 159

When using VUE, the configuration of the WebPack itself is very user-friendly, but for beginners, it is easy to make mistakes. Cause the project to go wrong, just like you do not come out of the page.

In projects that use vue, individuals do not recommend configuring webpack and vue-loader separately. You can directly use vue official scaffolding, vue-cli. Do not have to consider these configurations, automatically configured.

vue-cli

If you just started learning Vue, here's an entry-level demo. Although it is only a small application, but it covers a lot of knowledge points (vue2.0 + vue-cli + vue-router + vuex + axios + mysql + express + pm2 + webpack), including front-end, back-end, database and other sites Some of the necessary elements, for me, learning great significance, would like to encourage each other!

Vue Demo

Upvotes: 2

Related Questions