首先是最简单的方式，类似于https://github.com/WindrunnerMax/Campus/tree/master/src/components，组件全部都是在components目录下完成的，那么我们可以直接在此处建立一个package.json文件，然后在此处将资源文件发布即可，这样就很简单了，在使用的时候直接引用即可，另外可以设置一下别名去引用，尝试过在VSCode里按@会有代码提示，所以可以加个@处理别名。
$ yarn add shst-campus-components配置vue.config.js与tsconfig.json。
// vue.config.js const path = require("path"); module.exports = { transpileDependencies: ["shst-campus-components"], configureWebpack: { resolve: { alias: { "@": path.join(__dirname, "./src"), "@campus": path.join(__dirname, "./node_modules/shst-campus-components"), }, }, }, }; // tsconfig.json { "compilerOptions": { // ... "paths": { "@/*": [ "./src/*" ], "@campus/*": [ "./node_modules/shst-campus-components/*" ] }, // ... }使用组件库，具体请参考https://github.com/WindrunnerMax/Campus。
// ... import CCard from "@campus/c-card/c-card.vue"; // ... 编写webpack的loader和plugin第二个方式就比较难顶了，当然现在我也是放弃了这个想法，不过还是记录一下，毕竟折腾了一天多实际上是做到了能够实现一个正常使用的方式了，但并不是很通用，主要是写的loader的正则匹配的场景覆盖不全，所以最终还是没有采用这个方式，本身一个并不麻烦的问题最后演变到了需要写一个loader去解决，是真的要命。首先我是想实现一个类似于import { CCard } from "shst-campus"这种引用方式的，看起来很眼熟，其实就是想参照antd或者同样也是element-ui的引入方式，所以实际上还是研究了一下他们的引入方式的，实际上是完成了babel插件，然后通过这个插件在引入的时候就编译成其他引入的语句，实际上前边举的例子默认类似于import CCard from "shst-campus/lib/c-card"，当然这个是可以配置的，使用babel-plugin-import和babel-plugin-component实现类似于按需加载的方式，首先我尝试了babel-plugin-import并且配置了相关的路径。
// babel.config.js const plugins = []; // ... plugins.push([ "import", { libraryName: "shst-campus", customName: name => { return `shst-campus/src/components/${name}/index`; }, }, "shst-campus-import", ]); // ... module.exports = { // ... plugins, };想法是很美好的，我尝试进行编译，发现这个配置没有任何动静，也就是没有生效，我虽然很奇怪，但是想到这个是原本uniapp就自带的插件，所以可能配置会被吃掉或者被覆盖掉，所以我尝试了使用babel-plugin-component。
// babel.config.js const plugins = []; // ... plugins.push([ "component", { libraryName: "shst-campus", libDir: "src/components", style: false, }, "shst-campus-import", ]); // ... module.exports = { // ... plugins, };