vue-cli4.0 基于 antd-design-vue 二次封装发布到 npm 仓库

1. 安装 cli

npm install -g @vue/cli

vue create winyh-ui

2.安装 antd-design-vue

cnpm i ant-design-vue --save

3.配置按需加载

cnpm i babel-plugin-import --save-dev

修改根目录的 babel.config.js， 配置 babel-plugin-import
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      "import",
      { libraryName: "ant-design-vue", libraryDirectory: "es", style: true }
    ]
  ]
}

4.配置less

运行报错：

Module not found: Error: Can't resolve 'less-loader'

解决办法：

cnpm i less less-loader --save-dev

根目录创建 vue.config.js 文件，配置如下
module.exports = {
    css: {
        loaderOptions: {
            less: {
                javascriptEnabled: true
            }
        }
    }
}

5.项目中引用

src/main.js 文件中
  import Vue from 'vue'
  import { Button, Select } from 'ant-design-vue';
  import App from './App'

  Vue.component(Button.name, Button)
  Vue.component(Select.name, Select)

/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

  Vue.config.productionTip = false

  new Vue({
    render: h => h(App)
  }).$mount("#app");


组件中就可以使用：
<a-button type="primary">winyh</a-button>

6.启动项目

npm run serve

预览效果

7.封装组件

新建 packages 目录，packages 目录下新建 index.js 文件对外集中抛出配置。

每个组件在 packages 目录下以单个目录的形式存在，例如 row 组件结构。

row/src/main.vue 组件封装 (组件封装中必须设置 name 选项，为组件的对外唯一标签)

row/index.js 对外抛出当前封装的组件

// button/src/main.vue

<template>
    <div>
        <a-button>winyh<a-button>
    </div>
</template>

<script>
export default {
    name:"PButton",
}
</script>

<style lang="less">
    
</style>

// row/index.js

import PButton from './src/main.vue'

// 为组件提供 install 方法
PButton.install = function (Vue) {
    Vue.component(PButton.name, Row)
}

// 导出组件
export default PButton

// packages/index.js

import PRow from './row'

// 组件集合，用于遍历
const components = [
    PRow
]

// 定义 install 方法
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,// 导出的对象必须具备一个 install 方法
    ...components, // 组件列表    
}

　　组件封装完毕

8.使用

import Vue from 'vue'
import { Button } from 'ant-design-vue'
import App from './App.vue'

// 导入组件库
import PButton from '../packages'
// 使用组件库
Vue.use(PButton)

[Button].forEach(item => 
  Vue.use(item)
);

/*
* 也可以这样使用
* Vue.component(Button.name, Button)
* Vue.component(Select.name, Select)
*/

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

在上一步用使用 Vue.use() 全局注册后，即可在任意页面直接使用了，而不需另外引入

<template>
  <div id="app">
    <PButton>winyh</PButton>
  </div>
</template>

<script>
export default {
  name: 'app',
}
</script>

<style>
</style>

9.打包

vue-cli 库打包命令官方介绍

vue-cli-service build --target lib --name myLib [entry]

这个入口可以是一个 .js 或一个 .vue 文件。如果没有指定入口，则会使用 src/App.vue，改为  packages/index.js

配置package.json

name: 包名，该名字是唯一的。可在 npm 官网搜索名字，如果存在则需换个名字。
version: 版本号，每次发布至 npm 需要修改版本号，不能和历史版本号相同。
description: 描述。
main: "lib/vplgui.common.js", 入口文件，应指向编译后的包文件(路径要和上面构建出来的目录和文件名对应上,如果不配置，我们在其他项目中就不用import XX from '包名'来引用了)
keyword：关键字，以空格分离希望用户最终搜索的词。（"keywords": [ "vue", "maucash", "code", "maucash code" ]）
author：作者
files : 指定打包后包中存在的文件夹（"files": [ "dist", "src" ]）
private：是否私有，需要修改为 false 才能发布到 npm
homepage : "https://github.com/winyh/XXX", 项目主页
repository: 指定代码所在的仓库地址"repository": { "type": "git", "url": "git@github.com:winyh/vplgui.git" }
license：开源

添加 .npmignore

// 语法跟 .gitignore 一样

.DS_Store
node_modules/
packages/
public/
vue.config.js
babel.config.js

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode

添加 lib 脚本

{
"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
  + "lib": "vue-cli-service build --target lib --name vplgui --dest lib packages/index.js"
  },    
}

--target: 构建目标，默认为应用模式。这里修改为 lib 启用库模式。
--dest : 输出目录，默认 dist。这里我们改成 lib。
[entry]: 最后一个参数为入口文件，默认为 src/App.vue。这里我们指定编译 packages/ 组件库目录。
--name ：组件库名称。

执行 npm run lib 打包编译。（会生成 lib 文件夹）

10.NPM中文文档

https://www.npmjs.cn/

10.发布　　

npm login

npm adduser

npm publish

注意事项：每次发布时都需要递进更新版本号！