vue多项目公共组件引入(npm file)

1.创建公共项目和业务项目

vue create big-screen-common

vue create big-screen-blood

2.在big-screen-common下创建index.js,导出里面的组件

index.js

import CustomDiv from './src/components/CustomDiv'
export {
  CustomDiv
}

项目结构:

注:如果common中包含了第三方组件,需包含第三方组件初始化和公共组件的导出

参考:

import WeVue from 'we-vue'
import 'we-vue/lib/style.css'
import Vue from 'vue'
import playerPicker from './src/components/playerPicker'
Vue.use(WeVue)
export {
  playerPicker
}

业务项目中也需要对第三方组件进行安装

3.在修改package.json，增加一行

"main": "index.js",

4.在业务系统中进行安装

npm install ../big-screen-common/

 5.组件引入并使用

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <CustomDiv></CustomDiv>
  </div>
</template>

<script>
  import HelloWorld from './components/HelloWorld.vue'
  import { CustomDiv } from 'big-screen-common'

  export default {
    name: 'App',
    components: {
      HelloWorld,
      CustomDiv
    }
  }
</script>

<style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
</style>

整体项目结构