使用属性实例化独立的 Vue.js 应用程序（2.0.0rc7）答案

【问题标题】：Instantiate standalone Vue.js app (2.0.0rc7) with properties使用属性实例化独立的 Vue.js 应用程序（2.0.0rc7）
【发布时间】：2016-09-27 17:00:28
【问题描述】：

我有一个使用单页组件构建的 Vue.js 应用程序 (2.0.0rc7)。主要组件称为App。要将我的应用程序渲染到 id 为 app 的 div 中，我使用以下脚本（我称之为 main.js）：

import Vue from 'vue'
import App from './App.vue'

var vm = new Vue({
  el: '#app',
  render: h => h(App)
})

这种方法效果很好。我正在使用 webpack 来解决导入问题。但是，我希望我的应用程序被用作开发人员可以在其网站中轻松使用的“插件”。因此，我想知道如何将属性传递给主要的App 组件？

例如，我想让开发人员能够使用 HTML 脚本标签加载我的（构建的）应用程序，然后使用以下方法对其进行实例化：

App(dataObj1, dataObj2, ..., '#id-of-div-element-to-mount')

【问题讨论】：

你的问题不清楚...请提供用例什么的。
改进您的问题的建议：至少提供一个示例代码，说明您希望开发人员如何使用您的东西。
当然，我在问题中添加了一个示例。

标签： javascript vue.js

【解决方案1】：

我找到了解决问题的方法：我创建了一个 init 函数，该函数将所需数据作为输入，然后将应用程序呈现为 HTML 元素。我让这个初始化函数在全局命名空间中可用：

var init = function (data, el) {
  const vm = new Vue({
    el: el,
    template: '<app :data="data"/>',
    components: {
      App
    },
    data () {
      return {
        data: data
      }
    }
  })
}

// grab existing namespace object, or create a blank object
// if it doesn't exist
var APP = window.APP || {}
APP = {
  init: init
}
window.APP = APP

这样，其他人可以通过APP.init(data, '#some-el-id')在他们的HTML页面中使用我构建的应用程序和他们的数据。

为此，需要在独立模式下构建 Vue，这需要将其添加到 webpack 配置中：

// ...
resolve: {
    alias: {vue: 'vue/dist/vue.js'}
},
// ...

在此处查看详细信息：https://github.com/vuejs/vue/wiki/Vue-2.0-RC-Starter-Resources#standalone-vs-runtime-builds

【讨论】：