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"

     // @ is an alias to /src import HelloWorld from '@/components/HelloWorld.vue' import test from "vuecomponentdi" export default {  name: 'Home',  components: {  HelloWorld  },  created(){  test()  } } " _ue_custom_node_="true">

控制台打印>本地调试

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"传入内部组件

   export default {  name:"di-button",  props:{  type:String  } } " _ue_custom_node_="true">.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; } " _ue_custom_node_="true">

• 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使用

  按钮 // @ is an alias to /src import Vue from 'vue' import {diButton} from "vuecomponentdi" Vue.use(diButton) export default {  name: 'Home' } " _ue_custom_node_="true">