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

1. 安装 cli

1	npm install -g @vue/cli

vue create winyh-ui

　　

2.安装 antd-design-vue

1	cnpm i ant-design-vue --save

　　

3.配置按需加载

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

运行报错：   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.项目中引用

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

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");<br><br><br>组件中就可以使用：<br><a-button type="primary">winyh</a-button>

　　

6.启动项目

1	npm run serve

　　

预览效果

 

7.封装组件

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

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

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

// button/src/main.vue   <template>     <div>         <a-button>winyh<a-button>     </div> </template>   <script> export default {     name:"PButton", } </script>   <style lang="less">       </style>

　　

1 2 3 4 5 6 7 8 9 10 11

// row/index.js   import PButton from './src/main.vue'   // 为组件提供 install 方法 PButton.install = function (Vue) {     Vue.component(PButton.name, Row) }   // 导出组件 export default PButton

　　

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

// 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.使用

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

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() 全局注册后，即可在任意页面直接使用了，而不需另外引入

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<template>   <div id="app">     <PButton>winyh</PButton>   </div> </template>   <script> export default {   name: 'app', } </script>   <style> </style>

　　

9.打包

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

1 2 3

vue-cli-service build --target lib --name myLib [entry]   这个入口可以是一个 .js 或一个 .vue 文件。如果没有指定入口，则会使用 src/App.vue，改为  packages/index.js<br><br>

　　

配置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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

// 语法跟 .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 脚本

1 2 3 4 5 6 7 8

{ "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.发布　　

1	npm login<br><br>npm adduser<br><br>npm publish

　　

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