Vuejs - Vue 应用程序构建为其他项目的 Vue 路由器的组件

Question

我正在尝试为其他 vue 项目构建一个 vue 应用程序，以用作应用程序 vue 路由器的组件。 这是我开始的简单项目结构，

|-- my-app
    |-- lib
        |-- my-app-component <-- folder copied from (my-app-component's dist)
    |-- App.vue
    |-- app.js
    |-- package.json



|-- my-app-component
    |-- dist
    |-- App.vue
    |-- app.js
    |-- package.json

这是我正在尝试实施的想法和步骤，

1. 将my-app-component构建为可重用组件，my-app-component->app.js处的代码为

import MyCustomElement from './App'

export {
   MyCustomElement
}

1. 将 dist 文件夹复制到 my-app 的 lib 文件夹，这只是临时解决方案，一旦我设法解决，将使用 Lerna 和 yarn 工作区进一步改进当前的问题
2. Import my-app-component from lib at my-app's lib, code at my-app - > app.js 是，

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import MyAppComponent from '@lib/my-app-component'

const routes = [
  {
    name: 'MyAppComponent',
    path: '/',
    component: MyAppComponent
  }
]

const router = new VueRouter({
  routes
})
new Vue({
  el: '#app',
  router,
  components: {
    App
  },
  template: '<App/>'
})

基于此步骤，我似乎无法成功导入组件。 我正在使用 vue-cli-service build 命令构建我的组件

Answer 1

似乎在这里找到了答案……

https://itnext.io/create-a-vue-js-component-library-as-a-module-part-1-a1116e632751

这些天我一直在回答自己的问题，堆栈溢出是否仍然存在？

解决方案：

1. 构建者

vue-cli-service build --target lib --name dummylib src/main.js

1. 在 package.json 中添加 main

"main": "./dist/dummylib.common.js",

1. 在主应用中，通过
添加组件

yarn add ../dummylib

4. 导入和使用组件

import DummyButton from 'dummylib'
export default {
  name: 'app',
  components: {
    'dummy-button' : DummyButton
  }
}