手摸手教你用Vue3+Ts+Rollup+Tailwindscss打造插拔式的业务组件库
发布于 4 年前 作者 ping32 4620 次浏览 来自 分享

前言：

随着前端业务的不断扩大,也造了一些的___轮子___或者面向业务___二次封装的代码___用在各个项目当中,为了提升团队开发效率,稳定开发质量,一个服务于业务的___业务组件库___必不可少~ 更多精彩技术文章汇总在我的http://github.crmeb.net/u/yi ，持续更新，欢迎点个 star 订阅收藏。

要说明的是业务组件库和平时用的第三方组件库(如ant-design)定位是不一样的并不冲突,一张图画出来你就明白了:

这是组件库的样子:

组件库展示链接: http://8.210.196.94:8082

ps:服务器略渣,耐心等待

一、技术选型

1.Vue3

2.Typescript

3.Rollup:一个轻量简单的打包工具,Vue和react源码就是用这个工具打包的

4.Tailwindscss:一个原子性的css框架,简单,定制性强,快速开发样式 https://tailwindcss.com/docs

二、环境搭建

(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](/user/rollup)/plugin-node-resolve": "^11.1.1",
   "[@types](/user/types)/lodash-es": "^4.17.4",
   "[@vue](/user/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字段一定不要落下

写完后,执行___npm install___

三、编写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](/user/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___配置字段,并覆盖了输出格式

四、创建组件

(1).创建/src/components/testBricks文件夹,并在testBricks文件夹下面创建index.ts和index.vue

(2).创建/src/index.ts

(3).创建/src/main.css

此时你的目录结构应该是这样的:

五、全局注册与局部注册组件

类似于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:到这里其实你就已经打造好了一个组件库框架,接下来我们对具体的组件进行开发

六、组件加入tailwindcss

其实在rollup配置的时候就已经配置了处理tailwindcss功能,我们加入tailwind样式就可以

(1).在/src/main.css引入tailwindcss内置样式

[@import](/user/import) "tailwindcss/base";

[@import](/user/import) "tailwindcss/components";

[@import](/user/import) "tailwindcss/utilities";

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

你甚至可以在组件库编写tailwinds的样式(下面举例[.btn]属性为例),打包发布后在项目中直接使用该样式

// main.css

[@import](/user/import) "tailwindcss/base";

[@import](/user/import) "tailwindcss/components";

[@import](/user/import) "tailwindcss/utilities";

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

举例项目中使用: \

<button class="btn"></button>

(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发布

blog.csdn.net/taoerchun/a…

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使用

关于兼容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在覆盖一次)

最后

1.你觉得嫌麻烦一步一步来,你可以直接下载源码,编写自己的组件库
git clone [email protected]:pyh996/vue3-rollup-tailwindcss.git

github地址: http://github.crmeb.net/u/yi 

2.介绍一款tailwindcss的免费样式库,非常好看,拿来给组件快速提供样式,超级好用~

tailblocks.cc

作者：作曲家种太阳

更多精彩技术文章汇总在我的http://github.crmeb.net/u/yi ，持续更新，欢迎点个 star 订阅收藏。

回到顶部