Question

我使用（vue-cli..webpack ...）开发了webstorm的一些vue组件（grid，popup，layout ..）。

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

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

我可以这样称呼它在主要的js，我写.. 从'./Grid'导入网格窗口。$ grid =网格
我使用webpack包app.js（mycode和其他..）

我的demo.html

myprojectDir/<all configuration files> // such as package.json Readme.MD
myprojectDir/node_modules/<all npm dependencies> // these will be installed using npm install command
myprojectDir/app/<you application folder>

demo.js

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

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

我非常感谢谁回答我的问题，谢谢！对不起我的英文...

Answer 1

我认为你可能对组件在Vue中的工作方式感到有些困惑，在你的情况下你可以简单地创建single file components，每个组件都注册它自己的依赖项：

<强> Gridvue.vue

<template>
  <div>
     <grid :options="options"></grid>
  </div>
</template>

<script>
import Grid from './Grid.vue

export default {
   components: {
     Grid // register grid so it can now be used inside the component
   },
   props: ['options']
}
</script>

现在，当您想要使用gridvue时，将其导入到单独的组件中，对于此示例，我将使用您的应用程序的主要入口点App.vue：

<强> App.vue

<template>
  <div>
    <grid-vue :options="options"></grid-vue>
  </div>
</template>

<script>
import GridVue from './GridVue.vue

export default {
   components: {
     GridVue // register GridVue so it can now be used inside the component
   },
   data(){
     return {
       options: {}
     }
   }
}
</script>

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

import App from './App.vue';

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

在您的HTML中，您只需：

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

现在您有一个主要的vue实例来提供组件。请注意，我没有附加任何内容到window或使用jQuery尝试向视口注入任何内容，我只是一次构建一个组件并在组件中注册它们需要他们。

Answer 2

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..

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

2 个答案: