定义组件
- 新建一个package文件夹与src同级用来存放各种组件夹
- package 文件夹中再新建个文件夹存放组件, 可多个, 如:input文件夹是一个输入框组件
- 在input.vue中写入所封装的组件内容,并在本地项目中能使用
- 测试项目能否使用组件
// 谁用是引用
import Input from "@/components/Input";
- 在input文件夹里的 index.js 中定义组件名称并暴露出去
// 导入定义的input组件
import Input from "./Input.vue";
Input.install = function(Vue) {
Vue.component(Input.name, Input);
};
export default Input;
- 把在package 中的 index.js作为文件入口, 把所要上传的组件暴露出去
// 存储组件列表
import wwinput from "./input";
const components = [wwinput];
// 定义 install 方法,接收 Vue 作为参数。如果使用 use 注册插件,则所有的组件都将被注册
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,才能被 Vue.use() 方法安装
install,
// 以下是具体的组件列表
wwinput
};
上传到npm
- 先去npm 中创建个账号
- 在package 目录下终端执行命令:
准备发布
git init
name: ww-input // 包名,该名不能和已有的名称冲突;
version: 1.0.0 //版本号 不能和历史版本号相同;
description: input组件 // 简介描述
git repository: //仓库 可直接回车
license: ISC // 开源协议
entry: //入口文件路径
main: //入口文件,应指向编译后的包文件;
keyword:关键字,以空格分割;
author:作者;
private:是否私有,需要修改为 false 才能发布到 npm;
Is this OK? (yes) y
成功后自动生成一个 package.json 文件 存放所设信息
上传到 npm
npm login / npm adduser
username:
password:
email:
npm publish // 如果报错, 请进入邮箱验证一下 /登录下npm
//成功后会返回组件名字 : ww-input@1.0.0
注意:如果报错 有可能是 淘宝镜像的原因,先切回源镜像
npm config set registry https://registry.npmjs.org
最后登录npm 查看并下载
登录到 npm 中, 所上传的组件在package目录里面, 查看下载命令 下载使用
npm i ww-input