【发布时间】：2018-09-27 13:07:37
【问题描述】：
我正在尝试将 Webpack 4.5 和 Vue 组件放在一起。 构建很好，我在屏幕上看到了预期的两个组件（详情如下）。
创建这个基本的 SPA 是一个非常反复的过程，从各种来源收集信息（并不总是一致的）。我终于结束了：
- 包含一个 Vue 组件的 HTML 文件，是整个 SPA 的包装器
- 上面的 Vue 组件，它本身带来了实际有用的组件
有没有办法跳过包装器组件，以便我可以直接编辑 HTML 文件（并链接 CSS 样式文件）？然后我会定义一个 CSS 网格并将组件放置在其中。
或者我没有预见到保持这种方式有什么好处？
当前项目文件：
在浏览器中打开的 HTML 文件
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<infoscreen id="infoscreen"></infoscreen>
</body>
<script src="bundle.js"></script>
</html>
webpack 配置文件
'use strict'
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = {
mode: 'development',
entry: [
'./src/entry.js'
],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
new CopyWebpackPlugin([{
from: 'src/infoscreen.html',
to: 'infoscreen.html'
}])
]
}
entry.js 文件
import infoscreen from "./infoscreen.vue"
import Vue from "vue/dist/vue.js"
Vue.component("infoscreen", infoscreen)
new Vue({ el: "infoscreen" })
Vue 包装器组件 (infoscreen.vue)
这是我要去掉的文件，直接在上面的HTML文件中使用<temperature-outside></temperature-outside>
<template>
<div id="app">
<temperature-outside></temperature-outside>
<temperature-outside></temperature-outside>
</div>
</template>
<script>
import temperatureOutside from './temperatureOutside.vue'
export default {
name: 'infoscreen',
components: {
'temperature-outside': temperatureOutside
}
}
</script>
Vue 组件 (temperatureOutside.vue)
<template>
<div>
hello {{yo}}
</div>
</template>
<script>
export default {
name: 'temperatureOutside',
data: function () {
return {
yo: "world"
}
}
}
</script>
【问题讨论】：
标签： javascript webpack vue.js vuejs2 vue-component