0

这个问题与 使用 webpack 运行 vue 有关
我会很感激回答为什么我不能简单地通过创建来初始化 Vue 和 Webpack 应用程序：
index.js

import Vue from 'vue';

let app = new Vue({
  el: '#app',
  data: {
    message: 'message'
  }
});

索引.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue Playground</title>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>
</body>
</html>

这是我的 webpack 配置文件：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.join(__dirname, 'dist')
  },
  plugins: [new HtmlWebpackPlugin({
    template: './src/index.html'
  })]
};

通过这种方式，根（#app）被Vue简单地从HTML文件中删除。我是 Vue 的新手，很高兴得到解释。我有一种学习方式，在学习复杂的解决方案之前，@vue/cli我希望分析它的依赖关系。

我应该只和 一起工作vue-loader吗？据我所知，它是用来解析 .vue 文件的，但我这里不需要。

先感谢您。

4

1 回答 1

1

默认情况下，与 Webpack 一起使用时，仅使用 Vue 的运行时构建。如果你想拥有 in-DOM 模板（你的情况是 Vue 模板直接包含在 HTML 文件中）或字符串模板（模板组件选项），它们是在运行时编译的（当页面加载到浏览器中时）并且需要 Vue 构建其中包括编译器。

查看有关如何配置 Webpack 以使用 Vue 的编译器构建的文档 - Runtime + Compiler vs. Runtime-only

于 2020-12-03T14:54:16.757 回答