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

  

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

最新文章

  1. 多线程异步导出excel
  2. 【WP开发】JSON数据的读与写
  3. AC日记——求10000以内n的阶乘 openjudge 1.6 14
  4. struts2.0整合json
  5. LyX转Word
  6. 使用localstorage及js模版引擎 开发 m站设想
  7. 使用 getNextException() 来检索已经过批处理的特定元素的异常。 ERRORCODE=-4228, SQLSTATE=null
  8. iOS 倒计时
  9. centos6.5 openvpn安装配置
  10. Redis .Net 基本类型使用之南
  11. 源码实现 --&gt; itoa函数实现
  12. [面试]synchronized
  13. java单例设计模式总结及举例
  14. MVC 动态菜单
  15. 如何通过RNA-Seq了解转录本的结构
  16. mongod 安装,增删改查
  17. Jquery取得iframe中元素的几种方法(转载)
  18. nfs只能挂载为nobody的解决方法
  19. Java精选笔记_其他IO流(ObjectInputStream、DataInputStream、PrintStream、标准输入输出流)
  20. 经典DP 洛谷p1880 石子合并

热门文章

  1. 多线程执行sql报错处理
  2. GBDT(梯度提升树) 原理小结
  3. C语言实验1—— C中的指针和结构体
  4. 项目读取数据,一直出现 Closing connections idle longer than 30 SECONDS,卡死现象
  5. HDU - 4352 - XHXJ&#39;s LIS(数位DP)
  6. Kafka ISR and AR HW 、 LEO
  7. Kubernetes 学习20调度器,预选策略及优选函数
  8. 【转】Linux开机启动管理---systemd使用
  9. eclipse 创建c/c++ 工程
  10. Percona,MariaDB,MySQL衍生版如何取舍