vue组件封装npm包

前言

npm官网: https://www.npmjs.com/

首先去官网注册一个账号，把设置的账号密码记住，然后再把注册的邮箱验证好，否则不行。

上述完事之后我们打开终端(cmd)输入 nrm -V 验证一下是否有nrm，没有的话就用 npm i nrm -g 这个命令把nrm下载下来，之后在输入 nrm -V 验证下就完成。

发布npm包:

项目里边新建一个文件夹，然后在文件夹内新建一个index.js，这里面就是暴露出去的方法
import myUse from '../components/myUse.vue'
// Vue 插件模式暴露出一个方法
const install = (Vue) => {// 注册组件(组件名称，组件)Vue.component(myUse.name, myUse)
}
export default install
接下来在package.json增加一段打包指令

build-npm 自定义，自己改成什么都可以

--target lib 指定打包的目录

--dest 打包后文件夹的名称

--name 打包后文件的名称

完事之后运行 npm run build-npm 这样打包完成之后在项目里边就会生成一个 distUse 文件夹

这里边css就是组件会用到的样式，umd是指支持所有引用格式，所以这里需要用到css文件和倒数第二个umd文件

接下来，我们在找个地方新建一个 packsges 的文件夹，将用到的两个文件复制到里边

这里边js文件名字太长了，所以我更改了一下

接下来选中 packsges 集成终端打开，运行 npm init -y 然后就会生成一个初始化的package.json文件

然后打开 package.json

name 是自定义包的名称

main 需要和js文件名称匹配

keywords 搜索时匹配的关键字(可自定义)

author 作者(自定义)

修改完成之后在终端运行 nrm use npm 一般我们用的都是淘宝源所以这里得更改下，以便稍后登陆，修改完之后运行npm login 进行登陆(输入用户名，密码，邮件地址。注: 这里输入密码时候终端光标是不会动的输入完直接回车)，登录完成之后运行 npm publish 就发布成功啦！

之后进入官网，点击个人头像，然后点击 Packages 是可以看到的

项目内使用:

使用时候运行 npm i wz-np-use --save 就可以下载到项目内，然后在main.js内引入包和样式，注册完成之后就可以使用了

使用的时候是用组件名称

结束，玩的不好还有待成长，望大神指教!

vue组件封装npm包相关推荐

Vue组件封装npm发布及应用
本文参考: https://www.cnblogs.com/max-tlp/p/9338855.html https://www.cnblogs.com/caideyipi/p/7705052.htm ...
用vue写一个npm包(package)，发布及引用
提示:vue写一个npm包(package) 文章目录前言一.npm 二.npm package开发三.引用package 总结前言之前一直都是用别人封装好的npm包,新接了一个需求,自己写 ...
echarts vue组件封装
echarts vue组件封装为什么封装echarts组件 1.原生echarts不是vue组件风格的,不爽 2.原生echarts需要操作dom,麻烦 3.原生echarts没有响应式系统,太菜 ...
Vue 组件封装简单案例——小白入门
今天初步接触了 Vue 中的组件封装,将写好的公用组件封装在 src 的 components 文件夹下,在 views 文件夹下的 .vue 文件可以进行调用以最简单的 button 按钮封装为例 ...
Vue 组件封装之 ScrollView 上拉加载更多
Vue 组件封装之 ScrollView 上拉加载更多一.ScrollView 上拉加载更多二.使用案例三.API 使用指南四.源代码一.ScrollView 上拉加载更多组件说明: 实现 ...
Vue 组件封装之 Questionnaire 问卷调查
Vue 组件封装之 Questionnaire 问卷调查前言一.Questionnaire 组件二.使用案例三.API 使用指南四.源代码前言问卷调查表也是目前前端比较常见的开发项目,目 ...
Vue 组件封装之 Content 列表(处理多行输入框 textarea)
Vue 组件封装之 Content 列表一.Content 列表二.使用案例三.API 使用指南四.源代码一.Content 列表组件说明: 实现 Content 列表布局排版. 效果展示 ...
Vue 组件封装之 List 列表
Vue 组件封装之 List 列表一.List 列表二.使用案例三.API 使用指南四.源代码一.List 列表组件说明: 实现 List 列表布局排版. 效果展示: 实现的功能: 在一个 ...
Vue 组件封装之 Search 搜索
Vue 组件封装之 Search 搜索一.Search 组件二.使用案例三.API 使用指南四.源代码一.Search 组件组件说明: 实现搜索功能. 效果展示: input 输入框背景铺 ...

vue组件封装npm包

前言

vue组件封装npm包相关推荐

最新文章

热门文章