带有 webpack 的简单 Vue.js答案

【问题标题】：Simple Vue.js with webpack带有 webpack 的简单 Vue.js
【发布时间】：2017-12-06 02:05:31
【问题描述】：

我对 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}} 直接放入正文中，但这并没有'没有帮助，我不知道有什么区别。

【问题讨论】：

你可能需要 Vue webpack 加载器：github.com/vuejs/vue-loader
vue-loader 适用于 .vue 模板文件，不是吗？简单的变量替换不需要它...

标签： javascript vue.js webpack vuejs2

【解决方案1】：

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

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

然后它似乎开始工作了。

代码sn-p

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

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

【讨论】：

【解决方案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>

【讨论】：

只有组件才需要返回对象的数据函数。