构建Vue组件库-优快云博客

本文链接：https://blog.youkuaiyun.com/qq1248409755/article/details/112800476

主要分为三部

这个其实和react的差不多就是安装不同的几个插件即可，下面详细介绍

1.配置webpack

const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const VueLoaderPlugin = require('vue-loader/lib/plugin');//配置vue的插件加载vue的模板用
const vueLoaderPlugin = new VueLoaderPlugin()
const htmlWebpackPlugin = new HtmlWebpackPlugin({
    template: path.join(__dirname, "./public/index.html"),
    filename: "./index.html"
});
var NODE_ENV = process.env.NODE_ENV;
module.exports = {
    mode: NODE_ENV == 'dev' ? "development" : "production",
    entry: path.join(__dirname, NODE_ENV == 'dev' ? "./src/index.js" : "./src/components"),//这个地方就是分是开发还是打包发布开发就index.js打包就直接打包components的文件这样就不会把index.js中的例子打包进去
    output: {
        path: path.join(__dirname, "dist"),
        libraryTarget: 'umd',  //发布组件专用
        filename: "index.js"
    },
    module: {
        rules: [{
            test: /\.(js|jsx)$/,
            use: "babel-loader",
            exclude: /node_modules/
        }, {
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader'
            ]
        },
        {
            test: /\.(png|jpg)$/,
            use: {
                loader: 'url-loader',
                options: {
                    limit: 100 * 1024, //小于100kb变成base64
                    esModule: false //如果不设置这个HTML中img的路径会出现问题
                }
            }
        },
        {
            test: /\.(woff|woff2|eot|otf|ttf)$/,
            use: ['file-loader']
        }, {
            test: /.vue$/,//加载vue模板用的
            loader: 'vue-loader'
        }
        ]
    },
    plugins: [htmlWebpackPlugin,vueLoaderPlugin],
    devServer: {
        host:'0.0.0.0',//配置局域网可以访问，这个可以不屑
        port: 8000
    }
};

2.package.json文件
下面main是重要选项是发布后用户通过zzvue可以访问到的地址
files也是重要选项是打包要发布的文件夹

{
  "name": "zzvue",
  "version": "1.0.3",
  "description": "vue组件制作,添加移动功能",
  "main": "dist/index.js",
  "files": [
    "dist"
  ],
  "scripts": {
    "dev": "set NODE_ENV=dev&& webpack-dev-server",
    "build": "set NODE_ENV=prod&& webpack"
  },
  "author": "reqingzai",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "css-loader": "^5.0.1",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "vue": "^2.6.12",
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14",
    "vue-loader": "^15.9.6",
    "vue-template-compiler": "^2.6.12"
  },
  "dependencies": {
    
  }
}

3.目录结构

这是结构目录
在components下面有个index.js专门引入所有组件用的
index.html中内容如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vue</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

App.vue内容如下

<template>
  <div id="app">
  </div>
</template>
<script>
export default {
};
</script>

index.js文件如下
这里需要挂在vue所以要写这个index.js文件

import Vue from 'vue'
import App from './App.vue'
new Vue({
    render: h => h(App)
}).$mount('#app')

然后就可以开发组件了在app.vue中引用然后进行尝试
npm login登陆失败

npm login #先进行npm登录这里注意你的npm路径不要是淘宝镜像要设置成原来的
#登录之后你可以
npm whoami #查看登录者是谁
npm publish #进行发布你的代码，这时候你要注意你的版本号不能和上次一样不然会报错403你要改下版本号

vue组件发布npm

主要分为三部