Vue3+TypeScript部署私有UI组件库

Vue3已经正式发布有一段时间，最近也打算学习一下，这个项目是在学Vue3的时候看到别人分享的demo，然后自己在这基础上修改一下，加深映像和理解；

开发环境

查看vue-cli版本

vue -V

升级vue-cli3到vue-cli4

npm install -g @vue/cli

node版本 >10.x

初始化项目

vue create dalou-ui

选择 Manually select features （自定义）：

这是我的项目配置

预览地址

项目架构

在项目根目录新建packages目录来存放组件，src文件夹下新建demoCode文件夹存放组件使用样例，新建markdown文件夹存放md文件。如下图

根目录下新建vue.config.js文件：

module.exports = {
  pages: {
    index: {
      entry: 'src/main.ts', // 入口
      template: 'public/index.html', // 模板
      filename: 'index.html' // 输出文件
    }
  },
  devServer: {
    port: 8080, //固定端口
    hot: true, //开启热更新
    open: 'Google Chrome' //固定打开浏览器
  }

组件开发

在packages文件夹下新建button文件夹，然后在button文件根目录下新建index.js文件：

import ZButton from './src/index.vue';
 
ZButton.install = function (Vue) {
  Vue.component(ZButton.name, ZButton);
}
 
export default ZButton;

button文件根目录下新建src文件夹，然后src文件夹里新建index.vue

<template>
  <button class="z-button" :class="classes" @click="onClick" :disabled="disabled">
    <span v-if="loading" class="z-button-spin"><svg class="menu" aria-hidden="true" @click="toggleMenu">
        <use xlink:href="#icon-jiazaizhong"></use>
      </svg></span>
    <span>
      <slot/>
    </span>
  </button>
</template>

<script>
  export default {
    name: 'ZButton',
    props: {
      //按钮主题
      theme: {
        type: String,
        default: 'default'
      },
      size: {
        type: String,
        default: 'normal'
      },
      loading: {
        type: Boolean,
        default: false
      },
      disabled: {
        type: Boolean,
        default: false,
      }
    },
    methods: {
      onClick() {
        if (this.disabled) {
          return
        }
        //this.$emit('click')
      },
    },
    computed: {
      classes() {
        const loadingClass = this.loading ? ' z-button-loading' : ''
        return `z-button-${this.theme} z-button-${this.size}${loadingClass}`
      }
    }
  }
</script>

<style lang="scss">
  //主题色
  $theme: #1E90FF;

  //浅色背景
  $simpleBg: #DEDDFF;

  @keyframes spin {
    0% {
      transform: rotate(0);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  .z-button {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    color: #606266;
    text-align: center;
    box-sizing: border-box;
    outline: none;

    &.z-button-loading {
      pointer-events: none;

      .z-button-spin {
        width: 20px;
        height: 20px;
        margin-right: 5px;
        animation: spin infinite 1s linear;

        >svg {
          width: 100%;
          height: 100%;
        }
      }
    }

    >span {
      display: inline-block;
      vertical-align: middle;

    }

    margin: 0;
    transition: .1s;
    font-weight: 500;
    font-size: 14px;
    border-radius: 4px;

    &.z-button-default {
      background: #fff;
      border: 1px solid #dcdfe6;

      &:hover,
      &:focus {
        color: #0049FF;
        border-color: #0049FF;
        background-color: #fff;
      }
    }

    &.z-button-primary {
      background: #0049FF;
      border: 1px solid #dcdfe6;
      color: #eeeeee;

      &:hover,
      &:focus {
        color: #eeeeee;
        background-color: #2664FF;
      }
    }

    &.z-button-success {
      background: #3CB371;
      border: 1px solid #dcdfe6;
      color: #eeeeee;

      &:hover,
      &:focus {
        color: #eeeeee;
        background-color: #6be3bc;
      }
    }

    &.z-button-danger {
      background: #d72323;
      border: 1px solid #d72323;
      color: #eeeeee;

      &:hover,
      &:focus {
        color: #eeeeee;
        background-color: #dd5656;
      }
    }

    &.z-button-info {
      background: #52616b;
      border: 1px solid #dcdfe6;
      color: #eeeeee;

      &:hover,
      &:focus {
        color: #eeeeee;
        background-color: #6c777d;
      }
    }

    &.z-button-warning {
      background: #fce38a;
      border: 1px solid #dcdfe6;
      color: #4a4444;

      &:hover,
      &:focus {
        color: #8e8282;
        background-color: #f7e4a4;
      }
    }

    &.z-button-text {
      background: #fff;
      border: 0;
      color: #4a4444;

      &:hover,
      &:focus {
        >span {
          color: #8e8282;
          border-color: #222831;
          background-color: #f7e4a4;
        }
      }
    }

    &.z-button-normal {
      padding: 12px 20px;
    }

    &.z-button-small {
      padding: 10px 20px;
      font-size: 14px;
      border-radius: 4px;
    }

    &.z-button-mini {
      padding: 9px 15px;
      font-size: 12px;
      border-radius: 3px;
    }
  }
</style>

 

在packages文件夹下新建index.js文件

import ZButton from './button'

// 组件集合，用于遍历
const components = [ZButton];

// 定义 install 方法
const install = function(Vue) {
  if (install.installed) return;
  // 遍历注册全局组件
  components.map((component) => Vue.component(component.name, component));
};

// 判断是否是直接引入文件
if (typeof window !== "undefined" && window.Vue) {
  install(window.Vue);
}

export default {
  install,
  //所有组件，必须具有install方法才能使用Vue.use()
  ...components
};

//组件按需引入时需要里添加
export {
  install,
  ZButton
};

完成后项目结构如图：

修改main.ts文件,import xhwlComponent from "../packages"

import { createApp } from "vue";
import App from "./App.vue";
import {router} from "./router";
import store from "./store";
import dalouUi from "../packages";

createApp(App)
  .use(store)
  .use(dalouUi)
  .use(router)
  .mount("#app");

这样项目里就可以直接全局使用刚才开发的button组件了

使用文档

demoCode文件下新建button文件夹，在里面新建buttonModal.vue文件，这里就是使用组件的例子

<template>
  <div>
    <z-button class="b-m b-b">默认按钮</z-button>
    <z-button theme="primary" class="b-m b-b">主要按钮</z-button>
    <z-button theme="success" class="b-m b-b">成功按钮</z-button>
    <z-button theme="warning" class="b-m b-b">警告按钮</z-button>
    <z-button theme="info" class="b-m b-b">信息按钮</z-button>
    <z-button theme="danger" class="b-m">危险按钮</z-button>
    <z-button theme="text" class="b-m">文字按钮</z-button>
  </div>
</template>

<script >
export default {
  name: 'button-demo'
}
</script>

<style lang="scss" scoped>
.b-m {
  margin-right: 15px
}

.b-b {
  margin-bottom: 15px;
}
</style>

views文件夹下新增buttonDoc.vue文件，这个是使用文档页面

<template>
  <div class="container">
    <demo-doc title="基础用法" description="button的基础用法" :imgUrl="url" :modal="buttonModal" :component="modaljs">
    </demo-doc>
    <attr :data="data"></attr>
  </div>
</template>

<script>
  import buttonModal from "@/demoCode/button/buttonModal.vue";   // 组件展示
  import modaljs from "@/demoCode/button/buttonModal.ts";               // 代码展示
  import DemoDoc from "@/components/demoTemplate.vue";                
  import Attr from "@/components/Attr.vue";                                            //  展示需要传递的参数、方法等
  import {ref, onMounted, nextTick} from 'vue'
  export default {
    components: {
      Attr,
      DemoDoc
    },
    setup(props, context) {
      let url = ref('')
      const data = { 
        columns:[{
          params: 'size',
          desc: '尺寸',
          type: 'string',
          select: 'normal / small / mini',
          default: 'normal',
        },
        {
          params: 'theme',
          desc: '按钮类型',
          type: 'string',
          select: 'primary / success / warning / info / danger / text',
          default: 'primary',
        }]
      }
      return {
        buttonModal,
        modaljs,
        data,
        url
      }
    },
  }
</script>

<style lang="scss" scoped>
  .container {
    width: 100%;
  }
</style>

注意：显示md文件需要安装一些依赖

npm install markdown-loader 

npm install html-loader 

npm install marked

npm install github-markdown-css

修改vue.config.js 文件

const path = require('path')
module.exports = {
  pages: {
    index: {
      entry: 'src/main.ts', // 入口
      template: 'public/index.html', // 模板
      filename: 'index.html' // 输出文件
    }
  },
  devServer: {
    port: 8080, //固定端口
    hot: true, //开启热更新
    open: 'Google Chrome' //固定打开浏览器
  },
  chainWebpack: config => {
    // @ 默认指向 src 目录
    // 新增一个 ~ 指向 packages
    config.resolve.alias
      .set('~', path.resolve('packages'))
    config.module
      .rule('md')
      .test(/\.md$/)
      .use('html-loader')
      .loader('html-loader')
      .end()
      .use('markdown-loader')
      .loader('markdown-loader')
      .end()
      .rule('js')
      .include.add(/packages/)
      .end()
      .use('babel')
      .loader('babel-loader')
      .tap(options => {
        // 修改它的选项...
        return options
      })
  },
}

codePer.vue文件里展示代码时高亮需要安装prismjs

npm install prismjs

git仓库源码

预览地址

本文地址：https://blog.csdn.net/qq_35525304/article/details/112538878