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

• 由头
• ant的部分加载
• 二次封装发布到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
}
}
}
}

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

1. 开发组件 [ol] 之前已经创建了一个 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已经配置过
  import { Pagination, Row, Col } from 'ant-design-vue';
  
  //保存 便于遍历
  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)
  }
  
  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'

   
   

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

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?