实例化具有属性的独立Vue.js应用程序（2.0.0rc7）

-1

我有一个使用单个页面组件构建的Vue.js应用程序（2.0.0rc7）。主要组件被称为App。为了使我的申请，一个div id为app，我用下面的脚本（我把它叫做main.js）：实例化具有属性的独立Vue.js应用程序（2.0.0rc7）

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

来源

2016-09-27 erik13579

你的问题不明确。 ..请提供用例或东西。 –

建议改善您的问题：至少提供一个示例代码，说明您希望如何让开发人员使用您的东西。 –

当然，我添加了一个例子来的问题。 – erik13579

我找到了解决我的问题：我创建了一个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

来源

2016-09-27 23:52:13 erik13579

实例化具有属性的独立Vue.js应用程序（2.0.0rc7）

回答

相关问题