带有 webpack 的简单 Vue.js

Question

我对 javascript/webpack/npm/whatever 基本上一无所知，但我正在尝试一个简单的 Vue.js 应用程序。

它看起来像这样：

index.html

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Vue Test</title>
  </head>
  <body>
    <div class="vue-app">
      {{ message }}
    </div>
    <script src="/static/testvue.bundle.js"></script>
  </body>
</html>

main.js

import Vue from 'vue';

new Vue({
    data: {
        message: 'Testing Vue'
    },
    el: '.vue-app'
});

webpack.config.js

var path = require('path');

module.exports = {
    entry: './main.js',
    output: {
        filename: 'testvue.bundle.js',
        path: path.join(__dirname, '')
    },
    devServer: {
        inline: true,
        port: 8080
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',

                query: {
                    presets: ['es2015']
                }
            }
        ]
    }
};

当我转到网页时，它是空白的，我在控制台的“元素”中看到了这个：

<!--function (e,n,r,o){return Ce(t,e,n,r,o,!0)}-->

知道发生了什么以及如何使其工作吗？ 就好像它正在尝试做某事，但有些事情并没有排成一行。 我尝试改变一些我看到的不同的东西，比如使用 #vue-app 而不是 .vue-app 或将其更改为“body”，然后将 {{message}} 直接放入正文中，但这并没有'没有帮助，我不知道有什么区别。

Answer 1

所以，看起来问题是 webpack 想要 Vue 的“ESM”版本。

您可以按照以下方式向 webpack.config.js 添加一些内容： https ://v2.vuejs.org/v2/guide/installation.html

然后它似乎开始工作了。

代码片段

resolve: {
    alias: {
        'vue$': 'vue/dist/vue.esm.js'
    }
}

我不确定有什么区别或为什么这很重要。

Answer 2

您需要在数据中返回message 。

 new Vue({ data() { return { message: 'Testing Vue' } }, el: '.vue-app' });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Vue Test</title> </head> <body> <div class="vue-app"> {{ message }} </div> <script src="/static/testvue.bundle.js"></script> </body> </html>

带有 webpack 的简单 Vue.js

问题描述

2 个解决方案

解决方案1
3 已采纳 2017-12-06 02:30:33

解决方案2
-1 2017-12-06 02:13:58

带有 webpack 的简单 Vue.js

问题描述

2 个解决方案

解决方案1 3 已采纳 2017-12-06 02:30:33

解决方案2 -1 2017-12-06 02:13:58

解决方案1
3 已采纳 2017-12-06 02:30:33

解决方案2
-1 2017-12-06 02:13:58