创建项目
我们这次先开发一个toast试试水。
vue create armouy-ui-test
// 项目中使用了less 记得创建项目的时候选择less
在src
文件夹下新建package
文件夹,在package
文件夹下新建index.js
文件和Toast
文件夹,Toast
文件夹下新建index.js
和index.vue
。
| src
| | package
| | armouy-toast
| | | index.js
| | | index.vue
| | index.js
编写简易toast组件
// armouy-toast/index.vue
<template>
<div class="armouy-toast-wrapper">
<transition name="fade">
<div class="container" v-if="isShow">
<span>{{msg}}</span>
</div>
</transition>
</div>
</template>
<script>
export default {
data() {
return {
isShow: false,
msg: '',
};
},
mounted() {
this.isShow = true;
setTimeout(() => {
this.isShow = false;
}, 1500);
},
};
</script>
<style scoped lang="less">
.armouy-toast-wrapper{
position: fixed;
left: 0;
right: 0;
top:0;
bottom: 0;
z-index:300;
display: flex;
align-items: center;
justify-content: center;
.container{
padding: 16px;
color:#fff;
text-align: center;
border-radius: 5px;
background-color: #5E5E5E;
}
}
.fade-enter-active, .fade-leave-active{
transition: all 0.5s;
}
.fade-enter,.fade-leave-to{
opacity: 0;
}
.fade-enter-to, .fade-leave{
opacity: 1;
}
</style>
注册toast组件
// armouy-toast/index.js
import Vue from 'vue';
import ArmouyToast from './index.vue';
const Toast = Vue.extend(ArmouyToast);
let instance;
const toast = (options = {}) => {
instance = new Toast({
data: options,
});
instance.vm = instance.$mount();
document.body.appendChild(instance.vm.$el);
return instance.vm;
};
export default toast;
在项目中测试一下是否可以使用:
// main.js
import Vue from 'vue';
import toast from '@/package/armouy-toast';
import App from './App.vue';
Vue.config.productionTip = false;
Vue.prototype.$toast = toast;
new Vue({
render: (h) => h(App),
}).$mount('#app');
修改App.vue:
<template>
<div id="app">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue';
export default {
name: 'App',
components: {
HelloWorld,
},
mounted() {
this.$toast({
msg: 'Hello',
});
},
};
</script>
<style lang="less">
#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>
运行之后,界面出现toast
提示框。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qZKJHpkn-1584189432399)(E:\code\note\img\npm打包1.png)]
打包组件
我们需要自动注册一下我们的组件。由于我们希望的是项目可以直接this.$toast()
来使用toast,所以我们直接挂载toast组件。
// package/index.js
import toast from '@/package/armouy-toast';
const Components = {
// 这里是后续补充的组件
};
const install = (Vue) => {
if (install.installed) return;
Object.keys(Components).forEach((key) => {
Vue.component(key, Components[key]);
});
// eslint-disable-next-line no-param-reassign
Vue.prototype.$toast = toast;
};
// auto install
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue); // 通过use方式全部引入
}
const API = {
install,
...Components,
};
export default API; // 通过插件单独引入
修改package.json文件,在scripts
中新加入:
"build-bundle": "vue-cli-service build --target lib --name armouy-ui-test ./src/package/index.js"
其中--name
后面跟随着的是你要发布的包的名字。
运行npm run build-bundle
生成dist
文件夹 。
发布
注册npm
到https://www.npmjs.com/网站注册一个账号。
修改package.json
{
"name": "armouy-ui-test",
"version": "0.1.0",
"description": "ui package for test",
"keyword": "test",
"author": "armouy",
"private": false, // 一定要改成false
"license": "MIT",
"main": "./dist/armouy-ui-test.common.js", // 这个是你打包后的文件的地址
"files": [
"dist/*",
"src/*",
"public/*",
"*.json",
"*.js"
],
...
}
执行npm run publish
如果出现**tag--armouy-ui-test@x.x.x**
就是成功了。
可能出现的报错
- 如果报错403,是因为刚注册的npm账户需要邮件链接点击激活账户才能使用,或者版本号重复;
- 如果报错4048,原因是没有登录,使用
npm login
登录。
测试是否发布成功
可以登录npm的网站查看profile
看看是否发包成功。
使用自己的包
另外新建一个vue项目,安装
npm i armouy-ui-test --save
// 修改main.js
import ArmouyUI from 'armouy-ui-test';
import 'armouy-ui-test/dist/armouy-ui-test.css';
Vue.use(ArmouyUI);
在App.vue测试一下:
mounted() {
this.$toast({
msg: 'Hello',
});
},
运行,显示出hello
则成功。
更新包
接下来我们来写一个纯UI组件,新建armouy-button
文件夹。
| src
| | package
| | armouy-button
| | | index.vue
| | armouy-toast
| | | index.js
| | | index.vue
| | index.js
// armouy-button/index.vue
<template>
<div class="armouy-button">
<button class="red">{{value}}</button>
</div>
</template>
<script>
export default {
name: 'armouyButton', // 这个名字不要与HTML的标签重名!!
props: {
value: {
type: String,
default: '',
},
},
};
</script>
<style lang="less" scoped>
.red{
background-color: red;
color:#fff;
}
</style>>
</style>
修改package.json
中的版本号,然后重新运行:
npm run build-bundle
npm publish
打开测试的那个项目,卸载原先的包(最新的包已经到0.1.14了):
npm uninstall armouy-ui-test --save
npm i armouy-ui-test@0.1.14 --save
修改App.vue
:
<armouy-button value="hello" />
如果运行之后出现按钮,则成功~~(记得看看控制台会不会出现什么隐形Bug)。
补充:
如何生成代码目录
npm install -g tree-node-cli
// window系统用 treee
tree -L 4 -I node_modules > tree.md