升级UnoCSS和项目一些规范化的管理

whidy · Apr 25, 2023 · cb66dec · cb66dec
1 parent 539c931
commit cb66dec
Show file tree

Hide file tree

Showing 31 changed files with 247 additions and 258 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -3,3 +3,7 @@ dist
 pnpm-lock.yaml
 auto-imports.d.ts
 components.d.ts
+env.d.ts
+iconfont.js
+.DS_Store
+.history
diff --git a/.prettierrc b/.prettierrc
@@ -1,5 +1,3 @@
 {
-  "$schema": "http://json.schemastore.org/prettierrc",
-  "semi": false,
-  "singleQuote": true
+  "$schema": "http://json.schemastore.org/prettierrc"
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,11 +1,7 @@
 {
-  "eslint.validate": [
-    "vue",
-    "javascript",
-    "javascriptreact"
-  ],
+  "eslint.validate": ["vue", "javascript", "javascriptreact"],
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
   },
-  "editor.formatOnSave": false,
+  "editor.formatOnSave": false
 }
diff --git a/README.md b/README.md
@@ -1,19 +1,25 @@
 # UnoCSS Study Examples
 
-> 当前资料对应的UnoCSS版本为 `0.50.x` ，其他版本请参见 `package.json` 。
+> 当前资料对应的 UnoCSS 版本为 `0.51.x` ，其他版本请参见 `package.json` 。
 
