使用 webpack 运行 vue [英] run vue with webpack

查看:20
本文介绍了使用 webpack 运行 vue的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试使用 webpack 运行 vue,但是当我运行 webpack 时,index.html 显示一个空白页面.我的代码有什么问题?

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/

            }
        ]
    }
}

推荐答案

在使用 VUE 时,WebPack 本身的配置非常人性化,但是对于初学者来说,很容易出错.导致项目出错,就像你出不来页面一样.

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.

在使用vue的项目中,个人不建议单独配置webpack和vue-loader.可以直接使用vue官方脚手架vue-cli.不用考虑这些配置,自动配置.

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

如果您刚开始学习 Vue,这里有一个入门级演示.虽然只是一个小应用,但是涵盖了很多知识点(vue2.0 + vue-cli + vue-router + vuex + axios + mysql + express + pm2 + webpack),包括前端、后端、数据库等网站的一些必备元素,对我来说,学习意义重大,希望互相鼓励!

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 演示

这篇关于使用 webpack 运行 vue的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