手摸手教你用Vue3+Ts+Rollup+Tailwindscss打造插拔式的业务组件库
sumicode_63 5月7日 107 2 1 107 2 1

前言:

随着前端业务的不断扩大,也造了一些的轮子或者面向业务二次封装的代码用在各个项目当中,为了提升团队开发效率,稳定开发质量,一个服务于业务组件库必不可少~

image.png

组件库链接:http://8.210.196.94:8082
ps:服务器略渣,耐心等待

1.技术选型

1.Vue3 \
2.Typescript \
3.Rollup:一个轻量简单的打包工具,Vue和react源码就是用这个工具打包的 \
4.Tailwindscss:一个原子性的css框架,简单,定制性强,快速开发样式

2.环境搭建

(1).创建一个文件夹 并 npm init \
(2).在pageck.json中写入

 {
  "name": "test-bricks-teach",
  "version": "1.0.0",
  "description": "",
  "author": "peiyahui",
  "types": "dist/index.d.ts",
  "license": "ISC",
  "main": "dist/test-bricks-teach.umd.js",
  "module": "dist/test-bricks-teach.esm.js",
  "scripts": {
    "build": "npm run clean && npm run build:esm && npm run build:umd",
    "dev": "npm run clean && npm run dev:umd",
    "build:esm": "rollup  --config build/rollup.esm.config.js",
    "build:umd": "rollup --config build/rollup.umd.config.js",
    "clean": "rimraf ./dist"
  },
  "devDependencies": {
    "rollup": "^2.38.5",
    "rollup-plugin-vue": "6.0.0-beta.6",
    "rollup-plugin-typescript2": "^0.29.0",
    "@rollup/plugin-node-resolve": "^11.1.1",
    "@types/lodash-es": "^4.17.4",
    "@vue/compiler-sfc": "^3.0.0",
    "postcss-import": "^14.0.0",
    "rimraf": "^3.0.2"
  },
  "dependencies": {
    "rollup-plugin-postcss": "^4.0.0",
    "rollup-plugin-commonjs": "^10.1.0",
    "tailwindcss": "^1.9.0",
    "postcss": "^8.2.8",
    "lodash-es": "^4.17.20",
    "typescript": "~3.9.3",
    "vue": "^3.0.0"
  }
}

相信大家对package.json的配置再熟悉不过了 \
这main和module两个字段是打包后输出的两个文件,先写上去 \
version字段一定不要落下 (建议package.json)
直接接复制就行 \
写完后,执行npm install

3.编写Rollup的配置文件

与package.json平级创建一个build文件夹,分别创建三个文件 \
1.文件1:rollup.config.js

import vue from 'rollup-plugin-vue'

import typescript from 'rollup-plugin-typescript2'
import {nodeResolve} from '@rollup/plugin-node-resolve'
import postcss from 'rollup-plugin-postcss'
import {name} from '../package.json'
import commonjs from 'rollup-plugin-commonjs';
import postcssImport from 'postcss-import';
// 处理 apply 以及内置 mixin
import tailwindcss from 'tailwindcss'

const file = type => `dist/${name}.${type}.js`

const overrides = {
    compilerOptions: {declaration: true},
    exclude: ["tests/**/*.ts", "tests/**/*.tsx"]
}

export {name, file}
export default {
    input: 'src/index.ts',
    output: {
        name,
        file: file('esm'),
        format: 'es'
    },
    plugins: [
        nodeResolve(),

        typescript({tsconfigOverride: overrides}),
        vue(),
        postcss({
            extensions: [".css"],
            extract: true,
            plugins: [postcssImport(), tailwindcss()]
        }),
        commonjs({
            include: [
                "node_modules/**",
                "node_modules/**/*"
            ]
        }),
    ],
    external: ['vue', 'echarts', 'lodash-es']
}

2.文件2:rollup.ems.config.js

import basicConfig, { name, file } from './rollup.config'
export default {
  ...basicConfig,
  output: {
    name,
    file: file('esm'),
    format: 'es'
  }
}

3.文件3:rollup.umd.config.js

import basicConfig, { name, file } from './rollup.config'
export default {
  ...basicConfig,
  output: {
    name: 'well-bricks',
    file: file('umd'),
    format: 'umd',
    globals: {
      'vue': 'Vue',
    },
    exports: 'named'
  }
}

到这里我们就把Rollup打包工具的配置弄好了 \
文件1 : 引入插件,设置输入与输入文件名称与位置 \
文件2和文件3只是复用了文件1配置字段,并覆盖了输出格式

4.创建组件

(1).创建/src/components/testBricks文件夹,并在testBricks文件夹下面创建index.ts和index.vue \
(2).创建/src/index.ts \
(3).创建/src/main.css \
此时你的目录结构应该是这样的:

image.png

