标签：datePicker vue js Vue 开发 组件 config
市面上目前已有各种各样的UI组件库，比如 Element 和 iView，他们的强大毋庸置疑。但是我们面临的情况是需求越来越复杂，当它们不能再满足我们需求的时候，这个时候就有必要开发一套属于自己团队的组件库了。
为何要进行组件库开发
如果你所在的公司对于页面的样式没有什么要求，那么你只要随便拿一个组件库来用就行了，比如element、iView等等，不用再重复造轮子了；
如果你目前只有个人用一个组件，或者是只对个别组件有要求，那么只要在你的工程里面开发一个.vue单文件组件就可以了；如果你的团队想要一个更加快速的开发方式，希望有一套一类应用的标准，并且对组件的样式有较高的要求，那么你就需要开发一个组件库了。
正确的学习方式
我觉得我写完这篇文章以后，大家看完可能只是能按部就班地开发一个组件库而已，而且具体的记忆和理解不是很深，所以我觉得正确的方式应该是站在巨人的肩膀上，比如去查看element组件库的源码，去了解他的文件组织方式，文档是如何管理的，主题文件是如何管理的，以及一些复杂组件是如何实现的。接下来，我们就进入正题。
步骤
我们来理一下整个步骤：
创建项目
调整项目结构
编写组件
使用vue-cli-service库模式打包编译
发布到npm
开发步骤
第一步创建一个项目
调整目录
将项目的目录调整到以下形式，该目录方式像是成了业界不成名的规定，element和iview都是以这样的方式组织的。我觉得挺好的，所以不做修改了。
目录调整以后，我们需要修改相应的webpack配置，使原来的src目录指向修改后的examples目录，修改vue.config.js文件：
|
const path = require('path') function resolve (dir) { return path.join(__dirname, '..', dir) }
module.exports = { // 将entry指向examples pages: { index: { entry: 'examples/main.js', template: 'public/index.html', filename: 'index.html' } }, // 为packages目录添加babel-loader处理 chainWebpack: config => { config.module .rule('js') .include .add(resolve('packages')) .end() .use('babel') .loader('babel-loader') .tap(options => { return options }) } } |
编写组件
packages目录下面的文件组织情况如下：
其中：
|-- datePicker // 新编写的组件，以datepicker为例
|-- theme-default // 主题文件
主题文件较为特殊，他作为单独的一个包进行发布引入，方便进行主题发布，后面再进行介绍。下面对datePicker进行介绍：
|
<template> <div>这是一个datePicker组件</div> </template>
<script> export default { name: 'datePicker' } </script> |
datePicker/index.js
|
/* eslint-disable */
import datePicker from './src/datePicker.vue';
datePicker.install = function (Vue) { Vue.component(datePicker.name, datePicker) }
export default datePicker |
批量注册组件
Package/index.js
|
/* eslint-disable */ import datePicker from './datePicker';
const components = [ datePicker ]
const install = function (Vue) {
if (install.installed) return
components.map(component => Vue.component(component.name, component)) }
if (typeof window !== 'undefined' && window.Vue) { install(window.Vue) }
export default {
install, datePicker } |
本地测试组件
我们的组件以及编写完成，第一步先在本地进行测试：
examples/main.js
|
/* eslint-disable */ import Vue from 'vue'; import App from './App.vue'; import datePicker from './../packages/index'
Vue.use(datePicker)
Vue.config.productionTip = false;
new Vue({ render: h => h(App), }).$mount('#app');
|
如何在浏览器中就可以看到我们的组件运行成功了，下一步就是要将我们的代码打包成npm库了，那么需要通过vue-cli3中vue-cli-service的库模式进行打包。
package.json
执行 npm run build-lib
修改package.json
主要要修改的是：
{
"private": false, // 是否私有，必须指定为false才能发布到npm
"main": "lib/fklhenu.umd.min.js", // 编译后包的入口文件
}
根目录添加.npmignore文件
发布到npm下，只需要lib目录、package.json 和readme.md文件,所以需要忽略掉其他的目录
.npmignore
examples/packages/public/vue.config.jspostcss.config.jsbabel.config.js*.map登录npm
标签：datePicker,vue,js,Vue,开发,组件,config 来源： https://www.cnblogs.com/ninghu996926/p/11696348.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。