1. 创建一个vue项目工程：vue create xxx(vue2);
2. 在新建项目工程根目录下(与public同级目录)新建packages目录，用于存放所有封装的组件；
3. 将根目录下的src目录名修改为examples，用于进行组件的测试；
4. 修改vue.config.js文件配置：
const { defineConfig } = require('@vue/cli-service');const path = require('path');module.exports = defineConfig({ transpileDependencies: true, pages: { index: { entry: 'examples/main.js', //项目入口文件(默认是src/main.js,修改为examples/main.js); template: 'public/index.html', filename: 'index.html' } }, /** * 拓展webpack配置,使packages加入编译; */ chainWebpack: config => { //对所有packages中的js做babel处理; config.module .rule('js') .include.add(path.resolve(__dirname, 'packages')).end() .use('babel') .loader('babel-loader') .tap(options => { // 修改其他的选项; return options; }) }}) 5. 在packages目录下新建index.js文件，作为整个包的入口，在该文件中导入封装的组件；
6. 在packages目录下新建fonts目录，存放字体图标文件；
import Button from './button';import Alert from './alert';import './fonts/font.scss';/** * 整个包的入口; *//** * 存储组件列表; */const components = [ Button, Alert,];/** * 定义install方法,接收Vue作为参数。如果使用use注册插件,则所有的组件都将被注册; */const install = function(Vue) { components.forEach((item) => { //全局注册所有组件; Vue.component(item.name, item); });}/** * 判断是否是直接引入文件,如果是,就不用调用Vue.use(); */if(typeof window !== 'undefined' && window.Vue) { install(window.Vue);}export default { install,} 7. 在examples目录下的main.js文件中安装封装的组件库;
import Vue from 'vue';import App from './App.vue';import fUi from '../packages';Vue.config.productionTip = false;Vue.use(fUi);new Vue({ render: h => h(App)}).$mount('#app') 8. 打包组件库：在根目录下的package.json文件中scripts选项对象中添加打包命令，"lib": "vue-cli-service build --target lib packages/index.js"。
9. 运行npm run lib命令，在根目录下生成打包后的dist文件目录(有生成对应规范下的文件：common.js，umd.js)。
10. 发布npm仓库：根目录下的packages.json文件中的private属性字段必须改为false(npm不允许私有包上传)，否则发布不上去，添加main属性字段(包的入口文件)，赋值为”dist/f-ui.umd.min.js”(用户默认导入dist/f-ui.umd.min.js文件)，author字段可以不用添加。
11. 在根目录下新建.npmignore文件，该文件用于配置忽略掉(不被)npm上传的文件(不被npm管理)。
12. npm上传：
全局安装nrm(npm镜像源管理工具，有时国外资源太慢，使用这个可以快速地在npm源间切换)，npm install -g nrm，执行nrm ls命令查看可选的源，必选保证当前的源是npm源，如果是其他源，如cnpm淘宝源，必须改到npm源，否则不能上传到npm;
npm登录，在根目录下执行npm login命令，输入账号密码邮箱，进行登录；
npm发布，在根目录下执行npm publish。
13. 安装组件库：npm install --save-dev xxx。
备注： 1. npm是一个包管理器, node.js内置了npm; 2. cnpm淘宝镜像就是把npm的地址映射到淘宝镜像上面去; 3. yarn是一个包管理器。