封装组件上传私有库或者npm

封装组件上传私有库或者npm

1.普通的引入方式
不再赘述

 import zuJian from "./packaging/test"
 export default {
     components:{
        zuJian
    }
 }

然后就可以用驼峰来把他写在上面了

2.封装发布到npm

1. 首先写好组件，最好写上name值

export default {
    name:"biaoGe",
    }

2. 创建一个初始文件，其实就是js文件都可以，一般叫index.js

import biaoGe from "./test.vue";

// vue的插件模式需要暴露一个install的方法
const install = (Vue) => {
    Vue.component(biaoGe.name,biaoGe);
}

export default install;

3.定义打包规则，这里我用的是vuecli自带的打包，webpack日后研究

 "scripts": {
    "dev": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "buildtest": "vue-cli-service build --target lib ./src/packaging/index.js --dest biaoGe --name ui06",
  },

–target lib ./src/packaging/index.js 从哪里开始打包 --dest biaoGe打包后的文件夹名字 --name ui06"打包后的文件名
4.复制打包后的js文件

复制到一个新的文件夹里面，因为这里太多了，我们只用一个mini的，初始化package.json

然后就可以给我们的包起一个名字了
5.在这个文件夹下面，记得要切换npm地址到原生地址，然后npm publish就可以了(注册激活npm)

6 使用
yarn/npm 然后就是和使用其他组件一样

import wzc123 from "wzc123"
Vue.use(wzc123)

就可以使用了

7 如何在创建的标签中插入其他的东西，日后学习，现在用的其实就是修改一下本来的组件，这个就是所谓的定制化需求