gpt4 book ai didi

javascript - 我是否需要(或者应该)将所有 Vue 组件包装在包装器组件中?

转载 作者:行者123 更新时间:2023-12-03 02:04:10 27 4
gpt4 key购买 nike

我正在尝试将 Webpack 4.5 和 Vue 组件组合在一起。 构建很好,我在屏幕上看到了预期的两个组件(详细信息如下)。

创建这个基本 SPA 是一个非常迭代的过程,需要从各种来源收集信息(并不总是一致)。我最终得出结论:

  • 一个 HTML 文件,其中包含一个 Vue 组件,整个 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 )

这是我想删除并使用的文件<temperature-outside></temperature-outside>直接在上面的 HTML 文件中

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

最佳答案

Vue 组件在 Vue 实例的上下文中被识别。事实证明,您需要在 html 中设置一个安装点,包装组件或父 Vue 组件将安装所有已注册的子组件。

Registering Components

关于javascript - 我是否需要(或者应该)将所有 Vue 组件包装在包装器组件中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49880245/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com