最近在写一个移动端小项目 因为项目的特殊性,需要一些特殊的ui组件,但是并不想使用第三方的组件,所以自己尝试写一个小组件并发布到npm上
因为要写一个小组件,所以这里使用webpack-simple
,因为我们要制作一个ui小组件,不需要配置特别东西,所以使用webpack-simple
就够了,并不需要使用webpack
初始化项目
vue init webpack-simple sever-ui
注意: sever-ui 是项目的名字,如果想要发布到npm上 需要看一下npm,不能有已存在的名称
项目初始化之后就是正常一顿操作下来
之后就是正常的操作
cd sever-ui
npm install
npm run dev
接下来就是开始写组件了
整个项目结构如下
暂时先写一个Toast组件,相关代码如下
Toast.vue
<template>
<div class="mini-toast">
<span class="toast-msg">{
{
propData}}</span>
</div>
</template>
<script>
export default {
name:"mini-toast",
props:{
propData:{
type: String,
default: '默认值'
}
},
data(){
return {
}
},
}
</script>
<style lang="scss">
.mini-toast{
display: flex;
justify-content: center;
align-items: center;
height: 100%;
position: fixed;
top:0;
bottom:0;
left:0;
right:0;
}
.toast-msg{
color: #ffffff;
background:rgba(0,0,0,0.5);
padding:0.3rem;
border-radius: 0.1rem;
font-size: 0.34rem;
}
</style>
App.vue
<template>
<div id="app">
<Toast :propData="msg"/>
</div>
</template>
<script>
import Toast from './components/Toast'
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
components:{
Toast,
}
}
</script>
main.js
import Vue from 'vue'
import App from './App.vue'
!(function (win, doc) {
function setFontSize() {
var winWidth = doc.documentElement.clientWidth;
doc.documentElement.style.fontSize = (winWidth / 750) * 100 + 'px';
}
var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';
var timer = null;
win.addEventListener(evt, function () {
clearTimeout(timer);
timer = setTimeout(setFontSize, 300);
}, false);
setFontSize();
}(window, document));
new Vue({
el: '#app',
render: h => h(App)
})
样式写完了,接下来就要开始发布到npm上了,我们需要修改一些配置
webpack.config.js
const NODE_ENV = process.env.NODE_ENV;
entry: NODE_ENV == 'development' ? './src/main.js' : './src/index.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'sever-ui.js',
library: 'sever-ui', // 指定的就是你使用require时的模块名
libraryTarget: 'umd', // 指定输出格式
umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
},
修改js的引用路径,index.html
<script src="/dist/sever-ui.js"></script>
想要发包到npm上 private必须为false
package.json
"private": false,
"main":"dist/sever-ui.js",
要发布到npm 首先要有一个账号,注册啥的就不多说了,注册地址:https://www.npmjs.com/
操作代码如下
npm login
npm publish
发布成功 之后就可以在npm中搜索到自己的包了
我们的ui已经显示出来了,但是我们要做一个toast,光有ui是不够的。之后的优化请等待下次更新。
因为想要写很多很多ui组件,发现次框架不太合适,做了一套新的组件
vue制作一个toast组件npm包
希望大家多多支持