diff --git a/.eslintrc.js b/.eslintrc.js index f7b53bf..419fded 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -15,7 +15,7 @@ module.exports = { jsx: true, }, }, - extends: ['plugin:vue/vue3-recommended', 'plugin:@typescript-eslint/recommended', 'plugin:prettier/recommended'], + extends: ['plugin:vue/vue3-recommended', 'plugin:@typescript-eslint/recommended', 'prettier', 'plugin:prettier/recommended'], rules: { 'vue/script-setup-uses-vars': 'error', '@typescript-eslint/ban-ts-ignore': 'off', diff --git a/README.md b/README.md index 53636da..f6f228c 100644 --- a/README.md +++ b/README.md @@ -34,10 +34,10 @@ yarn dev - [√ vite](#vite) - [√ 配置多环境变量](#env) - [√ viewport 适配方案](#viewport) -- [√ nutUI 组件按需加载](#nutUI) +- [√ 多 UI 组件库供选择](#ui) - [√ Pinia 状态管理](#Pinia) -- [√ Vue-router4](#router) -- [√ Axios 封装及接口管理](#axios) +- [√ vue-router 4](#router) +- [√ axios 封装及接口管理](#axios) - [√ vite.config.ts 基础配置](#base) - [√ alias](#alias) - [√ proxy 跨域](#proxy) @@ -154,31 +154,33 @@ module.exports = { [▲ 回顶部](#top) -### ✅ nutUI 组件按需加载 +### ✅ 多 UI 组件库供选择 -Vite 构建工具，使用 vite-plugin-style-import 实现按需引入。 +Vite 构建工具，使用 vite-plugin-style-import 和 unplugin-vue-components/vite 实现按需引入。 #### 安装插件 ```bash yarn add vite-plugin-style-import -D +yarn add unplugin-vue-components/vite -D ``` -在 `vite.config.ts` 设置 +#### 使用组件库 + +nutUI 没有按需加载的 resolvers，style 需要自己配置按需加载 + +在 `config/vite/plugins/styleImport.ts` 设置 ```javascript - plugins: [ - ... - createStyleImportPlugin({ - resolves: [NutuiResolve()], - }), - ... - ], + // 按需加载样式文件 + ... + createStyleImportPlugin({ + resolves: [NutuiResolve()], + }), + ... ``` -#### 使用组件 - -项目在 `plugins/nutUI.ts` 下统一管理组件，用哪个引入哪个，无需在页面里重复引用 +项目在 `src/plugins/nutUI.ts` 下统一管理组件，用哪个引入哪个，无需在页面里重复引用 ```javascript // 按需全局引入nutUI组件 @@ -192,6 +194,25 @@ nutUiComponents.forEach((item) => { }); ``` +vant 和 varlet 可以使用组件按需加载 + +在`config/vite/plugins/component.ts`下 + +```javascript +import { VueUseComponentsResolver, VantResolver, VarletUIResolver } from 'unplugin-vue-components/resolvers'; +... +resolvers: [VantResolver(), VarletUIResolver()], +... +``` + +#### 不需要某个组件库 + +nutUI 需删除`src/plugins/nutUI.ts`和`main.ts`文件下的引入 + +vant 和 varlet 只需删除对应的 resolvers 即可 + +删除后需全局搜索删除不需要的组件 + [▲ 回顶部](#top) ### ✅ Pinia 状态管理 diff --git a/config/vite/plugins/autoImport.ts b/config/vite/plugins/autoImport.ts index c55553e..dd4dace 100644 --- a/config/vite/plugins/autoImport.ts +++ b/config/vite/plugins/autoImport.ts @@ -2,6 +2,7 @@ * @name AutoImportDeps * @description 按需加载，自动引入 */ + import AutoImport from 'unplugin-auto-import/vite'; import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'; diff --git a/config/vite/plugins/component.ts b/config/vite/plugins/component.ts index 8a868e8..6d94505 100644 --- a/config/vite/plugins/component.ts +++ b/config/vite/plugins/component.ts @@ -2,8 +2,9 @@ * @name AutoRegistryComponents * @description 按需加载，自动引入组件 */ + import Components from 'unplugin-vue-components/vite'; -import { VueUseComponentsResolver, VantResolver } from 'unplugin-vue-components/resolvers'; +import { VueUseComponentsResolver, VantResolver, VarletUIResolver } from 'unplugin-vue-components/resolvers'; export const AutoRegistryComponents = () => { return Components({ // dirs: ['src/components'], @@ -15,6 +16,6 @@ export const AutoRegistryComponents = () => { directives: true, include: [/\.vue$/, /\.vue\?vue/, /\.md$/], exclude: [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/, /[\\/]\.nuxt[\\/]/], - resolvers: [VueUseComponentsResolver(), VantResolver()], + resolvers: [VueUseComponentsResolver(), VantResolver(), VarletUIResolver()], }); }; diff --git a/config/vite/plugins/compress.ts b/config/vite/plugins/compress.ts index 2914287..f75c0c2 100644 --- a/config/vite/plugins/compress.ts +++ b/config/vite/plugins/compress.ts @@ -2,6 +2,7 @@ * @name ConfigCompressPlugin * @description 开启.gz压缩 */ + import viteCompression from 'vite-plugin-compression'; export const ConfigCompressPlugin = () => { diff --git a/config/vite/plugins/eruda.ts b/config/vite/plugins/eruda.ts index 541680c..276d90f 100644 --- a/config/vite/plugins/eruda.ts +++ b/config/vite/plugins/eruda.ts @@ -2,6 +2,7 @@ * @name ConfigEruda * @description 控制台，方便移动端调试 */ + import eruda from 'vite-plugin-eruda'; export const ConfigEruda = () => { diff --git a/config/vite/plugins/imagemin.ts b/config/vite/plugins/imagemin.ts index a05ef85..7e15d68 100644 --- a/config/vite/plugins/imagemin.ts +++ b/config/vite/plugins/imagemin.ts @@ -2,6 +2,7 @@ * @name ConfigImageminPlugin * @description 图片压缩 */ + import viteImagemin from 'vite-plugin-imagemin'; export function ConfigImageminPlugin() { diff --git a/config/vite/plugins/index.ts b/config/vite/plugins/index.ts index 6d51bd3..3d6aac0 100644 --- a/config/vite/plugins/index.ts +++ b/config/vite/plugins/index.ts @@ -2,6 +2,7 @@ * @name createVitePlugins * @description 封装plugins数组统一调用 */ + import type { Plugin } from 'vite'; import vue from '@vitejs/plugin-vue'; import vueJsx from '@vitejs/plugin-vue-jsx'; diff --git a/config/vite/plugins/mock.ts b/config/vite/plugins/mock.ts index a768bc3..65dfd2b 100644 --- a/config/vite/plugins/mock.ts +++ b/config/vite/plugins/mock.ts @@ -2,6 +2,7 @@ * @name ConfigMockPlugin * @description 引入mockjs，本地模拟接口 */ + import { viteMockServe } from 'vite-plugin-mock'; export const ConfigMockPlugin = (isBuild: boolean) => { return viteMockServe({ diff --git a/config/vite/plugins/pages.ts b/config/vite/plugins/pages.ts index 32ec068..1abb143 100644 --- a/config/vite/plugins/pages.ts +++ b/config/vite/plugins/pages.ts @@ -2,6 +2,7 @@ * @name ConfigPagesPlugin * @description 动态生成路由 */ + import Pages from 'vite-plugin-pages'; export const ConfigPagesPlugin = () => { return Pages({ diff --git a/config/vite/plugins/restart.ts b/config/vite/plugins/restart.ts index 37ea17f..5b1aa3a 100644 --- a/config/vite/plugins/restart.ts +++ b/config/vite/plugins/restart.ts @@ -2,6 +2,7 @@ * @name ConfigRestartPlugin * @description 监听配置文件修改自动重启Vite */ + import ViteRestart from 'vite-plugin-restart'; export const ConfigRestartPlugin = () => { return ViteRestart({ diff --git a/config/vite/plugins/styleImport.ts b/config/vite/plugins/styleImport.ts index eee1bb5..279a7f7 100644 --- a/config/vite/plugins/styleImport.ts +++ b/config/vite/plugins/styleImport.ts @@ -2,10 +2,11 @@ * @name ConfigRestartPlugin * @description 按需引入样式文件 */ -import { createStyleImportPlugin, NutuiResolve, VantResolve } from 'vite-plugin-style-import'; + +import { createStyleImportPlugin, NutuiResolve } from 'vite-plugin-style-import'; export const ConfigStyleImport = () => { return createStyleImportPlugin({ - resolves: [NutuiResolve(), VantResolve()], + resolves: [NutuiResolve()], }); }; diff --git a/config/vite/plugins/svgIcons.ts b/config/vite/plugins/svgIcons.ts index 0e92c0a..6a0f3be 100644 --- a/config/vite/plugins/svgIcons.ts +++ b/config/vite/plugins/svgIcons.ts @@ -2,6 +2,7 @@ * @name SvgIconsPlugin * @description 加载SVG文件，自动引入 */ + import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'; import path from 'path'; diff --git a/config/vite/plugins/visualizer.ts b/config/vite/plugins/visualizer.ts index 8becd99..6e5afd2 100644 --- a/config/vite/plugins/visualizer.ts +++ b/config/vite/plugins/visualizer.ts @@ -1,3 +1,8 @@ +/** + * @name ConfigVisualizerConfig + * @description 打包体积分析 + */ + import visualizer from 'rollup-plugin-visualizer'; import { IsReport } from '../../constant'; diff --git a/index.html b/index.html index 77290de..728895a 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,7 @@ name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,viewport-fit=cover" /> + Vite App @@ -31,7 +32,7 @@ lastTouchEnd = now; }, - false + false, ); document.addEventListener('gesturestart', function (event) { diff --git a/package.json b/package.json index 6fca3db..ed4ff41 100644 --- a/package.json +++ b/package.json @@ -17,23 +17,27 @@ }, "dependencies": { "@nutui/nutui": "^3.1.22", - "@vueuse/core": "8.9.1", - "@vueuse/integrations": "8.9.1", + "@varlet/ui": "^1.27.17", + "@vueuse/core": "8.9.2", + "@vueuse/integrations": "8.9.2", "axios": "0.27.2", - "pinia": "^2.0.14", + "pinia": "^2.0.16", "universal-cookie": "^4.0.4", "vant": "^3.5.2", "vue": "^3.2.36", "vue-i18n": "^9.1.10", - "vue-router": "^4.1.1" + "vue-router": "^4.1.2" }, "devDependencies": { "@types/node": "^17.0.42", - "@typescript-eslint/eslint-plugin": "^5.30.5", - "@typescript-eslint/parser": "^5.30.5", - "@vitejs/plugin-legacy": "^1.8.2", - "@vitejs/plugin-vue": "^2.3.3", - "@vitejs/plugin-vue-jsx": "^1.3.10", + "@typescript-eslint/eslint-plugin": "^5.30.6", + "@typescript-eslint/parser": "^5.30.6", + "@vitejs/plugin-legacy": "^2.0.0", + "@vitejs/plugin-vue": "^3.0.0", + "@vitejs/plugin-vue-jsx": "^2.0.0", + "amfe-flexible": "^2.2.1", + "autoprefixer": "^10.4.7", + "cnjm-postcss-px-to-viewport": "^1.0.0", "consola": "^2.15.3", "cross-env": "^7.0.3", "eruda": "^2.5.0", @@ -47,7 +51,6 @@ "postcss": "^8.4.14", "postcss-html": "1.5.0", "postcss-less": "^6.0.0", - "postcss-px-to-viewport-8-plugin": "^1.1.3", "prettier": "^2.7.1", "rollup-plugin-visualizer": "^5.6.0", "stylelint": "^14.9.1", @@ -57,21 +60,21 @@ "stylelint-config-standard": "^26.0.0", "stylelint-order": "^5.0.0", "typescript": "^4.6.3", - "unplugin-auto-import": "^0.9.2", + "unplugin-auto-import": "^0.9.3", "unplugin-vue-components": "^0.21.1", - "vite": "^2.9.14", + "vite": "^3.0.0", "vite-plugin-compression": "^0.5.1", "vite-plugin-eruda": "^1.0.1", "vite-plugin-imagemin": "^0.6.1", "vite-plugin-mock": "^2.9.6", "vite-plugin-pages": "^0.25.0", "vite-plugin-progress": "^0.0.3", - "vite-plugin-restart": "^0.1.1", + "vite-plugin-restart": "^0.2.0", "vite-plugin-style-import": "^2.0.0", "vite-plugin-svg-icons": "^2.0.1", "vite-plugin-vue-setup-extend": "^0.4.0", "vue-eslint-parser": "^9.0.3", - "vue-tsc": "^0.38.2" + "vue-tsc": "^0.38.5" }, "husky": { "hooks": { diff --git a/postcss.config.js b/postcss.config.js index 8796532..f002247 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,8 +1,16 @@ +const path = require('path'); + +const judgeComponent = (file) => { + const ignore = ['vant', '@nutui', '@varlet']; + return ignore.some((item) => path.join(file).includes(path.join('node_modules', item))); +}; + module.exports = { plugins: { - 'postcss-px-to-viewport-8-plugin': { + autoprefixer: { overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8'] }, + 'cnjm-postcss-px-to-viewport': { unitToConvert: 'px', // 要转化的单位 - viewportWidth: 375, // UI设计稿的宽度 + viewportWidth: 750, // UI设计稿的宽度 unitPrecision: 6, // 转换后的精度，即小数点位数 propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换 viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw @@ -10,7 +18,13 @@ module.exports = { minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换 mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false replace: true, // 是否转换后直接更换属性值 - exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配 + include: [], + exclude: [], // 设置忽略文件，用正则做目录名匹配 + customFun: ({ file }) => { + // 这个自定义的方法是针对处理vant组件下的设计稿为375问题 + const designWidth = judgeComponent(file) ? 375 : 750; + return designWidth; + }, }, }, }; diff --git a/src/i18n/lang/en-us.ts b/src/i18n/lang/en-us.ts index d53edc7..f343636 100644 --- a/src/i18n/lang/en-us.ts +++ b/src/i18n/lang/en-us.ts @@ -1,12 +1,17 @@ export const lang = { + title: 'VUE H5 development template', tabbar: { home: 'Home', list: 'List', member: 'Member', + demo: 'demo', }, language: { en: 'English', zh: 'Chinese', }, introduction: 'A rapid development vue3 of mobile terminal template', + home: { + support: 'support', + }, }; diff --git a/src/i18n/lang/zh-cn.ts b/src/i18n/lang/zh-cn.ts index 87306f4..63404a3 100644 --- a/src/i18n/lang/zh-cn.ts +++ b/src/i18n/lang/zh-cn.ts @@ -1,8 +1,10 @@ export const lang = { + title: 'VUE H5开发模板', tabbar: { home: '首页', list: '列表', member: '我的', + demo: '示例', }, language: { en: '英文', diff --git a/src/layout/basic/index.vue b/src/layout/basic/index.vue index 55f6507..699ccd0 100644 --- a/src/layout/basic/index.vue +++ b/src/layout/basic/index.vue @@ -1,15 +1,22 @@ @@ -29,13 +36,21 @@ case 2: router.push('/member'); break; + case 3: + router.push('/demo'); } }; diff --git a/src/views/home/index.vue b/src/views/home/index.vue index 8b7073e..229d56f 100644 --- a/src/views/home/index.vue +++ b/src/views/home/index.vue @@ -1,20 +1,15 @@