基于elementUI封装了基础表单组件

开头先BB两句

elementUI的表单组件，自带表单验证规则。虽然已经很方便了，但是我还是想封装一下。

通常用到的表单类型，主要包括：Radio 单选框，输入框，下拉框。

我封装了一个基础组件。把这些表单数据，放在一个json对象里面，传入封装好的基础组件。然后循环遍历，根据选项类型，展示输入框还是下拉框，等等。

项目中需要用到时，只需要安装，引入，配置json文件即可。

封装好的组件，放在项目中的components文件夹中，作为公共组件引入使用。

跟住，我又将整个基础表单的组件，发布到了npm上面。

封装组件并发布到npm

那么，如何将封装好的组件，发布到npm上呢？

第一步，新建一个vue项目，使用简洁的webapck配置模板，就可以了。

vue init webpack-simple my-project 

第二步，在src文件夹下，新建一个components文件夹，放入封装好的BasicForm组件。

第三步，在根目录下新建一个index.js文件。

Vue的插件必须提供一个公开方法 install，该方法会在你使用该插件，也就是 Vue.use(yourPlugin)时被调用。这样也就给 Vue全局注入了你的所有的组件。

import basicForm from './src/components/basicForm/index.vue';
//注册组件
basicForm.install = Vue => Vue.component(basicForm.name, basicForm);
export default basicForm; 

第四步，修改配置文件 webpack.config.js entry和output属性

entry: process.env.NODE_ENV == 'development' ? './src/main.js' : './index.js',
output: {path: path.resolve(__dirname, './dist'),publicPath: '/dist/',filename: 'basicForm.js',library: 'basicForm', // 指定的就是你使用require时的模块名libraryTarget: 'umd', // 指定输出格式umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
}, 

第五步，修改 package.json 文件

//name就是发布后的包名
"name": "@orzr3/basic-form",
"private": false,
"main": "dist/basicForm.js", 

第六步，提交发布

首先，要注册一个npm账号，官网链接在此：

传送门

www.npmjs.com/

PS

如果将镜像设置成了淘宝镜像，先设置回来，否则会报错

npm config set regis