学习地址
一、在一个文件夹中按住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包中组件的使用
引入公共组件 公共组件创建好了,需要引入,引入代码和引入其他组件的方式一样,代码如下: