🐎 ci(tailwind): 配置项目tailwind功能

用于保证项目使用原子化组件库，提升开发效率
添加prettier用于配置项目格式化风格

.electron-vue/utils.js

@@ -1,21 +1,21 @@
 'use strict'
-const MiniCssPlugin = require('mini-css-extract-plugin');
+const MiniCssPlugin = require('mini-css-extract-plugin')
 const dotenv = require('dotenv')
-const { join } = require("path")
-const argv = require('minimist')(process.argv.slice(2));
+const { join, resolve } = require('path')
+const argv = require('minimist')(process.argv.slice(2))
 const rootResolve = (...pathSegments) => join(__dirname, '..', ...pathSegments)
 
 function getEnv() {
-    return argv['m']
+  return argv['m']
 }
 function getEnvPath() {
-    if (String(typeof getEnv()) === 'boolean' || String(typeof getEnv()) === 'undefined') {
-        return rootResolve('env/.env')
-    }
-    return rootResolve(`env/${getEnv()}.env`)
+  if (String(typeof getEnv()) === 'boolean' || String(typeof getEnv()) === 'undefined') {
+    return rootResolve('env/.env')
+  }
+  return rootResolve(`env/${getEnv()}.env`)
 }
 function getConfig() {
-    return dotenv.config({ path: getEnvPath() }).parsed
+  return dotenv.config({ path: getEnvPath() }).parsed
 }
 
 // 获取环境
@@ -24,78 +24,82 @@ exports.getEnv = getEnv()
 exports.getConfig = getConfig()
 
 exports.cssLoaders = function (options) {
-    options = options || {}
-    const esbuildCss = {
-        loader: 'esbuild-loader',
-        options: {
-            loader: 'css',
-            minify: options.minifyCss
-        }
-    }
-
-    const cssLoader = {
-        loader: 'css-loader',
-        options: {
-            sourceMap: options.sourceMap,
-            esModule: false
-        }
-    }
+  options = options || {}
+  const esbuildCss = {
+    loader: 'esbuild-loader',
+    options: {
+      loader: 'css',
+      minify: options.minifyCss,
+    },
+  }
 
-    const postcssLoader = {
-        loader: 'postcss-loader',
-        options: {
-            sourceMap: options.sourceMap
-        }
-    }
+  const cssLoader = {
+    loader: 'css-loader',
+    options: {
+      sourceMap: options.sourceMap,
+      esModule: false,
+    },
+  }
 
-    // 这里就是生成loader和其对应的配置
-    function generateLoaders(loader, loaderOptions) {
-        const loaders = [cssLoader, postcssLoader, esbuildCss]
+  const postcssLoader = {
+    loader: 'postcss-loader',
+    options: {
+      sourceMap: options.sourceMap,
+    },
+  }
 
-        if (loader) {
-            loaders.push({
-                loader: loader + '-loader',
-                options: Object.assign({}, loaderOptions, {
-                    sourceMap: options.sourceMap
-                })
-            })
-        }
+  // 这里就是生成loader和其对应的配置
+  function generateLoaders(loader, loaderOptions) {
+    const loaders = [cssLoader, postcssLoader, esbuildCss]
 
-        // 当配置信息中开启此项时，启用css分离压缩
-        // 这一项在生产环境时，是默认开启的
-        if (options.extract) {
-            return [MiniCssPlugin.loader].concat(loaders)
-        } else {
-            // 如果不开启则让vue-style-loader来处理
-            return ['vue-style-loader'].concat(loaders)
-        }
+    if (loader) {
+      loaders.push({
+        loader: loader + '-loader',
+        options: Object.assign({}, loaderOptions, {
+          sourceMap: options.sourceMap,
+        }),
+      })
     }
 
-    // https://vue-loader.vuejs.org/en/configurations/extract-css.html
-    return {
-        css: generateLoaders(),
-        postcss: generateLoaders(),
-        less: generateLoaders('less'),
-        sass: generateLoaders('sass', { indentedSyntax: true }),
-        scss: generateLoaders('sass'),
-        stylus: generateLoaders('stylus'),
-        styl: generateLoaders('stylus')
+    // 当配置信息中开启此项时，启用css分离压缩
+    // 这一项在生产环境时，是默认开启的
+    if (options.extract) {
+      return [MiniCssPlugin.loader].concat(loaders)
+    } else {
+      // 如果不开启则让vue-style-loader来处理
+      return ['vue-style-loader'].concat(loaders)
     }
+  }
+
+  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
+  return {
+    css: generateLoaders(),
+    postcss: generateLoaders(),
+    less: generateLoaders('less'),
+    sass: generateLoaders('sass', { indentedSyntax: true }),
+    scss: generateLoaders('sass', {
+      sassOptions: {
+        // 关键配置：添加 node_modules 到解析路径
+        includePaths: [resolve(__dirname, 'node_modules')],
+      },
+    }),
+    stylus: generateLoaders('stylus'),
+    styl: generateLoaders('stylus'),
+  }
 }
 
 // 根据上面的函数遍历出来的各个css预处理器的loader进行最后的拼装
 exports.styleLoaders = function (options) {
-    const output = []
-    const loaders = exports.cssLoaders(options)
+  const output = []
+  const loaders = exports.cssLoaders(options)
 
+  for (const extension in loaders) {
+    const loader = loaders[extension]
+    output.push({
+      test: new RegExp('\\.' + extension + '$'),
+      use: loader,
+    })
+  }
 
-    for (const extension in loaders) {
-        const loader = loaders[extension]
-        output.push({
-            test: new RegExp('\\.' + extension + '$'),
-            use: loader
-        })
-    }
-
-    return output
+  return output
 }

.postcssrc.js

@@ -1,5 +1,6 @@
 module.exports = {
   plugins: {
+    tailwindcss: {},
     autoprefixer: {},
-  }
-}
+  },
+}

