vue-cli3 ant-design-vue组件部分加载以及二次封装发布到npm

由头

最近做项目时遇到许多组件重用问题，恰巧公司前辈和我提起组件封装问题，就花时间研究了一下。
文章分为两部分:
1.ant的部分加载
2.自定义组件发布到npm
它俩好像不相关，但是我在写的时候因为经验不足，误以为有关系，因此把他们写到一起。

ant的部分加载

• 项目是基于 vue-cli3构建的，我用 vue create xxxx创建的项目 ，
  需要先 npm install ant-design-vue --save-dev安装组件库
  然后按照文档说明，修改babel.config.js内容：
  
  需要注意,文档要求安装babel-plugin-import插件，我当时就就给忘了，一直报错，
  另外：如果没有添加 less、less-loader插件的话，这里需要npm install一下，ant组件库需要。

• 使用
  在main.js中

  //main.js
  import Vue from 'vue'
  import {Pagination, Row, Col } from 'ant-design-vue';
  import App from './App.vue'
  
  Vue.component(Pagination.name, Pagination);
  Vue.component(Row.name, Row);
  Vue.component(Col.name, Col);
  
  Vue.config.productionTip = false
  new Vue({
    render: h => h(App),
  }).$mount('#app')	
  }
  

  这样 npm run serve 运行。(忐忑)
  果然报错了 图找不到了 错误就是

  Inline JavaScript is not enabled. Is it set in your options?
  

  网上找到解决办法 Vue-cli2.x的看这里
  根目录下创建vue.config.js文件，添加如下内容：

  	module.exports = {
      css: {
          loaderOptions: {
              less: {
                  javascriptEnabled: true
              }
          }
      }
  }
  

  npm run serve ！！！ OK!

二次封装发布到npm

部分加载搞完，下面就开始开发组件了。
仅仅做了一个很小的组件，带分页的列表。

1. 创建项目 vue create xxxx 目录如下：
   
2. 创建packages(随便)目录，用于存放组件源码文件，把src改为examples(名随便)当做示例：
   
3. 由于项目默认入口文件是 src/main.js，这样修改后就需要在vue.config.js中添加pages配置，现在vue.config.js成这样了：

	  module.exports = {
	    pages: {
	        index: {
	        		//页面入口
	            entry: 'examples/main.js',
					//模板来源
	            template: 'public/index.html',
					//输出文件名
	            filename: 'index.html'
	        }
	    },
	    css: {
	        loaderOptions: {
	            less: {
	                javascriptEnabled: true
	            }
	        }
	    }
	}

这里先运行下项目，如果不报错再进行组件的开发。

4. 开发组件
   1. 之前已经创建了一个 packages 目录，用来存放组件；
   2. 该目录下存放每个组件单独的开发目录，和一个 index.js 整合所有组件，并对外导出；
   3. 每个组件都应该归类于单独的目录下，包含其组件自身源码目录 src和 index.js 便于外部引用；
   4. 这里以 pageList组件为例，完整的 packages 目录结构如下：
      这里pageList.vue是具体组件代码，其中组件必须添加name属性，表示使用时的标签名
      

• packages/pageList/index.js用于导出单个组件

  import PageList from './src/pageList.vue';
  
  //为组件添加 install 方法，用于按需引入
  PageList.install = function (Vue) {
      Vue.component(PageList.name, PageList);
  }
  
  export default PageList;
  

