chore: 优化项目

README.md

@@ -1,6 +1,8 @@
 # vue-h5-template
 
-基于 vue3 + vite + （nutui or varlet or vant） + sass + viewport 适配方案 + axios 封装，构建手机端模板脚手架
+基于 vue3 + vite + （nutui or varlet or vant） + ts + sass + viewport 适配方案 + axios 封装，构建手机端模板脚手架
+
+如果你对 `ts` 没有要求，想用纯 `js` 进行开发, 可以[点这里](https://github.com/sunniejs/vue-h5-template/tree/vue-h5-template-lite)来获取vue-h5-template-lite
 
 如果你不熟悉 vue3，想继续使用 vue2 开发的，可以[点这里](https://github.com/sunniejs/vue-h5-template/tree/vue2-h5-template)来获取 vue2-h5-template
 

build/vite/plugins/autoImport.ts

@@ -4,7 +4,8 @@
  */
 
 import AutoImport from 'unplugin-auto-import/vite';
-import { VarletUIResolver, VantResolver } from 'unplugin-vue-components/resolvers';
+import { VarletImportResolver } from '@varlet/import-resolver';
+import { VantResolver } from '@vant/auto-import-resolver';
 
 export const ConfigAutoImportPlugin = () => {
   return AutoImport({
@@ -20,6 +21,6 @@ export const ConfigAutoImportPlugin = () => {
     eslintrc: {
       enabled: true,
     },
-    resolvers: [VarletUIResolver(), VantResolver()],
+    resolvers: [VarletImportResolver({ autoImport: true }), VantResolver()],
   });
 };

build/vite/plugins/component.ts

@@ -4,8 +4,10 @@
  */
 
 import Components from 'unplugin-vue-components/vite';
-import { VueUseComponentsResolver, VantResolver, VarletUIResolver } from 'unplugin-vue-components/resolvers';
+import { VueUseComponentsResolver } from 'unplugin-vue-components/resolvers';
 import NutUIResolver from '@nutui/auto-import-resolver';
+import { VarletImportResolver } from '@varlet/import-resolver';
+import { VantResolver } from '@vant/auto-import-resolver';
 
 export const ConfigAutoComponentsPlugin = () => {
   return Components({
@@ -18,6 +20,6 @@ export const ConfigAutoComponentsPlugin = () => {
     directives: true,
     include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
     exclude: [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/, /[\\/]\.nuxt[\\/]/],
-    resolvers: [VueUseComponentsResolver(), VantResolver(), VarletUIResolver(), NutUIResolver()],
+    resolvers: [VueUseComponentsResolver(), VantResolver(), VarletImportResolver(), NutUIResolver()],
   });
 };

build/vite/plugins/compress.ts

@@ -14,6 +14,4 @@ export const ConfigCompressPlugin = () => {
     algorithm: 'gzip', //压缩算法
     ext: '.gz', //文件类型
   });
-
-  return [];
 };

package.json

@@ -16,7 +16,7 @@
   "dependencies": {
     "@nutui/icons-vue": "^0.1.1",
     "@nutui/nutui": "^4.3.13",
-    "@varlet/ui": "^3.11.4",
+    "@varlet/ui": "^3.12.0",
     "@vueuse/core": "13.9.0",
     "@vueuse/integrations": "13.9.0",
     "axios": "1.12.2",
@@ -28,17 +28,19 @@
     "vant": "^4.9.19",
     "vue": "^3.5.22",
     "vue-i18n": "^11.1.12",
-    "vue-router": "^4.5.1"
+    "vue-router": "^4.6.3"
   },
   "devDependencies": {
-    "@commitlint/cli": "^20.0.0",
+    "@commitlint/cli": "^20.1.0",
     "@commitlint/config-conventional": "^20.0.0",
     "@nutui/auto-import-resolver": "^1.0.0",
     "@stylistic/stylelint-plugin": "^4.0.0",
     "@tsconfig/node22": "^22.0.2",
     "@types/jsdom": "^21.1.7",
-    "@types/node": "^22.18.0",
-    "@typescript-eslint/parser": "^8.44.1",
+    "@types/node": "^24.8.1",
+    "@typescript-eslint/parser": "^8.46.1",
+    "@vant/auto-import-resolver": "^1.3.0",
+    "@varlet/import-resolver": "^3.12.0",
     "@vitejs/plugin-basic-ssl": "^2.0.0",
     "@vitejs/plugin-legacy": "^7.2.1",
     "@vitejs/plugin-vue": "^6.0.1",
@@ -56,16 +58,16 @@
     "cz-git": "^1.11.1",
     "czg": "^1.11.1",
     "eruda": "^3.4.1",
-    "eslint": "^9.36.0",
+    "eslint": "^9.37.0",
     "eslint-define-config": "^2.1.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-simple-import-sort": "^12.1.1",
-    "eslint-plugin-vue": "^10.4.0",
+    "eslint-plugin-vue": "^10.5.1",
     "git-cz": "^4.9.0",
     "husky": "9.1.7",
     "jsdom": "^26.1.0",
-    "lint-staged": "16.2.1",
+    "lint-staged": "16.2.4",
     "mockjs": "^1.1.0",
     "node": "^22.18.0",
     "npm-run-all": "^4.1.5",
@@ -73,34 +75,34 @@
     "postcss-html": "1.8.0",
     "postcss-scss": "^4.0.9",
     "prettier": "^3.5.3",
-    "rollup-plugin-visualizer": "^6.0.3",
-    "stylelint": "^16.23.1",
-    "stylelint-config-recess-order": "^7.2.0",
+    "rollup-plugin-visualizer": "^6.0.5",
+    "stylelint": "^16.25.0",
+    "stylelint-config-recess-order": "^7.4.0",
     "stylelint-config-recommended": "^17.0.0",
     "stylelint-config-recommended-scss": "^16.0.0",
     "stylelint-config-recommended-vue": "^1.5.0",
-    "stylelint-config-standard": "^39.0.0",
+    "stylelint-config-standard": "^39.0.1",
     "stylelint-order": "^7.0.0",
     "stylelint-prettier": "^5.0.3",
     "stylelint-scss": "^6.11.0",
     "terser": "^5.19.0",
-    "typescript": "5.8.3",
+    "typescript": "5.9.3",
     "unplugin-auto-import": "^20.2.0",
     "unplugin-vue-components": "^29.1.0",
-    "vite": "^7.1.7",
+    "vite": "^7.1.10",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-imagemin": "^0.6.1",
     "vite-plugin-mock": "^3.0.2",
     "vite-plugin-pages": "^0.33.0",
     "vite-plugin-progress": "^0.0.7",
-    "vite-plugin-pwa": "^1.0.3",
+    "vite-plugin-pwa": "^1.1.0",
     "vite-plugin-qrcode": "^0.3.0",
     "vite-plugin-restart": "^1.0.0",
     "vite-plugin-svg-icons": "^2.0.1",
     "vite-plugin-vue-setup-extend-plus": "^0.1.0",
     "vitest": "^3.1.3",
     "vue-eslint-parser": "^10.1.3",
-    "vue-tsc": "^3.0.8"
+    "vue-tsc": "^3.1.1"
   },
   "engines": {
     "node": ">=20.10.0",

src/main.ts

@@ -5,6 +5,11 @@ import router from '@/router';
 import store from '@/store';
 import './assets/font/iconfont.css';
 
+import '@nutui/nutui/dist/packages/toast/style/css';
+import '@nutui/nutui/dist/packages/notify/style/css';
+import '@nutui/nutui/dist/packages/dialog/style/css';
+import '@nutui/nutui/dist/packages/imagepreview/style/css';
+
 const app = createApp(App);
 
 // 路由

src/styles/vant.scss

@@ -1,6 +1,5 @@
 :root {
   .van-popup {
     max-width: 750px;
-    background: transparent;
   }
 }

src/views/demo/index.vue

@@ -2,7 +2,7 @@
   <section>
     <span class="title">Varlet</span>
     <var-space :size="[10, 10]" class="space">
-      <var-button>默认按钮</var-button>
+      <var-button @click="showVarletToast">默认按钮(点我弹出通知)</var-button>
       <var-button type="primary">主要按钮</var-button>
       <var-button type="info">信息按钮</var-button>
       <var-button type="success">成功按钮</var-button>
@@ -13,7 +13,7 @@
   <section>
     <span class="title">Vant</span>
     <div class="demo">
-      <van-button type="primary">主要按钮</van-button>
+      <van-button type="primary" @click="showVantToast">主要按钮(点我弹出通知)</van-button>
       <van-button type="success">成功按钮</van-button>
       <van-button type="default">默认按钮</van-button>
       <van-button type="warning">警告按钮</van-button>
@@ -23,7 +23,7 @@
   <section>
     <span class="title">NutUI</span>
     <div class="demo">
-      <nut-button type="primary">主要按钮</nut-button>
+      <nut-button type="primary" @click="showNutToast">主要按钮(点我弹出通知)</nut-button>
       <nut-button type="info">信息按钮</nut-button>
       <nut-button type="default">默认按钮</nut-button>
       <nut-button type="danger">危险按钮</nut-button>
@@ -33,7 +33,25 @@
   </section>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+  import { showToast as NutToast } from '@nutui/nutui';
+
+  const showVarletToast = () => {
+    Snackbar({
+      content: '我是 varlet 通知',
+      duration: 1000,
+      position: 'center',
+    });
+  };
+
+  const showVantToast = () => {
+    showToast('我是 vant 通知');
+  };
+
+  const showNutToast = () => {
+    NutToast.text('我是 nut 通知');
+  };
+</script>
 
 <style lang="scss" scoped>
   section {

vite.config.mts

@@ -3,6 +3,8 @@ import type { ConfigEnv, UserConfig } from 'vite';
 import { loadEnv } from 'vite';
 import { wrapperEnv } from './build/utils';
 import { fileURLToPath, URL } from 'node:url';
+import { readdirSync, statSync } from 'node:fs';
+import { dirname } from 'node:path';
 
 // https://vitejs.dev/config/
 export default function ({ command, mode }: ConfigEnv): UserConfig {
@@ -11,6 +13,45 @@ export default function ({ command, mode }: ConfigEnv): UserConfig {
   const env = loadEnv(mode, root);
   const viteEnv = wrapperEnv(env);
 
+  const devOptimizeDepsInclude: Array<string> = ['eruda', 'vant/es,@varlet/ui'];
+  if (!isProduction) {
+    const excludedDirs = ['utils', 'style', 'composables'];
+    const __dirname = dirname(fileURLToPath(import.meta.url));
+
+    // 需要自动优化的 UI 库
+    const uiLibraries = [
+      { name: 'vant/es', path: 'node_modules/vant/es' },
+      { name: '@nutui/nutui/dist/packages', path: 'node_modules/@nutui/nutui/dist/packages' },
+      { name: '@varlet/ui/es', path: 'node_modules/@varlet/ui/es' },
+    ];
+
+    uiLibraries.forEach((lib) => {
+      try {
+        const dirNames = readdirSync(`${__dirname}/${lib.path}`);
+        dirNames
+          .filter((dirName) => {
+            const fullPath = `${__dirname}/${lib.path}/${dirName}`;
+            const isDir = statSync(fullPath).isDirectory();
+            const isExcluded = excludedDirs.includes(dirName);
+            return isDir && !isExcluded;
+          })
+          .forEach((dirName) => {
+            if (lib.name === '@nutui/nutui/dist/packages') {
+              if (dirName !== 'locale') {
+                devOptimizeDepsInclude.push(`${lib.name}/${dirName}/style/css`);
+              }
+            } else if (lib.name === 'vant/es') {
+              devOptimizeDepsInclude.push(`${lib.name}/${dirName}/style/index`);
+            } else {
+              devOptimizeDepsInclude.push(`${lib.name}/${dirName}/style/index.mjs`);
+            }
+          });
+      } catch (err) {
+        console.warn(`Failed to read directory for ${lib.name}: ${err}`);
+      }
+    });
+  }
+
   return {
     base: '/',
     root,
@@ -42,5 +83,8 @@ export default function ({ command, mode }: ConfigEnv): UserConfig {
         },
       },
     },
+    optimizeDeps: {
+      include: [...devOptimizeDepsInclude],
+    },
   };
 }