5.全局注册与局部注册组件

类似于ant-design和elementUI这样优秀的组件库,都提供了全局引入和局部引入: \
~全局引入是利用了vue的install语法,循环组件都挂载到vue的实例对象上 \
~局部引入是利用了export的特性 \
在/src/index.ts 写入:

/* eslint-disable */
import {App} from 'vue'

import './main.css'   // 引入样式
import TestBricks from './components/testBricks'

const components = [
    TestBricks
]

// 全局注册
const install = (app: App) => {
    components.forEach(component => {
        app.component(component.name, component)
    })
}

// 局部注册
export {
    TestBricks,
    install
}
export default {
    install
}

ps:到这里其实你就已经打造好了一个组件库框架,接下来我们对具体的组件进行开发

6.组件加入tailwindcss

其实在rollup配置的时候就已经配置了处理tailwindcss功能,我们加入tailwind样式就可以 \
(1).在/src/main.css引入tailwindcss内置样式

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

ps:这里其实还有个[黑魔法]

你甚至可以在组件库编写样式(下面举例[.btn]属性为例),打包发布后在项目中直接使用,不过个人不是很推荐,会造成全局css属性污染

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

.btn {
    @apply bg-blue-500 text-white;
}

\
(2).在 /src/components/testBricks/index.vue

<template>
  <section class="text-gray-600 body-font">
    <div class="container px-5 py-24 mx-auto">
      <div class="flex items-center lg:w-3/5 mx-auto border-b pb-10 mb-10 border-gray-200 sm:flex-row flex-col">
        <div class="flex-grow sm:text-left text-center mt-6 sm:mt-0">
          <h2 class="text-gray-900 text-lg title-font font-medium mb-2">123</h2>
          <p class="leading-relaxed text-base">333</p>
        </div>
      </div>
    </div>
  </section>
</template>
<script lang="ts">
import {defineComponent} from 'vue'

// array that contains style props
export default defineComponent({
  name: 'testBricks',
  props: {},
})
</script>

<style scoped>

</style>

ps:这里是写的tailwindscss的样式,没有任何逻辑

(3)./src/components/testBricks/index.ts中写入

import { App } from 'vue'
import IndexFeature from './index.vue'
IndexFeature.install = (app: App) => {
  app.component(IndexFeature.name, IndexFeature)
}

export default IndexFeature

ps:到这里我们的Vue3+Ts+Rollup+Tailwindscss组件库就打造好了 \
接下来我们就要打包,发布

关于打包

npm run build

关于组件库npm发布

https://blog.csdn.net/taoerchun/article/details/82531549 \
ps:按照这来发布,记得每一次发布都要改变下package.json的版本号

关于引入

发布好后,我们就可以在项目代码中引入我们的组件库啦

全局引入

(1).在项目文件中的main.js引入

import legoBricks from "test-bricks-teach"
import 'well-bricks/dist/well-bricks.umd.css'

const app = createApp(App)
app.use(legoBricks)

app.mount('#app')

(2).直接在.vue中template中使用组件

    <test-bricks></test-bricks>

局部引入

(1).在项目文件中的main.js引入\

import 'well-bricks/dist/well-bricks.umd.css'

(2).在.vue文件上引入组件,注册组件,并使用

import { TestBricks } from "test-bricks-teach"

// 注册
components: {TestBricks}

// 在template使用
 <test-bricks></test-bricks>

关于兼容js

有时候兼容以前写的js+vue3的轮子
这时候得在组件里加入index.d.ts声明文件

declare  const List:any
declare  const name:any

ps:该用any大法就用any大法

谈谈优点和缺点

优点: \
1.提升开发效率,没有配置,使用简单 \
2.规范团队代码质量,提取常用轮子,可以专门维护 \
3.有了业务组件库,当写轮子的时候会考虑到代码质量,各方面权衡,倒逼成长 \
4.有些第三方的包可以直接在组件库集成,比如像是echarts,写一个可以自动适应的echarts容器组件

缺点:
1.引入了tailwindcss后,tailwindcss有一个默认是初始化的css,类似于reset.css,引入组件库会吧项目的初始样式覆盖(这一点还没有优雅处理办法,我一般是再用reset.css在覆盖一次)

最后

你觉得嫌麻烦一步一步来,你可以直接下载源码,根据逻辑编写自己的组件库
git clone git@github.com:pyh996/vue3-rollup-tailwindcss.git

github地址: https://github.com/pyh996/vue3-rollup-tailwindcss

介绍一款tailwindcss的免费样式库,非常好看,拿来可以快速开发,打包到组件库,十分的香

https://tailblocks.cc

扫码分享到移动端
1 条评论
粟米社区小李LV5 评论于 5月7日 15:39

赞!

参与评论互动
登录即可参与评论互动哦