安装依赖

• pnpm add -D sucrase

• pnpm install

• pnpm gen:version

  初始化版本号。需要先修改scripts\gen-version.ts中的element-plus为tw-element

修改设置

• build\helper.ts

  • el-${title-> tw-${title

  • El${title->TW${title

  • const docs = 'https://element-plus.org/en-US/component/'

    文档链接地址也要修改

  • docs/en-US/component

    文档链接地址语言

• build\utils\constants.ts

  修改对应的拓展名称

• build\utils\paths.ts

  修改项目的相关路径

  • export const epOutput = resolve(buildOutput, 'element-plus')

    export const epOutput = resolve(buildOutput, 'tw-element')

• build\types-definitions.ts

  element-plus->tw-element

• build\utils\pkg.ts

  element-plus->tw-element

• build\utils\rollup.ts

  element-plus->tw-element

• build\full-bundle.ts

  ElementPlus->TwElement

• packages\tw-element\package.json

  element-plus->tw-element

• packages\tw-element\locale.ts

  export * from '@tw-element/locale'

• packages\tw-element\make-installer.ts

  element-plus->tw-element

• 把packages/element-plus文件夹下所有文件都修改

  • element-plus->tw-element
  • El->Tw

• global.d.ts

  修改相关前缀

• s

css 修改

• packages\theme-chalk\src\mixins\config.scss

  el->tw

• 全局替换 --el- -> --tw-

• packages\theme-chalk\gulpfile.ts

  el->tw,这是生成的scss文件的前缀控制。

• packages\components\icon\style\css.ts

  图标样式

docs

• docs\vite.config.ts

  element-plus->tw-element

• docs.vitepress\theme\index.ts

• s

tailwind css

安装依赖

pnpm install -D tailwindcss postcss-import autoprefixer
npx tailwindcss init -p // 初始化 tailwindcss postcss config

建立对应的配置文件

• tailwind.config.js

  module.exports = {
    prefix: "tw-", // tailwind css 前缀
    important: true, // 开启 important  使用#{!important}
    content: ["./packages/components/button/**/*.{ts,vue}"],
    theme: {
        extend: {},
    },
    plugins: [],
    }
  

• postcss.config.js

    module.exports = {
        plugins: [
            require("postcss-import"),
            require("tailwindcss"),
            require("autoprefixer"),
        ],
    }
  

  或者是在package.json加入

  
  {
    ...
    ,
    "postcss": {
        "plugins": {
        "postcss-import": {},
        "tailwindcss": {},
        "autoprefixer": {}
        }
    }
  },
  
  

对应的脚本

"twwatch": "npx tailwindcss --postcss -i tailwind.css -o tailwinds.css --watch",
"twmin": "npx tailwindcss --postcss -i tailwind.css -o tailwinds.css --minify"

docs

引入 tw-element

• docs.vitepress\theme\index.ts

  引入组件

• docs.vitepress\vitepress\index.ts

  引入组件样式

警告

postcss.config.js与vitepress有冲突！

解决办法，先注释postcss.config.js中的require('tailwindcss'),，执行pnpm docs:dev后在取消注释。