vue-cli 打包

[heikaimu]

最近做Shopify插件，由于操作dom实在太麻烦，最终还是选择用vue，不过由于Shopify里面不能使用vue-cli，所以需要在vue-cli里面写好组件然后打包成库（lib）或者web-component。

打包成库

vue-cli-service build --target lib --name myLib [entry]

• myLib是打包后的组件的名字，驼峰格式
• entry为入口文件，可以是.vue文件，也可以是index.js文件

index.js

import XXX from 'xxxx';
export default XXX;

Vue是外置的，所以需要引入一个全局Vue。

---

打包成web-component

vue-cli-service build --target wc --name my-element [entry]

该方式打包的入口必须是一个.vue文件，名字多单词用“-”隔开

Vue是外置的，所以需要引入一个全局Vue。

注意：该方式只能通过ref来获取节点，ID不生效。

---

打包方式选择

由于Shopify开发插件需要用到fabric.js，而fabric.js又需要用ID去绑定节点，所以最终用的打包库的方式。