前言
vue作为当前前端主流框架,帮我们简化封装的同时还可以将我们自己的小项目发布的npm中央仓库,这是如果有人要使用我们的代码,我们不必在提供自己的项目源码,可以直接让使用者去npm仓库直接下载我们的项目,下面我们就来去实现以下自己的项目发布到npm吧
vue项目初始化
js
vue create fcsummer-translate(自己的项目名称)
编写组件
- 首先在src中新建package目录
这是我起的组件名 2. 编写组件
发布项目
- 在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去注册我们写的组件
- 组件打包 修改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中我们填好描述信息
至此,本地工作基本完成
正式发布
- 注册账号 npm官网
- 设置npm源(可选可不选)
arduino
npm config set registry=https://registry.npmjs.org
-
添加npm账户
npm adduser
需要填写你在npm官网注册的用户名和密码,只需要一次本地npm记住后以后就可以不用了 4. 发布npm
npm publish
如果在这报错,基本上原因就是你的npm包已经被别人占用了,重新编写一个就可以
下载引用
- 下载组件
css
npm i fcsummer-translate
- 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)]
- 引用组件
- 传入content和fontSize
- 页面展示(我这里是写死的300px)
- 项目存在bug,希望前端大佬可以积极参与
- 已发布到npm