vue创建自己的组件UI库发布到npm

已注销
206 阅读4分钟

开始

—— 使用vue 命令创建项目

vue init webpack-simple vhai-ui //创建vhai-ui 项目
cd vhai-ui
npm install //安装依赖
npm run dev //运行项目
npm run build  //打包组件

等搭建完之后，我们需要需改几个配置，来方便我们以后的发布组件

1、首先修改webpack.config.js文件（此处需要注意npm run build 和 npm run dev时需要修改output）

const NODE_ENV = process.env.NODE_ENV 
module.exports = {
entry: NODE_ENV == 'development' ? './src/main.js' : './src/packages/index.js',
  
    //打包组时注释此处。
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  
  // 我们打包组件时，需要释放这块的代码，用来打包组件
  // output: {
  //   // 修改打包出口，在最外级目录打包出一个 index.js 文件，我们 import 默认会指向这个文件
  //   path: path.resolve(__dirname, './dist'),
  //   publicPath: '/dist/',
  //   filename: 'vhai-ui.js',
  //   library: 'vhai-ui', // 指定的就是你使用require时的模块名
  //   libraryTarget: 'umd', // libraryTarget会生成不同umd的代码,可以只是commonjs标准的，也可以是指amd标准的，也可以只是通过script标签引入的
  //   umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
  // },
}

2、修改package.json 让我们能够后续发布到npm上

"name": "vhai-ui", //你将发布到npm上的组件名称
 "description": "A Vue.js vhai-ui",
 "version": "1.0.0", //发布版本号
 "author": "starmbest <starmbest@qq.com>",
 "license": "MIT",
 "private": false, //这里必须是false
 "main": "dist/vhai-ui.js", //你打包好的组件文件目录

快速上手

———— 下面我们可以根据情况开发组件了(我是这样区分文件的)

├── src/                           // 源码目录
│   ├── packages/                  // 组件目录
│   │   ├── copyright/                       // 组件（以copyright为例）
|       |           |——index.vue             // 组件代码
│   │   ├── index.js               // 挂载插件
|       |       |——views                                     // demo目录
│   ├── App.vue                    // 页面入口
│   ├── main.js                    // 程序入口
├── index.html                     // 入口html文件

1、组件挂载文件：packages/index.js

通过此文件我们可以挂载组件，以便我们后期项目可以通过组件名调用组件库中的组件

 
//底部版权
import copyright from './copyright/index'
const components = [
  copyright
]
const install = function(Vue, opts = {}) {
  components.forEach(component => {
    //component.name 是组件库中定义的name值，所以我们开发组件时一定要认真定义组件中的name名称
    Vue.component(component.name, component);
  });
};
/* istanbul ignore if */
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}
export default {
  install,
  copyright
}

2、引入组件库 ：main.js

import Vue from 'vue'
import App from './App.vue'
import VhaiUI from './packages/index'
Vue.use(VhaiUI)
new Vue({
  el: '#app',
  render: h => h(App)
})

好了，到这里我们的组件库就已经搭建完成了，需要更多的组件，根据自己情况创建目录在packages/index.js 中继续挂载。继续开发就可以了

发布到NPM

我们组件已经制作完成，我们这时想要发布到npm，应该怎么操作，

1、释放出我们编辑好的 webpack.config.js 文件中的打包组件代码

const NODE_ENV = process.env.NODE_ENV 
module.exports = {
entry: NODE_ENV == 'development' ? './src/main.js' : './src/packages/index.js',
  
    //打包组时注释此处。
  //output: {
  //  path: path.resolve(__dirname, './dist'),
  //  publicPath: '/dist/',
  //  filename: 'build.js'
  // },
  
  // 我们打包组件时，需要释放这块的代码，用来打包组件
   output: {
     // 修改打包出口，在最外级目录打包出一个 index.js 文件，我们 import 默认会指向这个文件
     path: path.resolve(__dirname, './dist'),
     publicPath: '/dist/',
     filename: 'vhai-ui.js',
     library: 'vhai-ui', // 指定的就是你使用require时的模块名
     libraryTarget: 'umd', // libraryTarget会生成不同umd的代码,可以只是commonjs标准的，也可以是指amd标准的，也可以只是通过script标签引入的
     umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
  },
}

2、执行npm run build

执行完成就能看到dist文件，说明我们组件js文件已经打包好了。可以直接复制这个js文件放到你想要的项目中，使用你开发的组件

├── dist/                            // 源码目录
│   ├──vhai-ui.js                    // 组件js
│   ├──vhai-ui.js.map

3、发布到npm（如果没有npm账号，先到官网注册账号 www.npmjs.com/）

npm login //登录
    Username:输入你注册的npm账号名
    Password:你的npm账号密码
    Email:你的npm绑定的邮箱
npm publish // 发布

这里说明你已经发布成功

npm notice unpacked size: 69.6 kB
npm notice shasum:        a8fa952416bfe3ad590015009f95fff606759efc
npm notice integrity:     sha512-o6PmF5SE/+3r3[...]YwhPhWYS/X6JA==
npm notice total files:   17
npm notice
+ vhai-ui@1.0.0

如果你想先不发布，想删除npm的包的话，可以执行 npm unpublist 你的包名 --force

项目引入发布的npm包

npm i vhai-ui -S //安装

//项目引入
import VhaiUI from 'vhai-ui'
Vue.use(VhaiUI)

这样我们就可以自己开发组件库，自己使用了。当然你不想开源自己的UI库，可以不发布到npm，纯属小白一枚，个人开发总结经验，如有错误之处，还请指正


avatar
文章
阅读
粉丝