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

 

在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文件，这里就是使用组件的例子

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

注意：显示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仓库源码

预览地址