首先创建一个vue项目 vue create proj,简单选择默认就可以
在components下面建立自己的组件文件
eg:vueTestNpm.vue
<template>
<a :href="link" target="_blank">{{text}}</a>
</template>
<script>
export default {
props:{
link:{
type:String,
default:''
},
text:{
type:String,
default:''
}
}
}
</script>
<style scoped>
a{
text-decoration: none;
color: '#eee'
}
</style>
在app.vue中调用
<template>
<div id="app">
<vue-test-npm href="https://www.baidu.com" text="百度一下"></vue-test-npm>
</div>
</template>
<script>
import vueTestNpm from './components/vueTestNpm.vue'
export default {
name: 'App',
components: {
vueTestNpm
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
看到效果:
重头戏:发布我们的组件
安装 vue-sfc-rollup
在github上面可以搜索看到详细的方式,注意:安装的时候要全局安装而且小管理员身份,不然会报错。
npm install -g vue-sfc-rollup
接着打包我们的组件sfc-init
然后按照提示输入相关信息
sfc-init
如图所示:eg:
接着我们看到打包的文件夹
进入文件夹目录
在终端输入npm i 初始化,
接着npm run serve运行起来
接在修改src下面vue-test-npm.vue,将之前的文件拷贝过来
再修改serve.vue中调用
npm run serve 运行起来效果
打包发布
可修改版本,起初可将修改为最小0.0.1,最好在name中加上独有的标志防止重名会导致上传失败
首先一般会都配置淘宝镜像,需要切回来
npm config set registry https://registry.npmjs.org/
登录npm,按照提示输入相关信息
npm adduser
输入完后,输入以下命令,即可成功上传组件
npm publish
去自己的npm package查看是否成功
验证组件是否上传成功且可以使用
在某一个项目中eg:
npm i vue-test-npm-sheldon
引入使用完整代码
<template>
<div id="app">
<vue-test-npm-sheldon href="https://www.baidu.com" text="百度一下test"></vue-test-npm-sheldon>
</div>
</template>
<script>
import vueTestNpmSheldon from 'vue-test-npm-sheldon'
export default {
name: 'App',
components: {
vueTestNpmSheldon
}
}
</script>
<style>
</style>
成功使用,效果图如下:
撒花!!!!!!!!!!!