创建一个组件项目

新建一个vue项目作为组件项目

vue create 项目名称

这里我们就用默认的vue2.0项目创建就行。

创建完成如果没有package-lock.json文件就用npm的方式重新下载下node包

调整项目目录

-- examples // 原 src 目录，改成 examples 用作示例展示
-- packages // 新增 packages 用于编写存放组件

vue.config.js中添加配置

module.exports = {
  // 修改 src 为 examples
  pages: {
    index: {
      entry: "examples/main.js",
      template: "public/index.html",
      filename: "index.html"
    }
  }
}

如果不去做这一步的话我们的组件项目就会启动不了。

packages中书写第一个组件

//packages /table/index.js  添加以下代码
// 导入组件，组件必须声明 name
import formTable from "./index.vue";
// 为组件提供 install 安装方法，供按需引入
formTable.install = function (Vue) {
  Vue.component(formTable.name, formTable);
};
// 默认导出组件
export default formTable;

packages /table/index.vue 添加以下代码

<template>
  <div>你好你好</div>
</template>
<script>
export default {
  name:'formTable' //这里的name是必须要填写的  否则会报错
}
</script>

导出所有组件

packages下新建 index.js 并添加

// 导入组件
import formTable from './table/index';

// 存储组件列表
const components = [formTable];
// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
const install = function (Vue) {
	// 遍历注册全局组件
	components.forEach((component) => {
		Vue.component(component.name, component);
	});
};

// 判断是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
	install(window.Vue);
}

export default {
	install,// 导出的对象必须具有 install，才能被 Vue.use() 方法安装
	// 以下是具体的组件列表
	formTable,
};

组件项目引入查看效果

//formDemo 名称不做要求 也不是要与组件名称统一
import formDemo from '../packages/index'; 
Vue.use(formDemo);

<form-table> </form-table> 

发布npm包准备

首先注册npm账户

更改配置文件

"name": "form-demoxy", //推送npm的包名
"version": "0.0.1",  //版本号
"private": false, ///是否私有
"keyword": "测试项目", //关键字  作为npm搜索使用
"description": "测试项目",  //描述
"author": "xycrest",  //作者
"main": "lib/form-demo.umd.min.js",

更改打包编译方式

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

打包编译

npm run lib

发布npm

登录npm

有两种方式

npm adduser //

npm login //

然后会让我们输入用户名、密码和邮箱，会发送到邮箱一份验证密码，输入验证密码。 登录成功后就可以发布了 这里我们需要改成npm源来进行操作

npm config set registry https://registry.npmjs.org/

发布

npm publish

发布时要注意npm官网有没有重名的包，成功会发送邮件提示我们

npm包的更新

我们在修改组件内容后，去进行发布时，注意版本号是不能相同的，所以我们要提升版本号，然后去发布。 我们在提升版本号时要注意因为 README.md 文件和 package.json 以及构建的文件需要在发布之前提交，不然就会报错。

npm version patch //会自动的给我们更改版本号

更新成功也会发送邮件