vue组件库搭建

1,334 阅读2分钟

1. 创建一个vue项目工程:vue create xxx(vue2);

2. 在新建项目工程根目录下(与public同级目录)新建packages目录,用于存放所有封装的组件;

3. 将根目录下的src目录名修改为examples,用于进行组件的测试;

1652249365(1).png 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目录,存放字体图标文件;

image.png

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"。

image.png 9. 运行npm run lib命令,在根目录下生成打包后的dist文件目录(有生成对应规范下的文件:common.js,umd.js)。

image.png

10. 发布npm仓库:根目录下的packages.json文件中的private属性字段必须改为false(npm不允许私有包上传),否则发布不上去,添加main属性字段(包的入口文件),赋值为”dist/f-ui.umd.min.js”(用户默认导入dist/f-ui.umd.min.js文件),author字段可以不用添加。

image.png

11. 在根目录下新建.npmignore文件,该文件用于配置忽略掉(不被)npm上传的文件(不被npm管理)。

image.png

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是一个包管理器。