.prettierrc.cjs

@@ -0,0 +1,19 @@
+// @see https://prettier.io/docs/en/options
+module.exports = {
+  singleQuote: true,
+  printWidth: 100,
+  tabWidth: 2,
+  useTabs: false,
+  semi: false,
+  trailingComma: "all",
+  endOfLine: "auto",
+  htmlWhitespaceSensitivity: "ignore",
+  overrides: [
+    {
+      files: "*.json",
+      options: {
+        trailingComma: "none",
+      },
+    },
+  ],
+}

package.json

@@ -139,6 +139,7 @@
     "sass-loader": "^13.3.2",
     "style-loader": "^3.3.3",
     "svg-sprite-loader": "^6.0.11",
+    "tailwindcss": "3",
     "terser-webpack-plugin": "^5.3.9",
     "vue": "^2.7.14",
     "vue-devtools": "^5.1.4",

src/renderer/main.js

@@ -8,7 +8,7 @@ import router from './router'
 import { usePermission } from './permission'
 import directive from './directive'
 // 分页组件
-import Pagination from "@/components/Pagination";
+import Pagination from '@/components/Pagination'
 // 打印插件
 import Print from 'vue-print-nb'
 // 引用element
@@ -19,12 +19,13 @@ import 'element-ui/lib/theme-chalk/index.css'
 import './error'
 import './icons'
 import '@/styles/index.scss'
+import '@/styles/main.css'
 import '@/styles/dark-mode.scss'
 import '@/styles/fuint.scss'
 
 // 引入 i18n 语言包
 import VueI18n from 'vue-i18n'
-import loadLanguage from "./i18n"
+import loadLanguage from './i18n'
 const languages = loadLanguage()
 const pinia = createPinia()
 
@@ -36,15 +37,15 @@ Vue.prototype.addDateRange = addDateRange
 Vue.prototype.parseTime = parseTime
 
 if (!process.env.IS_WEB) {
-   ipcRenderer.invoke("IsUseSysTitle").then(res => {
-     if (!res) {
-        require('@/styles/custom-title.scss')
-     }
-  });
+  ipcRenderer.invoke('IsUseSysTitle').then((res) => {
+    if (!res) {
+      require('@/styles/custom-title.scss')
+    }
+  })
 }
 Vue.use(PiniaVuePlugin) // 确保pinia在最先挂载
 Vue.use(directive)
-Vue.use(Print);
+Vue.use(Print)
 Vue.use(Router)
 // 创建 i18n
 Vue.use(VueI18n) // 新版本必须要这个，不知道为什么
@@ -54,9 +55,9 @@ usePermission() // 放在后面，确保加载顺序
 const i18n = new VueI18n({
   locale: 'zh-CN', // 设置默认语言
   messages: languages, // 设置语言包
-});
+})
 Vue.use(ElementUI, {
-  i18n: (key, value) => i18n.t(key, value)
+  i18n: (key, value) => i18n.t(key, value),
 })
 
 Vue.config.productionTip = false
@@ -68,4 +69,3 @@ new Vue({
   i18n,
   template: '<App/>',
 }).$mount('#app')
-

src/renderer/styles/main.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

tailwind.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  content: ["./src/renderer/**/*.{html,js,vue,ts,jsx,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}