学习地址

一、在一个文件夹中按住shift的同时，点击鼠标右键，打开命令窗口

首先创建三个项目，main、test、common，其中common是公共组件，main和test引用了common包。

vue create main

vue create test

vue create common

二、common包入口

创建完成后删除common包一些无用的东西，修改package.json，增加一行 "main": "index.js", 这表明index.js就是common包的入口文件，然后创建index.js文件。

index.js文件

index.js中需包含上面说的第三方组件初始化和公共组件的导出，本示例完整内容如下

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

}

三、common包的使用

分别进入main和test，在控制台输入命令：

npm install ../common/

其中…/common/是common的相对路径，这里也可以输入绝对路径。

这样就将common这个工程以node_module的方式引入到main和test项目中了。可以正常使用common在index.js中导出的组件了。

命令执行完后，package.json里会多一条记录

"common": "file:../common",

四、common包中组件的使用

引入公共组件 公共组件创建好了，需要引入，引入代码和引入其他组件的方式一样，代码如下：