1、新建文件夹在终端打开执行 npm init -y
生成package.json如下,注意如果要发布到npm,name不能有下划线,大写字母等
{ "name": "vuecomponentdi", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" }
2、建立目录结构
目录结构如下
-- vueComponentDi -- packages -- button -- index.js -- index.vue -- toast -- index.js -- index.vue -- index.js -- package.json
3、本地调试
- vueComponentDi/index.js
export default function(){ console.log('本地调试') }
- 新建一个vue项目
vue create testvue
在testvue下的package.json下的测试依赖devDependencies添加vueComponentDi/index.js绝对地址
"devDependencies": { ... "vuecomponentdi": "F:/vueComponent@Di/vueComponentDi",//根据自己实际项目地址填写 ... }
- 执行npm link
在testvue执行npm link将vuecomponentdi软链接到node_modules中
- vuecomponentdi安装Eslint
由于testvue引入组件会进行Eslint检测,不安装会报错(testvue关闭Eslint可省略这一步)
安装方法:
npm install eslint@6.7.2 --save-dev ./node_modules/.bin/eslint --init • 在testvue使用vuecomponentdi
import test from "vuecomponentdi"
<template> <div class="home"> <img alt="Vue logo" src="../assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> </div> </template> <script> // @ is an alias to /src import HelloWorld from '@/components/HelloWorld.vue' import test from "vuecomponentdi" export default { name: 'Home', components: { HelloWorld }, created(){ test() } } </script>
控制台打印>本地调试
4、开发一个button组件
- button模块:进入vueComponentDi/packages/button/index.vue type只支持传入primary属性.
v-on = "listemers"表示包含了父作用域中的(不含.native修饰符的)v−on事件监听器,它可以通过v−on="listemers"表示包含了父作用域中的(不含.native修饰符的) v-on事件监听器,它可以通过v-on="listemers"表示包含了父作用域中的(不含.native修饰符的)v−on事件监听器,它可以通过v−on="listerners"传入内部组件
<template> <div> <button class="di-button" v-on="$listeners" :class="[type?`di-button--${type}`:'']"><slot></slot></button> </div> </template> <script> export default { name:"di-button", props:{ type:String } } </script> <style> .di-button{ display: inline-block; line-height: 1; white-space: nowrap; cursor: pointer; background: #fff; border: 1px solid #dcdfe6; color: #606266; -webkit-appearance: none; text-align: center; box-sizing: border-box; outline: none; margin: 0; transition: .1s; font-weight: 500; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; padding: 12px 20px; font-size: 14px; border-radius: 4px; } .di-button:focus, .di-button:hover { color: #409eff; border-color: #c6e2ff; background-color: #ecf5ff; } .di-button:active { color: #3a8ee6; border-color: #3a8ee6; outline: none; } .di-button--primary { color: #fff; background-color: #409eff; border-color: #409eff; } .di-button--primary:focus, .di-button--primary:hover { background: #66b1ff; border-color: #66b1ff; color: #fff; } .di-button--primary.is-active, .di-button--primary:active { background: #3a8ee6; border-color: #3a8ee6; color: #fff; } </style>
- button模块导出:进入vueComponentDi/packages/button/index.js
如果导出一个带有install函数的对象,则在Vue2中可以直接使用Vue.use(xx)调用此函数,既执行 Vue.component(name,option)创建了一个组件
import button from "./index.vue" button.install=(Vue)=>{ Vue.component(button.name,button) } export default button
- 聚合导出button:进入vueComponentDi/index.js
因为开发的组件不止一个,所以需要在入口文件统一导出
import diButton from "./packages/button" export { diButton }
- 在testvue使用
<template> <div class="home"> <di-button type="primary">按钮</di-button> </div> </template> <script> // @ is an alias to /src import Vue from 'vue' import {diButton} from "vuecomponentdi" Vue.use(diButton) export default { name: 'Home' } </script>
