最近自己对element组件进行了封装,然后想以后要用的时候通过npm进行引用,而不是每次都是把代码挪到项目里面去。
主要步骤:
- 封装自己的组件(我是引入了element的组件并进行了封装。)
- 我的文件结构:我封装的组件都是在components文件里面
-
将封装的组件挂载在vue中,并抛出到时候进行打包使用
在src下面新建了一个index.js文件,用来写封装了一些组件并抛出。
import ADatePicker from '@/components/form/datePicker/ADatePicker.vue';
import ButtonList from '@/components/button/buttonList.vue';
import EmptyTable from '@/components/table/emptyTable.vue';
import SearchTable from '@/components/table/searchTable.vue';
const components = [
ButtonList,
EmptyTable,
SearchInput,
SearchTable
];
// vue里面通过install挂载组件
const install = function (Vue) {
components.map((component) => {
Vue.component(component.name, component);
});
};
// 这是为了判断是否有vue的环境
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue);
}
export default {
install,
SearchTable,
ButtonList,
EmptyTable,
SearchInput
};
- 新建npmignore文件
因为npm发布的时候只需要打包的文件,其他的文件不需要上传
- 第四步就是修改package.json文件,为打包做准备
"name": "vue-common-com", // 包名
"version": "1.0.2", // 发包的版本,每次发包建议都修改下版本
"private": false, // 这个要改成false
"description": "element component", // 包名的描述
"main": "lib/vue-common-com.common.js", // 包名的入口文件
- 进行打包
在打包的时候我遇到了一些问题,他们都说修改webpack的配置,将入口和出口修改下进行打包,最后打包成一个lib文件就行了。但是我直接用build进行打包的时候,不管我怎么修改webpack都是打包成下面这种文件结构,这种其实不是我想要的。
最后在vue官网找到了一个打包的方式:https://cli.vuejs.org/zh/guide/build-targets.html#web-components-;然后我在package.json加入了这句:
“lib”: “vue-cli-service build --target lib --name vue-common-com --dest lib src/index.js”
直接npm run lib打包,生成的文件结构如下(只生成js文件发布在npm上):
- 进行npm发布
- 先登录npm: npm login; 输入你的用户名和密码,邮箱,直到登陆成功。报错的话可以自行百度下
- 登陆成功后,npm publish进行发布。
- 使用包
通过npm i vue-common-com安装包,然后再main.js文件中进行引用。就可以使用封装的组件了。
欢迎下载插件vue-common-com使用哦,名称到时候修改下,里面不足的地方我会慢慢完善的。
参考文件:
https://www.cnblogs.com/xiaoxiaossrs/p/8664214.html
https://www.cnblogs.com/qianxiaox/p/13826344.html