Webpack 如何在javascript实例之外调用vue组件？

我开发了一些vue组件网格、弹出窗口和布局。。通过webstorm和vue cli..webpack

我的开发环境： webstorm+webpack+vue cli

现在我想知道如何在javascript中使用它

我可以这样称呼它 在主js中，我写。。 从“./Grid”导入网格 窗口。$grid=grid 我使用网页包app.js mycode和其他

My demo.html

1.<script src=app.js> <script src=demo.js>
2.<div id="showdiv"></div>
3.

demo.js

$('showdiv').append('<grid :options="options"></grid>')
var grid = window.$grid
var gridvue = new Vue({
      el: '#showdiv',
      data: {
        options: options
      },
      components: {grid}
    })

但是如果我使用更多的component.vue，我必须创建相同数量的新vue 我认为在室外使用vue不是一个好方法

我非常感谢回答我问题的人，谢谢！

---

对不起，我说的是英语…

我想您可能对Vue中组件的工作方式有点困惑，在您的情况下，您只需创建每个组件并注册其自身的依赖项即可：

Gridvue.vue

现在将App.vue装载到主vue实例：

import App from './App.vue';

new Vue({
    name: "App",
    render: h => h(App)
}).$mount('#app');

在HTML中，您只需：

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

现在您有了一个主要的vue实例来为您的组件提供服务。请注意，我没有将任何内容附加到窗口，也没有使用jQuery尝试将任何内容注入视图端口，我只是一次构建一个组件，并将它们注册到我需要的组件中。

webpack.config.js

output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].js'),
    library: 'senyint',//package name senyint  window.senyint
    libraryTarget: 'umd',//package type umd
    umdNamedDefine: true,
    chunkFilename: utils.assetsPath('js/[id].js')
  },

main.js

exports.scom = {
  Bug, Hello, Grid, Div, Button, Loading
}

demo.html

<script src='/dist/js...all'>
//we can call the component   
window.senyint.scom.Grid  like this..

---

也许我没有描述我的问题。我知道如何在水疗中心工作。但是现在打包一些componentvue.vue供javaer使用。它是component.vuegrid.vue layout.vue popup.vue。我必须在jsp.html.js中使用它。例如：javaer编写一个带有网格、弹出窗口和布局的业务页面。他们怎么能包括我的软件包？对不起，我不知道你想做什么，你能举一个简单的例子吗？看，这是我的项目。它可以与npm run dev一起运行。但是我想像插件一样使用这个项目。在其他项目中，只需导入它，并使用项目的组件vue。谢谢

exports.scom = {
  Bug, Hello, Grid, Div, Button, Loading
}

<script src='/dist/js...all'>
//we can call the component   
window.senyint.scom.Grid  like this..