发布组件到npm上

将自己写的组件发布到npm上，分为两个步骤:1.打包一下自己的组件2.发布组件

打包一下自己的组件

首先需要用webapck搭建好一个基本的框架(不需要脚手架)

项目目录结构如下图:

在components中写上以.vue文件结尾的vue组件

<template>
  <fieldset>
    <legend>2021的组件</legend>
    <h2>{{msg}}</h2>
    <h2 class="maketime">{{time}}</h2>
  </fieldset>
</template>
<script>
export default {
  name: 'myUI2021',
  data () {
    return {
      msg:'2021第一次封装的组件'
    }
  },
  props:{
    time:{
      type:String,
      default:()=>{
      return '创建时间:20210901'
    }
    }
    
  }
}
</script>
<style scoped>
.maketime{
  color:blue;
}
</style>

定义入口文件main.js

这里需要定义一个install函数，Vue.use时，会把Vue实例传进去，然后调用传入的函数

import myUI2021 from './components/myUI2021.vue'

const components = [
    myUI2021
]

const install = function (Vue) {
    if (install.installed) return
    // 遍历注册全局组件
    components.map(component => Vue.component(component.name, component))
    if (typeof window !== 'undefined' && window.Vue) {
        install(window.Vue)
    }
}

export default install 

在webpack.config.js中写上基本的配置

主要是指定打包的入口文件，打包的出口文件,后面打包时会基于这个配置进行打包的

const path=require('path')
module.exports={
    "entry":"./src/main.js",
    "output":{
        "path":path.resolve(__dirname,'dist'),
        "filename":"index.js",
        "publicPath":"dist/",
        "library": "myUI2021", 
        "libraryTarget": "umd",//这里指定为任意导入导出方式，都可以用
        "umdNamedDefine": true
    },
    "module": {
        rules: [
          {
            test: /\.css$/i,
            use: ["style-loader", "css-loader"],
          },
          {
            test: /\.less$/i,
            loader: [
              'style-loader',
              'css-loader',
              'less-loader',
            ],
          },
          {
            test: /\.(png|jpg|gif|webp)$/i,
            use: [
              {
                loader: 'url-loader',
                options: {
                  limit: 2800,
                  name:"img/[name].[hash:8].[ext]"
                }
              }
            ]
          },
          {
            test: /\.m?js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['es2015']
              }
            }
          },
          {
            test:/\.vue$/,
            use:["vue-loader"]
          }
        ],
      },
      "resolve":{
        alias:{
          'vue$':'vue/dist/vue.esm.js'
        }
      }
}

package.json

这里主要是指定打包命令,进行打包所依据的配置文件

{
  "name": "meetwebpck",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^2.6.14"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^2.0.1",
    "file-loader": "^3.0.1",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "vue-loader": "^13.3.0",
    "vue-template-compiler": "^2.6.14",
    "webpack": "^3.6.0"
  }
}

好了，我们现在就打包一下~

在项目根目录下进行打包,因为使用的是根目录下的package.json

打包好的文件

发布组件到npm上

在dist文件夹下，初始化一个package.json文件

在打包后的dist文件夹下，使用npm init -y初始化一个package.json(也可以使用根目录下的package.json文件)

指定发布到npm上的项目名，入口文件(方便导入时找到这个index.js文件),后面会使用npm publish把dist文件夹下的所有东西都发布到npm上

登录npm

提示一下，这里的密码输入时是看不见的，不是bug~

发布组件到npm上

需要注意一下，发布时需要把npm上的下载的源切换为原来的npm 上的

好了这样就发布成功了~

使用自己发布的组件

在脚手架里下载组件

在main.js中引入下载的组件

我这里的脚手架里用的是vue2

App.vue中使用组件

好了，到这里就结束了，后面如果大家如果想要更新npm上自己写的组件，可以在发布时改变一下版本号就行了。如果想要删除组件，可以在任意地方使用npm unpublish 组件名@版本命令就可以删除了。