开发vue组件库
1、创建项目
基于 vue-cli 脚手架，创建一套vue代码。
vue create project-name
创建完成，且能运行后，删除多余的文件
- 清空
components文件夹 views文件夹下，只留下Home.vue文件，这个文件，用来测试我们开发好的组件，将Home.vue文件内容修改为：
<template>
<div class="home">
<h2>UI 组件库示例</h2>
</div>
</template>
<script>
export default {
name: "Home",
components: {}
};
</script>
- 删除多余的router，将
src/router/index.js文件修改为：
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
}
]
const router = new VueRouter({
routes
})
export default router
- 删除其他位置引入的 脚手架默认
.vue文件（例如main.js文件中）
2、配置环境
2.1 注册npm账号
访问官方地址，然后注册一个npm账号
2.2 本地登录npm账号
在项目的根目录下，运行：
npm login //本地登录npm,运行命令后输入用户名，和密码
3、创建组件
在components 文件夹下，开发我们的UI组件，以如下 demo 为例
<template>
<div class="upload">
<input type="file">
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
.upload{
box-sizing:border-box;
border:1px solid rgb(185, 182, 182);
}
</style>
创建完成后，在project/src/views/Home.vue 文件中进行引用，进行测试
4、发布为NPM 包
测试完成我们开发的组件，假设已经达到能发布的标准，然后将整个项目，改造为一个能导入的npm包进行发布。
4.1 package.json 文件
{
"name": "wzk-ui", // 组件库项目名称
"version": "0.0.4", // 版本号，每次提交都需要进行更改，否则报错
"private": false, // 是否私有化
"main": "./src/components/index.js", // main文件地址
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"build-lib":"把src/components下的文件，拷贝进lib下"
},
"files": [
"dist/*",
"src/*",
"public/*",
"*.json",
"*.js"
],
"dependencies": {
"core-js": "^3.6.4",
"vue": "^2.6.11",
"vue-router": "^3.1.5",
"vuex": "^3.1.2"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^4.2.0",
"@vue/cli-plugin-router": "^4.2.0",
"@vue/cli-plugin-vuex": "^4.2.0",
"@vue/cli-service": "^4.2.0",
"vue-template-compiler": "^2.6.11"
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
4.2 ./src/components/index.js
这个文件，是项目被导入时的入口js文件。功能是负责创建一个vue插件。
./src/components/index.js :
// 将制作好的组件，都导入进来，统一管理
import fileUpload from "./FileUpload.vue";
// 所有组件
const Components = {
fileUpload,
};
// 添加 install 方法，到模块被当做vue插件使用时，会执行
function install(vue, opts = {}) {
// install方法，如果作为插件，被vue.use，则会执行
Object.keys(Components).forEach(name => {
Vue.component(name, Components[name]);
});
}
// 将模块进行导出，由于需要使用结构，所以不设置为默认导出
export { ...Components, install };
4.3 发布
npm包已经制作完成，现在发布到自己的账户上：
npm publish
拓展资料
删除自己发布的npm包：npm unpublish 包名@版本号，或者 npm unpublish 包名 --force
发布完成后，在官方地址 查看下是否上传成功
5、测试
在其他的项目中或者新建一个项目（不能再当前项目），安装刚刚上传的npm包：
npm install 包名 --save
然后在 main.js 文件导入所有组件
// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 导入我们上传的UI库，这里 wzk-ui 是我的ui 库
import wzk from "wzk-ui"
Vue.use(wzk)
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
或者只想使用某一个组件的话：
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 只引入一个组件
import {fileUpload} from "wzk-ui"
Vue.component('file-upload',fileUpload)
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
6、总结
这个项目只是演示了如何制作一个组件库，后面还需要进行打包、样式导入等操作。这里涉及到的问题：
- 如何制作一个vue插件
- 组件库实现单个组件引入