vue 自定义组件npm上传

---

@import url("../font/font.css");
可以将其他样式共同引入一个文件中，方便管理用时减少引用的文件

---

 index.js

import ModelBorder1 from "./border/border1.vue"
import ModelBorder2 from "./border/border2.vue" 

const components = [
    ModelBorder1,
    ModelBorder2, 
]
const install = (Vue) => {
    components.forEach((item) => {
        Vue.component(item.name, item) // 使用的是 组件内部定义的name （eg: modelBorder1,使用组件时 <model-border-1/>） 
    });

}
if (typeof window !== "undefined" && window.Vue) {
    install(window.Vue)
}
export default {
    install
};

// 或者使用这种
import Vue from "vue";
let commonFiles = require.context('./components', true, /\.vue$/); // 引入 components 文件夹下的所有 .vue 文件(true设置就是包括子目录)

let commonComponents = [];

commonFiles.keys().forEach((item) => { // 循环出组件
  let moduleName = commonFiles(item);
  commonComponents.push(moduleName.default);
})

commonComponents.map(component => Vue.component(component.name, component))

npm run lib

---

---

将代码上传npm 

第一步： 创建自己的npm账户

第二步： npm login 登录自己的npm账户

第三步： npm publish   发布到自己得npm账户

第四步：npm add cddp-ui  / npm update cddp-ui 下载或更新 自己创建得组件库 cddp-ui

// npm 下载使用
// import cddpUi from "cddp-ui"
// import "cddp-ui/public/style/cddp-ui.css" 
// Vue.use(cddpUi)
// 本地引用使用
import cddpUi from "./components"
import "@/assets/style/cddp-ui.css";
Vue.use(cddpUi)

 <model-border-1> 
    //就可以在项目中直接写自己定义好的组件了
 </model-border-1>