• packages/index.js 文件，实现组件的全局注册（you will back!）

  //导入单个组件
  import PageList from './pageList/index';
  //按需导入ant 组件 babel已经配置过
  
  //这里修改一下 如果在这里注册第三方组件 项目中也会全局注册。
  //所以在某个组件中使用哪些就在单文件(.vue)里面导入,在components里注册：
  //类似 [Pagination.name]: Pagination
  
  //import { Pagination, Row, Col } from 'ant-design-vue';
  
  //保存 便于遍历 这里只放自定义的插件 (修改时间2019-8-23)
  const components = [
     PageList,
    //Pagination,
     //Row,
     //Col
  ];
  
  const install = function (Vue) {
     if (install.installed) return;
     install.installed = true;
  
     components.map(component => {
         Vue.component(component.name, component);
     })
  }
  
  if (typeof window !== 'undefined' && window.Vue) {
     install(window.Vue)
  }
  
  // 这里可以用es6的解构语法导入组件 大概就是这个意思 毕竟没有用插件
  export {PageList}
  export default {
     install,
     //...components //这个经过测试 似乎没啥用
  }
  

  到这里组件就开发完了， 先试一下可不可以用，main.js里：

  import tPageList from '../packages/index'	
  Vue.use(tPageList)
  

  直接使用

  <t-page-list :dataSource="[1,2,3]">t-page-list>
  

  运行不报错 o98k！

  打包

  vue-cli 3.x 提供了一个库文件打包命令

  主要需要四个参数：
  .1. target: 默认为构建应用，改为 lib 即可启用构建库模式
  .2. name: 输出文件名
  .3. dest: 输出目录，默认为 dist，这里我们改为 lib
  .4. entry: 入口文件路径，默认为 src/App.vue，这里改为 packages/index.js

  打包命令:
  在package.json的scripts里添加新命令，这里叫 lib

  "scripts": {
  ...
  "lib": "vue-cli-service build --target lib --name t-pagelist --dest lib packages/index.js"
  },
  

  然后 npm run lib编译项目，之后会在lib目录下看到编译好的文件
  

  发布

  • 每个项目都可以做为一个模块，package.json就是来描述模块信息的(就像maven管理包，模块化，微~，扯远了…).

  name: 包名，该名不能和已有的名称冲突；
  version: 版本号，不能和历史版本号相同；
  description: 简介；
  main: 入口文件，应指向编译后的包文件；
  keyword：关键字，以空格分割；
  author：作者；
  private：是否私有，需要修改为 false 才能发布到 npm；
  license：开源协议。

  • 我的如下：

  	"name": "t-pagelist",
  	"version": "0.1.0",
  	"description": "relax page list",
  	"main": "lib/t-pagelist.umd.min.js",
  	"license": "MIT",
  	"author": "ztj",
  	"private": false,
  

  • 创建 .npmignore 文件，设置忽略文件，和.gitignore语法一样：

  .DS_Store
  node_modules/
  examples/
  packages/
  public/
  vue.config.js
  babel.config.js
  *.map
  *.html
  
  # local env files
  .env.local
  .env.*.local
  
  # Log files
  npm-debug.log*
  yarn-debug.log*
  yarn-error.log*
  
  # Editor directories and files
  .idea
  .vscode
  *.suo
  *.ntvs*
  *.njsproj
  *.sln
  *.sw*
  

  • npm发布需要账号 没有可以去npm官网注册一个，记得激活一下，否则不能发布。
  • npm login 登录
  • 没啥问题就：
  • npm publish
  • 如果报错就检查配置，入口路径等；
    以上是正常流程
    但是我用到了ant 还是使用部分组件，疑问
    不要紧，看这里

测试

1. 创建新项目 vue create newxxx;
   import tPageList from 't-pagelist'
   
2. npm install t-pagelist --save-dev;
3. (激动)npm run serve;
4. wtf? 样式呢？--|--
5. 最后发现忘记导入样式了
   完整main.js

   import Vue from 'vue'
   import tPageList from 't-pagelist'
   import 't-pagelist/lib/t-pagelist.css'//不要忘记
   import App from './App.vue'
   
   Vue.use(tPageList)
   Vue.config.productionTip = false
   
   new Vue({
     render: h => h(App),
   }).$mount('#app')
   

   记住使用时添加css样式（我就忘记添加，还以为不能按需加载css）

完全 o98ko!

参考文档：
vue-cli 3.x 开发插件并发布到 npm
使用Vue CLI 3将基于element-ui二次封装的组件发布到npm
[VUE-CLI3] 使用iView自定义主题运行项目时报错 Inline JavaScript is not enabled. Is it set in your options?