本文提供的方式是将组件直接引入,不需要使用Vue.use(),即没有给组件添加install方法。
步骤一
注册npm账号,用于发布组件。
// 注册后
npm adduser // 添加用户(填写注册的用户名,密码,邮箱)
npm whoami // 查看当前注册的用户
附:
注册npm需要确认邮箱,邮箱确认后需要重新登录npm,否则会一直提示邮箱未确认。
步骤二
构建一个vue项目
vue init webpack-simple my-ui
// 修改package.json
"name": "my-ui",
"main": "index.js",
"private": false,
"repository": {
"type": "git",
"url": "https://github.com/.../.git"
},
添加组件信息,目录结构如下图:
// index.js(将需要使用的组件导出)
import Test from './src/components/Test'
export {
Test
}
// components/Test.vue
<template>
<div>
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'Test',
data () {
return {
msg: 'this is a test for my-ui'
}
}
}
</script>
<style scoped>
</style>
步骤三
将项目上传至github(原因:在使用npm install 将从github上下载)。
步骤四
发布:
npm login // 登录
/**如果登录发现以下信息:
Logged in as ... on https://registry.npm.taobao.org/.
需要修改当前的镜像:
输入:npm config set registry https://registry.npmjs.org/
*/
npm publish // 发布至npm
安装
npm i -d my-ui
// 使用
...
<test></test>
...
import { Test } from 'my-ui'
export default {
components: {
Test
}
}
附:
1.修改后重新上传至npm时需要修改package.json中的version字段,否则会上传失败。
2.每次修改后需要重新将代码上传至github上。