如何将vue项目制作成组件并发布到npm仓库中

前言

vue作为当前前端主流框架,帮我们简化封装的同时还可以将我们自己的小项目发布的npm中央仓库,这是如果有人要使用我们的代码,我们不必在提供自己的项目源码,可以直接让使用者去npm仓库直接下载我们的项目,下面我们就来去实现以下自己的项目发布到npm吧

vue项目初始化

js 复制代码
vue create fcsummer-translate(自己的项目名称)

编写组件

  1. 首先在src中新建package目录

这是我起的组件名 2. 编写组件

发布项目

  1. 在package根目录下创建index.js
js 复制代码
//package/index.js
import FTranslate from "../package/f-translate/index.vue"; // 引入封装好的组件
const array = [FTranslate]; // 将来如果有其它组件,都可以写到这个数组里

// 批量组件注册
const install = function (Vue) {
    array.forEach((com) => {
        Vue.component(com.name, com);
    });
};

export default install; // 这个方法以后再使用的时候可以被use调用

这里的install方法是在以后我们使用npm i下载我们的组件后在main.js中引用

js 复制代码
import fTranslate from 'fcsummer-translate'
import '../node_modules/fcsummer-translate/fcsummer-translate.css'
Vue.use(fTranslate) //默认调用上述install方法,让vue去注册我们写的组件
  1. 组件打包 修改package.json文件
js 复制代码
"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint",
  "package": "vue-cli-service build --target lib ./src/package/index.js --name fcsummer-translate --dest fcsummer-translate"
},
  • --target lib 关键字 指定打包的目录
  • --name 打包后的文件名字
  • --dest 打包后的文件夹的名称

执行命令

arduino 复制代码
npm run package

在命令执行完后我们可以在根目录找到fcsummer-transalte目录

发布npm仓库

切换到新生成的目录

bash 复制代码
cd fcsummer-translate

执行命令

csharp 复制代码
npm init -y

初始化项目,还可以执行

csharp 复制代码
npm init

执行后会逐一让你输入要发布的npm包名字,npm包的描述信息和npm包的作者

在package.json中我们填好描述信息

至此,本地工作基本完成

正式发布

  1. 注册账号 npm官网
  2. 设置npm源(可选可不选)
arduino 复制代码
npm config set registry=https://registry.npmjs.org
  1. 添加npm账户

    npm adduser

需要填写你在npm官网注册的用户名和密码,只需要一次本地npm记住后以后就可以不用了 4. 发布npm

复制代码
npm publish

如果在这报错,基本上原因就是你的npm包已经被别人占用了,重新编写一个就可以

下载引用

  1. 下载组件
css 复制代码
npm i fcsummer-translate
  1. main.js中引用,这里一定要把css也引用上
javascript 复制代码
import fTranslate from 'fcsummer-translate'
import '../node_modules/fcsummer-translate/fcsummer-translate.css'
Vue.use(fTranslate)

3.使用

xml 复制代码
<template>
  <div id="app">
  《fTranslate/>
  </div>
</template>

注意事项

在打包的时候我们最好--name和--dest相同,不然引用的时候会有找不到包的情况,如果名字重复,删除打包后的文件夹,重新打包

我的项目

fbk111/fcsummer-translate: 提供中文生成拼音注释 (github.com)

  1. 引用组件
  1. 传入content和fontSize
  2. 页面展示(我这里是写死的300px)
  1. 项目存在bug,希望前端大佬可以积极参与
  2. 已发布到npm
相关推荐
独立开阀者_FwtCoder几秒前
URL地址末尾加不加 "/" 有什么区别
前端·javascript·github
独立开阀者_FwtCoder3 分钟前
Vue3 新特性:原来watch 也能“暂停”和“恢复”了!
前端·javascript·github
snakeshe10104 分钟前
优化 Mini React:实现组件级别的精准更新
前端
前端小盆友5 分钟前
从零实现一个GPT 【React + Express】--- 【2】实现对话流和停止生成
前端·gpt·react.js
京东云开发者11 分钟前
行云前端重构之路:从单体应用到 Monorepo 的血泪史
前端
whale fall12 分钟前
npm install安装不成功(node:32388)怎么解决?
前端·npm·node.js
疯狂动物城在逃flash22 分钟前
数据库入门:SQL学习路线图与实战技巧
前端
前端小巷子28 分钟前
跨域问题解决方案:开发代理
前端·javascript·面试
前端_逍遥生28 分钟前
Chrome 插件开发到发布完整指南:从零开始打造 TTS 朗读助手
前端·chrome
Mintopia29 分钟前
Three.js 材质与灯光:一场像素级的光影华尔兹
前端·javascript·three.js