首先我们来开发一个可复用的顶栏控件，这里是用vuetifyUI库进行第二次开发。
npm install vuetify or yarn add vuetify
顶栏控件代码：
src/components/TopBar.vue
配置project
下面我们配置当前项目，让它可以发布在npm上
首先我们编辑入口文件 src/components/index.js, 使其被作为 UI 库导入时能自动在Vue中注册我们的 Component:
import Vue from ‘vue’
import TopBar from ‘./TopBar.vue’
const Components = {
TopBar
}
Object.keys(Components).forEach(name => {
Vue.component(name, Components[name])
})
export default Components
接下来我们添加 build 项目的脚本到 package.json 的 scripts 中:
“scripts”: {
“build-bundle”: “vue-cli-service build --target lib --name personal-component-set ./src/components/index.js”,
},
命令解释：–target打包为lib仓库构建，–name项目名称为personal-component-set，入口文件为./src/components/index.js
运行命令后就可以在dist文件夹中看到打包后的文件了，这里我们选择默认发布我们的 *.common.js 文件, 所以我们在 package.json中添加main属性。
指定该属性后, 当我们引用该组件库时, 会默认加载 main 中指定的文件。
“main”: “./dist/personal-component-set.common.js”,
最后, 我们再配置 package.json中的 files属性, 来配置我们想要发布到 npm 上的文件有哪些。
“files”: [
“dist/",
"src/”,
“public/",
".json”,
“*.js”
],
npm 发布
首先去npm官网注册一个账号记得去查看邮箱邮件来认证邮箱，要不然会上传会不成功。
然后在项目中打开命令行工具npm adduser or npm login输入你注册的用户名密码和邮箱，可以使用npm whoami查看登录状态。
在发布之前, 我们修改一下项目的名称(注意不要和npm已有项目名称冲突，可以先去npm搜索一下), 推荐使用 @你注册npm的用户名/项目名称 的命名方式。
接下来我们就可以发布我们的 UI 组件库了, 在发布之前我们再编译一次, 让build出的文件为我们最新的修改:
npm run build-bundle
我们使用下面的命令发布我们的项目:
npm publish --access public
需要注意的是 package.json中指定的version属性: 每次要更新我们的组件库都需要更新一下version(毕竟同一个version 的代码不同,很容易让人产生疑惑)
测试使用
这样我们就完成了自己的 UI 组件库的发布. 接下来我们可以在任何需要使用到该组件库的项目中使用:
npm install --save @你注册npm的用户名/项目名称
然后在index文件 (如src/main.js) 中引入该组件库:
import @你注册npm的用户名/项目名称
接下来我们就可以在 Vue的template中使用组件库中的 Component了:
如果你完全按照上面教程来的，可记得在src/main.js中引入我们文章开头的第三方ui组件库vuetify// 使用第三方组件库
import Vuetify from ‘vuetify’
import ‘vuetify/dist/vuetify.min.css’
Vue.use(Vuetify)
东莞网站建设www.zg886.cn
