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