-这是个人在研究学习UnoCSS过程中做的总结，也是作为公司内部培训分享用到的PPT相关演示，仅供学习参考。
+这是个人在研究学习 UnoCSS 过程中做的总结，也是作为公司内部培训分享用到的 PPT 相关演示，仅供学习参考。
 
 后期可能会整理成一份实践文档，发布出来。
 
 该项目由 `Vite` 、 `Element-Plus` 搭建，有兴趣也可以看看[Vite-Element-Plus-UnoCSS](https://github.com/whidy/Vite-Element-Plus-UnoCSS)。
 
-该项目适合搭建一个简单的**文档演示模板**站，我是通过Markdown来编写文档内容部分，并将结构完善，利于代码演示部分的展示，后面有空再优化整个模板的布局。
+该项目适合搭建一个简单的**文档演示模板**站，我是通过 Markdown 来编写文档内容部分，并将结构完善，利于代码演示部分的展示，后面有空再优化整个模板的布局。
 
 ## 其他
 
-### 关于markdown样式冲突问题
+### 关于 markdown 样式冲突问题
 
 问题已解决，请更新到[v0.15.0](https://github.com/antfu/vite-plugin-md/releases/tag/v0.15.0)
 
-~~因为我还没找到主题切换后， `vite-plugin-md` 插件自动注入的 `markdown样式` 覆盖了我原有的样式，导致的**代码块**颜色异常问题的方案，所以，如果本地预览想要看到较好的效果，你可能需要在安装依赖后尝试修改文件 `node_modules/vite-plugin-md/dist/index.js` 的 `6712` 行，删除该行的 `baseStyling` 。重启服务，查看效果。相关的issues：[May I disable baseStyling for a custom markdown style](https://github.com/antfu/vite-plugin-md/issues/92)~~
+~~因为我还没找到主题切换后， `vite-plugin-md` 插件自动注入的 `markdown样式` 覆盖了我原有的样式，导致的**代码块**颜色异常问题的方案，所以，如果本地预览想要看到较好的效果，你可能需要在安装依赖后尝试修改文件 `node_modules/vite-plugin-md/dist/index.js` 的 `6712` 行，删除该行的 `baseStyling` 。重启服务，查看效果。相关的 issues：[May I disable baseStyling for a custom markdown style](https://github.com/antfu/vite-plugin-md/issues/92)~~
+
+## 日志
+
+### 2023 年 04 月 25 日
+
+更新到 `0.51.8` ，新增了 `uno.config.ts` 文件，发现使用 `eslint` 进行自动 `fix` 时，会出现大量的空行，故引入 `prettier` ，双重处理。（当然务必注意eslint配置和prettier不要冲突！！！）
diff --git a/index.html b/index.html
@@ -1,25 +1,23 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>UnoCSS Study Examples</title>
+  </head>
 
-<head>
-  <meta charset="UTF-8" />
-  <link rel="icon" href="/favicon.ico" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>UnoCSS Study Examples</title>
-</head>
-
-<body>
-  <div id="app" h-full w-full absolute flex flex-col items-center></div>
-  <script type="module" src="/src/main.ts"></script>
-  <script>
-    var _hmt = _hmt || [];
-    (function () {
-      var hm = document.createElement("script");
-      hm.src = "https://hm.baidu.com/hm.js?267f2c7a87bfa240ffe0e2037c6f0e9a";
-      var s = document.getElementsByTagName("script")[0];
-      s.parentNode.insertBefore(hm, s);
-    })();
-  </script>
-</body>
-
+  <body>
+    <div id="app" h-full w-full absolute flex flex-col items-center></div>
+    <script type="module" src="/src/main.ts"></script>
+    <script>
+      var _hmt = _hmt || [];
+      (function () {
+        var hm = document.createElement("script");
+        hm.src = "https://hm.baidu.com/hm.js?267f2c7a87bfa240ffe0e2037c6f0e9a";
+        var s = document.getElementsByTagName("script")[0];
+        s.parentNode.insertBefore(hm, s);
+      })();
+    </script>
+  </body>
 </html>
diff --git a/package.json b/package.json
@@ -9,8 +9,9 @@
     "build": "pnpm run typecheck && vite build",
     "typecheck": "vue-tsc --noEmit",
     "preview": "vite preview",
+    "prettier": "prettier --config .prettierrc --write .",
     "lint": "eslint --ext .ts,vue --ignore-pattern '!.*ignore' .",
-    "lint:fix": "pnpm lint --fix"
+    "lint:fix": "pnpm lint --fix && pnpm prettier"
   },
   "dependencies": {
     "@vueuse/core": "^9.13.0",
@@ -36,6 +37,7 @@
     "eslint-define-config": "^1.19.0",
     "eslint-plugin-vue": "^9.11.0",
     "markdown-it-prism": "^2.3.0",
+    "prettier": "^2.8.8",
     "sass": "^1.62.0",
     "typescript": "^5.0.4",
     "unocss": "^0.51.8",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/App.vue b/src/App.vue
@@ -24,60 +24,52 @@ onMounted(() => {
 // });
 </script>
 <template>
-  <el-drawer
-    v-model="drawerStatus"
-    size="50%"
-    title="迷你菜单"
-    direction="ltr">
+  <el-drawer v-model="drawerStatus" size="50%" title="迷你菜单" direction="ltr">
     <VMenu
       menu-type="drawer"
       :status="drawerStatus"
-      @toggle-drawer="handleToggle()" />
+      @toggle-drawer="handleToggle()"
+    />
   </el-drawer>
   <el-container w-full flex>
     <el-header
       ref="header"
-      flex
-      text-base
+      z-5
       h-12
-      px-2
-      sm:px-4
-      shadow
+      flex
       items-center
       justify-between
-      z-5>
-      <div
-        flex
-        items-center
-        w-full
-        justify-start>
+      px-2
+      text-base
+      shadow
+      sm:px-4
+    >
+      <div w-full flex items-center justify-start>
         <div
           i-carbon-menu
-          sm:hidden
+          mr-2
           w-5
+          sm:hidden
           sm:w-6
-          mr-2
-          @click="handleToggle()"></div>
+          @click="handleToggle()"
+        ></div>
         <div m-0 truncate>UnoCSS技术分享代码演示和说明</div>
       </div>
       <!-- <div>{{ prefersDark }}</div> -->
-      <div class="flex w-1/6 justify-end">
-        <el-link
-          w-5
-          sm:w-6
-          i-mdi-theme-light-dark
-          @click="toggleDark()" />
+      <div class="w-1/6 flex justify-end">
+        <el-link i-mdi-theme-light-dark w-5 sm:w-6 @click="toggleDark()" />
         <el-link
-          w-5
-          sm:w-6
           i-mdi-github
           ml-3
+          w-5
+          sm:w-6
           href="https://github.com/whidy/UnoCSS-Study-Examples"
-          target="_blank" />
+          target="_blank"
+        />
       </div>
     </el-header>
     <el-container overflow-hidden>
-      <el-aside sm:w-40 sm:block hidden>
+      <el-aside hidden sm:block sm:w-40>
         <VMenu />
       </el-aside>
       <el-main p-0>

diff --git a/src/components/TheContentLayout.vue b/src/components/TheContentLayout.vue
@@ -1,20 +1,20 @@
 <template>
-  <div flex lg:flex-row flex-col>
-    <el-scrollbar shadow flex-1 z-1>
-      <slot name="content">
-        内容部分
-      </slot>
+  <div flex flex-col lg:flex-row class="split-container">
+    <el-scrollbar z-1 flex-1 shadow class="left-panel">
+      <slot name="content"> 内容部分 </slot>
     </el-scrollbar>
     <el-scrollbar
+      class="right-panel"
       :class="hasDemo ? '' : 'hidden'"
       h-64
+      bg-gray-600
+      lg:w-sm
       sm:h-auto
       sm:flex-1
       xl:flex-1
-      lg:w-sm
       lg:flex-initial
-      bg-gray-600>
-      <div lg:h-full p-4>
+    >
+      <div p-4 lg:h-full>
         <slot name="demo">
           <el-card>
             <template #header>演示效果</template>
@@ -31,11 +31,9 @@ const props = defineProps({
   hasDemo: {
     type: Boolean,
     default: true,
-  }
+  },
 });
 const hasDemo = props.hasDemo === undefined ? true : props.hasDemo;
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>
diff --git a/src/components/VMenu.vue b/src/components/VMenu.vue
@@ -2,9 +2,10 @@
   <el-menu
     :default-active="activedItem"
     :class="menuType === 'drawer' && 'p-0'"
-    border-0
     h-full
-    @select="handleSelect">
+    border-0
+    @select="handleSelect"
+  >
     <el-menu-item index="Intro">
       <span>前言</span>
     </el-menu-item>
@@ -42,12 +43,12 @@ const activedItem = ref(routeName);
 const props = defineProps({
   menuType: {
     type: String,
-    default: ""
+    default: "",
   },
   status: {
     type: Boolean,
-    default: false
-  }
+    default: false,
+  },
 });
 
 const emit = defineEmits(["toggleDrawer"]);
@@ -64,5 +65,4 @@ const handleSelect = (index: string) => {
 };
 </script>
 
-<style scoped>
-</style>
+<style scoped></style>
diff --git a/src/main.ts b/src/main.ts
@@ -2,7 +2,7 @@ import { createApp } from "vue";
 import { router } from "@/router";
 import App from "./App.vue";
 import "@unocss/reset/normalize.css";
-import "uno.css";
+import "virtual:uno.css";
 import "element-plus/theme-chalk/dark/css-vars.css";
 import "@/style/index.scss";
 import "@/style/github-markdown.css";