从 Vue.js 1 到 2 的 Vue.js 工作流程答案

【问题标题】：Vue.js workflow from Vue.js 1 to 2从 Vue.js 1 到 2 的 Vue.js 工作流程
【发布时间】：2023-03-22 05:10:01
【问题描述】：

当 Vue.js 1 发布时，我从 laracasts 中学习了 Vue.js 课程，我曾经做过这样的事情：

import Comments from './components/Comments.vue';
import Upload from './components/Upload.vue';

new Vue({
    el: 'body',

    components: {
            Comments,
            Upload,
            Preview,
            Algolia,
        },

    etc,
});

这让我可以在整个应用程序中“散布”一些组件。但是我不能再绑定到正文了，因为 Vue 替换了内容并且还抛出了一条错误消息，说你不应该绑定到正文或 html。

我学习了一些关于 Vue.js 2 的课程，但是如何以 Vue.js 2 的方式复制这个工作流程？我喜欢只绑定到 body 并可以选择使用自定义标签在这里和那里放置组件。

【问题讨论】：

设为<body><div id="app"></div></body> 并绑定到#app?
@ceejayoz 这不会清除整个应用程序包装吗？你会有效地消除警告，但我的整个身体不会消失吗？
@Stephan-v 不！出于同样的原因，body 上的绑定当前不会清除整个应用程序。 Tbh Vue 2 不像 Vue 1 那样处理通过应用程序散布组件，但它在大多数情况下都有效

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

我们使用相同的“洒水”方法，我们所做的只是将其从 'body' 更改为 '#app'。

我们还在内部添加了一个包装元素，该元素具有此 id 以基本上复制 body。 (https://github.com/onespacemedia/project-template/blob/develop/%7B%7Bcookiecutter.repo_name%7D%7D/%7B%7Bcookiecutter.package_name%7D%7D/templates/base.html#L62)

<body>
  <div id="app">
    ...
  </div>
</body>

我们使用 Jinja2 作为我们的模板语言，并发现当一个变量在 Jinja2 中无法解析时，它会破坏 Vue，我认为 Vue 会尝试使用它。

我相信它会在初始渲染后将 #app 中的所有内容转换为虚拟 dom。这不会影响我所看到的任何内容，因此您可以愉快地在 body 中添加包装类，并像 Vue 1 一样使用它

【讨论】：

我使用的是运行时版本，但运行时版本实际上不能在 html 中使用模板标签。我想我已经解决了。
知道了，我们也使用运行时版本，但在 webpack 后面使用 vue-loader 和 vue-template-compiler 将 .vue 文件转换为渲染函数 (github.com/onespacemedia/project-template/blob/develop/…) 和 (github.com/onespacemedia/project-template/blob/develop/…)跨度>
@DabGamble 每当我使用$mount() 时，我都会立即获得一个独立的构建，尽管看起来你正在做几乎相同的事情。仅通过查看您的 main.js 文件，我看不出您为什么会获得运行时构建。
@Stephan-v 如果你检查第二个链接，webpack 配置，你可以看到允许它的 vue 别名
你的 webpack 配置中的 'vue': 'vue/dist/vue' 指向独立版本。那个甚至不适合 webpack 使用，因为它应该是 vue/dist/vue.common.js，所以我很抱歉，但我仍然看不到你从哪里获得运行时构建。很抱歉继续抱怨，但我很想弄清楚这一点：P