vue制作一个ui组件npm包

最近在写一个移动端小项目 因为项目的特殊性，需要一些特殊的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

要发布到npm 首先要有一个账号，注册啥的就不多说了,注册地址：https://www.npmjs.com/
操作代码如下

1.登录

npm login

2.发布

npm publish

发布成功 之后就可以在npm中搜索到自己的包了

我们来下载下来看看效果

优化

我们的ui已经显示出来了，但是我们要做一个toast，光有ui是不够的。之后的优化请等待下次更新。

更新

因为想要写很多很多ui组件，发现次框架不太合适，做了一套新的组件
vue制作一个toast组件npm包

希望大家多多支持