feat: add windicss

README.md

@@ -11,7 +11,6 @@
 + `eslint`: 检查语法规则和代码风格
 + `commitlint` & `husky`: 检查commit提交的信息
 + `rollup-plugin-visualizer`: 生成 report.html 以帮助分析包内容
-+ `tailwindcss`: 以配置好tailwindcss的方式，自动生成样式文件
 
 # Getting Started 
 

package.json

@@ -33,9 +33,9 @@
     "eslint-plugin-vue": "^8.2.0",
     "husky": "^7.0.4",
     "lint-staged": "^12.1.2",
-    "sass": "^1.44.0",
     "standard-version": "^9.3.2",
-    "tailwindcss": "^3.0.5"
+    "vite-plugin-windicss": "^1.6.1",
+    "windicss": "^3.4.0"
   },
   "lint-staged": {
     "*.{js,jsx,vue}": [

src/components/HelloWorld.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="hello-world">
+  <div class="hello-world text-center">
     <div>
       Hello: {{username}}
     </div>
@@ -42,9 +42,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss">
-  .hello-world {
-    text-align: center;
-  }
-</style>

src/main.js

@@ -1,11 +1,12 @@
+/* eslint-disable */
 import { createApp } from 'vue';
-
 import plugins from '@/plugins';
 import App from '@/App.vue';
 import router from '@/router';
 import { userAPI } from '@/api';
 import { checkRes } from '@/utils/helpers';
-import '@/assets/style/index.scss';
+import '@/assets/style/index.css';
+import 'virtual:windi.css';
 
 async function getUserInfo() {
   const userRes = await userAPI.info();

src/views/Sign.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="sign">
-    <div class="sign-content">
-      <div class="sign-title text-gray-800">
+  <div class="sign flex flex-col justify-center items-center h-full">
+    <div class="md:p-16 md:shadow">
+      <div class="text-center text-4xl">
         vite-element-template
       </div>
-      <el-form :hide-required-asterisk="true" label-position="left" class="sign-form" ref="form" :model="user" label-width="70px">
+      <el-form  class="my-8" :hide-required-asterisk="true" label-position="left" ref="form" :model="user" label-width="70px">
         <el-form-item prop="username" label="用户名" :rules="[RULES.username]">
           <el-input v-model="user.username"></el-input>
         </el-form-item>
@@ -15,13 +15,15 @@
           <el-input v-model="user.checkPassword"></el-input>
         </el-form-item>
       </el-form>
-      <div class="sign-operate" v-if="type === TYPE.signin">
-        <el-button type="primary" @click="signIn">登录</el-button>
-        <el-button @click="toSignUp">注册</el-button>
-      </div>
-      <div class="sign-operate" v-if="type === TYPE.signup">
-        <el-button type="primary" @click="signUp">注册</el-button>
-        <el-button @click="toSignIn">返回登录</el-button>
+      <div class="flex flex-col">
+        <template v-if="type === TYPE.signin">
+          <el-button class="sign-btn" type="primary" @click="signIn">登录</el-button>
+          <el-button class="sign-btn" @click="toSignUp">注册</el-button>
+        </template>
+        <template v-if="type === TYPE.signup">
+          <el-button class="sign-btn" type="primary" @click="signUp">注册</el-button>
+          <el-button class="sign-btn" @click="toSignIn">返回登录</el-button>
+        </template>
       </div>
     </div>
   </div>
@@ -94,32 +96,8 @@ export default {
 };
 </script>
 
-<style lang="scss">
-
-  .sign {
-    flex-direction: column;
-    @include fill-center;
-
-    .sign-content {
-      @media screen and (min-width: $xs-screen) {
-        padding: 4rem;
-        @include box-shadow;
-      }
-      .sign-title {
-        font-size: 2rem;
-        text-align: center;
-      }
-      .sign-form {
-        margin: 2rem 0;
-      }
-      .sign-operate {
-        display: flex;
-        flex-direction: column;
-        .el-button {
-          width: 100%;
-          margin: .5rem 0;
-        }
-      }
-    }
-  }
+<style scoped>
+.sign-btn {
+  @apply w-full my-2 !mx-0;
+}
 </style>

vite.config.js

@@ -1,6 +1,8 @@
 import path from 'path';
 import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import WindiCSS from 'vite-plugin-windicss';
 import { visualizer } from 'rollup-plugin-visualizer';
 import PACKAGE from './package.json';
 
@@ -14,20 +16,13 @@ visualizerPlugin.outputOptions = () => {
   console.info(`\nReport: file://${__dirname}/report/report.html\n`);
 };
 
-const plugins = [vue(), visualizerPlugin];
+const plugins = [WindiCSS(), vue(), visualizerPlugin];
 
 // https://vitejs.dev/config/
 export default defineConfig({
   server: {
     port: 8000,
   },
-  css: {
-    preprocessorOptions: {
-      scss: {
-        additionalData: '@use "@/assets/style/mixin.scss" as *;\n@use "@/assets/style/variable.scss" as *;',
-      },
-    },
-  },
   plugins,
   // @开头的路径，会导致vscode 无法语法提示,需配合jsconfig.json使用
   // 参考: https://code.visualstudio.com/docs/languages/jsconfig