使用vue在npm上发布自己的ui组件包

ゞ浴缸里的玫瑰 2022-04-25 09:58 240阅读 0赞

# 使用vue在npm上发布自己的ui组件包 #

可以提前去npm上搜自己要上传的包名，以后在文件中都统一使用该包名，避免出错。  
[npm官网][npm]

### 1.安装 ###

`vue init webpack-simple jed-nui`  
jed-nui是我之前去npm搜过的包名，没有重复的，于是项目就使用该名称

### 2.进入项目，编写组件 ###

这里有vue基础的应该都不难

*  创建文件目录

├── src
    │   ├── packages //存放组件包
    │           ├── button
    |                   ├── index.js   //配置文件
    |                   ├── index.vue  //组件
    │                   └── main.sass  //组件样式表
    |       ├── index.js  //统一配置

大体结构如此

*  编写组件

导出的时候要注意，要加上组件名称（你以后在项目中要使用的名称），比如像饿了么ui中的`el-button`

export default { 
    name:"jed-button",
    ....
    }

*  在app.vue中引入，看是否出现对应的效果

### 3.相关配置 ###

#### 3.1 配置插件 ####

在组件包中的index.js中进行插件配置

import JedButton from './index.vue';
    JedButton.install = Vue => Vue.component(JedButton.name, JedButton);//.name就是开始说的vue文件暴露出来的name名，JedButton整个组件
    if (typeof window !== 'undefined' && window.Vue) { 
      window.Vue.use(JedButton);
    }
    export default JedButton;

我们都知道我们的包其实也就是一个插件，只有通过vue.use(插件名)才能使用。  
具体参考 [vue插件官方文档][vue]

如果只有一个组件我们可以像上面那样配置，但是如果组件太多了，我们可以建一个index.js进行统一配置  
在packages根目录下的index.js进行统一配置

import JedButton from “./button/index.js”
    import JedForm from "./form/index.js"
    //引入全部js文件
    const components=[JedButton,JedForm]
    const install=function(Vue,opts={ }){ 
    components.forEach((elem,i)=>{ 
    Vue.component(elem.name, elem);
    })
    }
    export default install

ok到这基本要完事了

#### 3.2配置webpack.config.js ####

var path = require('path')
    var webpack = require('webpack')
    const NODE_ENV = process.env.NODE_ENV;
    module.exports = { 
      // entry: './src/main.js',
      // output: { 
      // path: path.resolve(__dirname, './dist'),
      // publicPath: '/dist/',
      // filename: 'build.js'
      // },
      entry: NODE_ENV == 'development' ? './src/main.js' : './src/packages/index.js',
      output: { 
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/',//路径
        filename: 'jed-nui.js',//打包之后的名称
        library: 'jed-nui', // 指定的就是你使用require时的模块名
        libraryTarget: 'umd', // 指定输出格式
        umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
      },

这里没什么要讲的，主要是提醒打包后的文件名最好使用你npm发布的包名。

#### 3.3 配置package.json ####

{ 
      "name": "jed-nui",
      "description": "A Vue.js project",
      "version": "1.0.0",
      "author": "hansu123 <599272686@qq.com>",
      "license": "MIT",
      "private": false,//设置成公开的
      "scripts": { 
        "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
        "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
      },
      "dependencies": { 
        "vue": "^2.5.11"
      },
      "browserslist": [
        "> 1%",
        "last 2 versions",
        "not ie <= 8"
      ],
      "devDependencies": { 
        "babel-core": "^6.26.0",
        "babel-loader": "^7.1.2",
        "babel-preset-env": "^1.6.0",
        "babel-preset-stage-3": "^6.24.1",
        "cross-env": "^5.0.5",
        "css-loader": "^0.28.7",
        "file-loader": "^1.1.4",
        "node-sass": "^4.5.3",
        "sass-loader": "^6.0.6",
        "vue-loader": "^13.0.5",
        "vue-template-compiler": "^2.4.4",
        "webpack": "^3.6.0",
        "webpack-dev-server": "^2.9.1"
      },
      "keywords": [
        "jed-nui"
      ],//随便设置不设置
      "main": "dist/jed-nui.js",
      //关键，这里的路径一定是你webpack.congfig.js中的filename,否则你在项目引入的时候会报错，cant resolve
      //如果不设置的话，你在项目引入你发布的包的时候需要import包的相对路径，得自己找很麻烦
      "files":[
        "dist",
        "src"
      ]
      //打包后在包中存在的文件，这个你可以在安装自己的包后在node_modules中查看
    }

正常就改这些就ok了

#### 修改.ignore ####

.DS_Store
    node_modules/
    npm-debug.log
    yarn-error.log
    
    # Editor directories and files
    .idea
    *.suo
    *.ntvs*
    *.njsproj
    *.sln

### 4.本地测试 ###

*  打包

npm run build
    npm pack

这样会在项目生成一个tgz文件  
![在这里插入图片描述][20190531110250241.png]

*  放入另一个vue项目中测试

`npm i ./jed-nui-1.0.0.tgz`

*  引入

main.js中

import jedUI from "jed-nui"
    Vue.use(jedUI)

在app.vue中使用

<jed-button type="danger">hansu</jed-button><br>
    <jed-button type="warning">hansu</jed-button><br>
    <jed-button type="danger" size="large">hansu</jed-button>

最终效果  
![jedUI][]

### 5.npm发布 ###

##### 5.1 先去官网注册一个账号 #####

[npm官网][npm]

##### 5.2 发布 #####

*  npm login
 *  npm publish

不出意外你将会遇到如下错误：

*  问题1

请不要使用cnpm

cnpm 的仓库只是 npm 仓库的一个拷贝，它不承担 publish 工作，所以你用 cnpm publish 命令会执行失败的。

切换原镜像

npm config set registry=http://registry.npmjs.org

切换淘宝镜像

npm config set registry=https://registry.npm.taobao.org/

*  问题2

Unable to authenticate？

更新最新的npm

npm i -g npm

*  问题3

邮箱验证  
会弹出点击发送邮件即可

最后执行  
npm publish  
搞定

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwMzE5MA_size_16_color_FFFFFF_t_70]

### 6.本地修改index.html ###

打包过后src路径会发生变化，所以我们需要在index.html中修改src的路径，不然页面会什么都没有

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <title>jed-nui</title>
      </head>
      <body>
        <div id="app"></div>
        <script src="./dist/jed-nui.js"></script>
      </body>
    </html>

更多详细组件制作请参考饿了么UI

[饿了么UI开源文档][UI]

[npm]: https://www.npmjs.com/
[vue]: https://cn.vuejs.org/v2/guide/plugins.html
[20190531110250241.png]: /images/20220125/742a166cd793402da47697f88e91c326.png
[jedUI]: /images/20220125/40280d8084b6469ab2a390aa5f049c41.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwMzE5MA_size_16_color_FFFFFF_t_70]: /images/20220125/7c680afbf1794de9a2cf7e42cb748314.png
[UI]: https://github.com/ElemeFE/element