vue封装组件打包发布到npm

一、自定义组件

例子：当前时间组件

  

    
    {{date}}
    
    {{time}}
    
    {{weekday}}
    
    
  

• slot保留后期可能使用
  

  验证能否正常使用：
  
  

二、创建install函数

新建cc-current-time文件夹，文件夹下新建index.js文件

import currentTime from '../components/currentTime.vue'
// vue插件模式需要暴露install方法
// vue.user
const install =(Vue)=>{
  Vue.component(currentTime.name,currentTime)
}
export default install

引入组件，在使用Vue.use的时候就是去执行Vue.component，component包含两个参数(name,Object)，
封装组件的时候可以直接使用组件定义的名称，引入的组件就直接作为第二次参数实例。

目录

三、打包组件

1、在pagage.json配置打包路径
常用打包指令：npm run bilid

-- target lib 关键字打包的路径
-- name 打包后的文件名称
-- dest 打包后文件夹名称

打包指令

指令名称:命令 -- target lib 打包路径 --dest 打包后文件夹名 --name 打包后文件名称

2、打包
npm run current-time

生成文件夹

common：必须要使用require引入才能使用
umd：所有的模块化都支持
min：格式化后去掉空格及注释，压缩过后
使用umd.min版本就可以了

四、提交文件夹构建

1、任意目录新建需要上传的文件夹

例：在根目录下新建webpack文件夹，新建打包组件的文件，存放打包后的umd.min.js文件和css文件
2、初始化package.json
current-time文件终端初始化npm init -y

• 如果js名称过长可手动修改，并重新指定路径
  
  
  keywords：关键字
  author：作者

五、npm上注册或者登录

六、发布到npm

1、查看所在的是不是npm源
nrm ls
如果没有安装nrmnpm install nrm -g ,切换到npm镜像上 nrm use npm
2、发射文件路径打开终端
npm login登录

输入用户名\密码\邮箱(输入密码时光标不会动)
npm publish发射

• 发射需要一定的时间才会上传成功，可在npm官网刷新查看是否成功

注意：名字可能重复，如果重复则修改package.json文件中的名称即可

• 上传成功后可查看

  
  

七、验证是否可以npm使用

npm i cc-current-time
mian.js文件引入