Vue.js 工作流从 Vue.js 1 到 2

Question

当 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,
});

这让我可以在我的应用程序中添加 'sprinkle' 组件。我不能再绑定到 body，因为 Vue 替换了内容并且还抛出一条错误消息说你不应该绑定到 body 或 html.

我学习了 Vue.js 2 的几节课，但如何以 Vue.js 2 的方式复制此工作流程？我喜欢只绑定到主体并可以选择使用自定义标签在这里或那里放置组件。

Answer 1

我们使用相同的 "sprinkling" 方法，只是将其从 '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 中添加包装 class 并像 Vue 1

一样使用它

Vue.js 工作流从 Vue.js 1 到 2

Vue.js workflow from Vue.js 1 to 2

javascript

vue.js

vue-component

vuejs2