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. build my-app-component в качестве компонента многократного использования, код в my-app-component-> app. js равен

import MyCustomElement from './App'

export {
   MyCustomElement
}

Скопируйте папку dist в папку my-app lib , это всего лишь временное решение, которое будет улучшено с использованием рабочих пространств Lerna и пряжи, как только мне удастся решить текущий проблема Импорт my-app-component из lib на my-app s lib , код на my-app -> app. js is,

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

Добавить основной в упаковке. json

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

В главном приложении добавьте компонент

yarn add ../dummylib

Импорт и использование компонента

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