feat: 更新相关的依赖和修复一些已知的问题

.husky/pre-commit

@@ -0,0 +1,7 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+[ -n "$CI" ] && exit 0
+
+# Format and submit code according to lintstagedrc.js configuration
+npm run lint:lint-staged

README.md

@@ -24,12 +24,12 @@ cd vue-h5-template
 
 npm install
 
-npm run serve
+npm run dev
 ```
 
 <span id="top">目录</span>
 
-- √ Vue-cli4
+- √ vite
 - [√ 配置多环境变量](#env)
 - [√ viewport 适配方案](#viewport)
 - [√ nutUI 组件按需加载](#nutUI)
@@ -37,8 +37,9 @@ npm run serve
 - [√ Vue-router4](#router)
 - [√ Axios 封装及接口管理](#axios)
 - [√ vite.config.ts 基础配置](#base)
-- [√ ts 支持](#alias)
-- [√ Eslint+Pettier+stylelint 统一开发规范 ](#pettier)
+- [√ alias](#alias)
+- [√ proxy 跨域](#proxy)
+- [√ Eslint+Pettier+stylelint 统一开发规范 ](#lint)
 
 ### <span id="env">✅ 配置多环境变量 </span>
 
@@ -62,9 +63,7 @@ npm run serve
 
 不用担心，项目已经配置好了 `viewport` 适配, 下面仅做介绍：
 
-Vant 中的样式默认使用`px`作为单位，如果需要使用`rem`单位，推荐使用以下两个工具:
-
-- [postcss-px-to-viewport-8-plugin](https://github.com/xian88888888/postcss-px-to-viewport-8-plugin) 是一款 `postcss` 插件，用于将单位转化为 `vw`
+- [postcss-px-to-viewport-8-plugin](https://github.com/xian88888888/postcss-px-to-viewport-8-plugin) 是一款 `postcss` 插件，用于将单位转化为 `vw`, 现在很多浏览器对`vw`的支持都很好。
 
 ##### PostCSS 配置
 
@@ -74,9 +73,6 @@ Vant 中的样式默认使用`px`作为单位，如果需要使用`rem`单位，
 // https://github.com/michael-ciniawsky/postcss-load-config
 module.exports = {
   plugins: {
-    autoprefixer: {
-      overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8'],
-    },
     'postcss-px-to-viewport-8-plugin': {
       unitToConvert: 'px', // 要转化的单位
       viewportWidth: 375, // UI设计稿的宽度
@@ -127,6 +123,7 @@ module.exports = {
     width: 750px;
     height: 1334px;
   }
+
   /* rootValue: 37.5 */
   .image {
     width: 375px;
@@ -337,7 +334,9 @@ export function getUserInfo(params) {
 // 请求接口
 import { getUserInfo } from '@/api/user.js';
 
-const params = { user: 'sunnie' };
+const params = {
+  user: 'sunnie',
+};
 getUserInfo(params)
   .then(() => {})
   .catch(() => {});
@@ -397,9 +396,21 @@ export default function ({ command }: ConfigEnv): UserConfigExport {
 
 ```javascript
 resolve: {
-    alias: {
-        '@': pathResolve('./src'),
+    alias: [{
+            find: 'vue-i18n',
+            replacement: 'vue-i18n/dist/vue-i18n.cjs.js',
         },
+        // /@/xxxx => src/xxxx
+        {
+            find: /\/@\//,
+            replacement: pathResolve('src') + '/',
+        },
+        // /#/xxxx => types/xxxx
+        {
+            find: /\/#\//,
+            replacement: pathResolve('types') + '/',
+        },
+    ],
 },
 ```
 
@@ -421,16 +432,18 @@ server: {
 
 [▲ 回顶部](#top)
 
-<h3>文档在拼命完善中。。。</h3>
+### <span id="lint">✅ Eslint+Pettier+stylelint 统一开发规范 </span>
+
+根目录下的`.eslintrc.js`、`.stylelint.config.js`、`.prettier.config.js`内置了 lint 规则，帮助你规范地开发代码，有助于提高团队的代码质量和协作性，可以根据团队的规则进行修改
 
 # 关于我
 
+扫描添加下方的微信并备注加交流群，交流学习，及时获取代码最新动态。
+
  <p>
   <img src="./public/account.jpg" width="256" style="display:inline; ">
 </p>
 
-扫描添加下方的微信并备注加交流群，交流学习，及时获取代码最新动态。
-
 <p>
   <img src="./public/group.png" width="256" style="display:inline; ">
 </p>

package.json

@@ -20,48 +20,51 @@
   },
   "dependencies": {
     "@nutui/nutui": "^3.1.20",
-    "@vueuse/core": "8.3.1",
-    "@vueuse/integrations": "8.3.1",
+    "@vueuse/core": "8.5.0",
+    "@vueuse/integrations": "8.5.0",
     "axios": "0.27.2",
-    "pinia": "^2.0.13",
+    "pinia": "^2.0.14",
     "universal-cookie": "^4.0.4",
-    "vant": "^3.4.8",
-    "vue": "^3.2.33",
-    "vue-i18n": "^9.1.9",
-    "vue-router": "^4.0.14"
+    "vant": "^3.4.9",
+    "vue": "^3.2.36",
+    "vue-i18n": "^9.1.10",
+    "vue-router": "^4.0.15"
   },
   "devDependencies": {
-    "@types/node": "^17.0.29",
-    "@typescript-eslint/eslint-plugin": "^5.21.0",
-    "@typescript-eslint/parser": "^5.21.0",
-    "@vitejs/plugin-legacy": "^1.8.1",
-    "@vitejs/plugin-vue": "^2.3.1",
+    "@types/node": "^17.0.35",
+    "@typescript-eslint/eslint-plugin": "^5.26.0",
+    "@typescript-eslint/parser": "^5.26.0",
+    "@vitejs/plugin-legacy": "^1.8.2",
+    "@vitejs/plugin-vue": "^2.3.3",
     "@vitejs/plugin-vue-jsx": "^1.3.10",
     "consola": "^2.15.3",
     "eruda": "^2.4.1",
-    "eslint": "^8.14.0",
+    "eslint": "^8.16.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-vue": "^8.7.1",
+    "eslint-plugin-vue": "^9.0.1",
     "husky": "7.0.4",
     "lint-staged": "12.4.1",
     "mockjs": "^1.1.0",
-    "postcss": "^8.4.12",
+    "postcss": "^8.4.14",
     "postcss-px-to-viewport-8-plugin": "^1.1.3",
+    "postcss-html": "^1.4.1",
+    "postcss-less": "^6.0.0",
     "prettier": "^2.6.2",
-    "stylelint": "^14.8.0",
+    "stylelint": "^14.8.5",
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-config-recommended": "^7.0.0",
     "stylelint-config-recommended-vue": "^1.4.0",
     "stylelint-config-standard": "^25.0.0",
     "stylelint-order": "^5.0.0",
-    "typescript": "^4.6.3",
-    "vite": "^2.9.6",
+    "typescript": "^4.7.2",
+    "vite": "^2.9.9",
     "vite-plugin-eruda": "^1.0.1",
     "vite-plugin-mock": "^2.9.6",
     "vite-plugin-style-import": "^2.0.0",
-    "vue-eslint-parser": "^8.3.0",
-    "vue-tsc": "^0.34.10"
+    "vue-eslint-parser": "^9.0.2",
+    "vue-tsc": "^0.34.16",
+    "yorkie": "^2.0.0"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [

src/api/index.ts

@@ -1,4 +1,4 @@
-import useAxiosApi from '@/utils/useAxiosApi';
+import useAxiosApi from '/@/utils/useAxiosApi';
 
 /**
  * 账号密码登录

src/i18n/index.ts

@@ -1,3 +1,4 @@
+import { AnyObject } from '#/global';
 import { createI18n } from 'vue-i18n';
 
 export function loadLang() {

src/main.ts

@@ -1,9 +1,9 @@
 import { createApp } from 'vue';
 import App from './App.vue';
 import { nutUiComponents } from './plugins/nutUI';
-import { i18n } from '@/i18n';
+import { i18n } from '/@/i18n';
 import router from './router';
-import { setupStore } from '@/store';
+import { setupStore } from '/@/store';
 import './assets/font/iconfont.css';
 import './assets/app.css';
 

src/router/index.ts

@@ -1,12 +1,12 @@
-import { createRouter, createWebHistory, Router } from 'vue-router';
+import { createRouter, createWebHashHistory, Router } from 'vue-router';
 import routes from './routes';
 
 const router: Router = createRouter({
-  history: createWebHistory(),
+  history: createWebHashHistory('/'),
   routes: routes,
 });
 
-router.beforeEach(async (to, from, next) => {
+router.beforeEach(async (_to, _from, next) => {
   next();
 });
 

src/router/routes.ts

@@ -3,12 +3,12 @@ const routes = [
     name: 'root',
     path: '/',
     redirect: '/home',
-    component: () => import('@/components/Basic/index.vue'),
+    component: () => import('/@/components/Basic/index.vue'),
     children: [
       {
         name: 'Home',
         path: 'home',
-        component: () => import('@/views/Home/index.vue'),
+        component: () => import('/@/views/Home/index.vue'),
         meta: {
           title: '',
           keepAlive: true,
@@ -17,7 +17,7 @@ const routes = [
       {
         name: 'List',
         path: 'list',
-        component: () => import('@/views/List/index.vue'),
+        component: () => import('/@/views/List/index.vue'),
         meta: {
           title: '',
           keepAlive: true,
@@ -26,7 +26,7 @@ const routes = [
       {
         name: 'Member',
         path: 'member',
-        component: () => import('@/views/Member/index.vue'),
+        component: () => import('/@/views/Member/index.vue'),
         meta: {
           title: '',
           keepAlive: true,
@@ -37,7 +37,7 @@ const routes = [
   {
     name: 'Login',
     path: '/login',
-    component: () => import('@/views/Login/index.vue'),
+    component: () => import('/@/views/Login/index.vue'),
     meta: {
       title: '',
       keepAlive: true,

src/store/modules/user.ts

@@ -1,4 +1,5 @@
-import { loginPassword } from '@/api';
+import { AnyObject } from '/#/global';
+import { loginPassword } from '/@/api';
 import { useCookies } from '@vueuse/integrations/useCookies';
 import { defineStore } from 'pinia';
 import { watch } from 'vue';

src/utils/index.ts

@@ -1,6 +1,4 @@
-/**
- * 类型检查
- */
+import { AnyObject } from '#/global';
 
 export function typeCheck(param: any) {
   return Object.prototype.toString.call(param);

src/views/home/index.vue

@@ -30,8 +30,8 @@
 
 <script lang="ts" setup>
   import { computed } from 'vue';
-  import { useUserStore } from '@/store/modules/user';
-  import { setLang } from '@/i18n';
+  import { useUserStore } from '/@/store/modules/user';
+  import { setLang } from '/@/i18n';
 
   const userStore = useUserStore();
   const getUserInfo = computed(() => {

src/views/login/index.vue

@@ -14,9 +14,9 @@
 </template>
 
 <script lang="ts" setup>
-  import router from '@/router';
-  import { ComponentInternalInstance, getCurrentInstance, reactive, ref } from 'vue';
-  import { useUserStore } from '@/store/modules/user';
+  import { router } from '/@/router';
+  import { reactive, ref } from 'vue';
+  import { useUserStore } from '/@/store/modules/user';
 
   const userStore = useUserStore();
   const formData = reactive({
@@ -24,7 +24,7 @@
     pwd: '',
   });
   const ruleForm = ref<any>(null);
-  const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+  // const { proxy } = getCurrentInstance() as ComponentInternalInstance;
   const submit = () => {
     ruleForm.value.validate().then(async ({ valid, errors }: any) => {
       if (valid) {

tsconfig.json

@@ -23,8 +23,8 @@
     "types": ["vite/client"],
     "removeComments": true,
     "paths": {
-      "@/*": ["src/*"],
-      "#/*": ["types/*"]
+      "/@/*": ["src/*"],
+      "/#/*": ["types/*"]
     }
   },
   "include": [

types/global.d.ts

@@ -87,7 +87,7 @@ declare global {
   }
 }
 
-interface AnyObject {
+export interface AnyObject {
   [key: string]: any;
 }
 

vite.config.ts

@@ -6,13 +6,35 @@ import { createStyleImportPlugin, NutuiResolve } from 'vite-plugin-style-import'
 import { viteMockServe } from 'vite-plugin-mock';
 import eruda from 'vite-plugin-eruda';
 
-const pathResolve = (dir: string) => resolve(__dirname, dir);
+const pathResolve = (dir: string) => {
+  return resolve(process.cwd(), '.', dir);
+};
 
 // https://vitejs.dev/config/
 export default function ({ command }: ConfigEnv): UserConfigExport {
   const isProduction = command === 'build';
+  const root = process.cwd();
   console.log(isProduction);
   return {
+    root,
+    resolve: {
+      alias: [
+        {
+          find: 'vue-i18n',
+          replacement: 'vue-i18n/dist/vue-i18n.cjs.js',
+        },
+        // /@/xxxx => src/xxxx
+        {
+          find: /\/@\//,
+          replacement: pathResolve('src') + '/',
+        },
+        // /#/xxxx => types/xxxx
+        {
+          find: /\/#\//,
+          replacement: pathResolve('types') + '/',
+        },
+      ],
+    },
     server: {
       host: '0.0.0.0',
     },
@@ -37,10 +59,5 @@ export default function ({ command }: ConfigEnv): UserConfigExport {
         },
       },
     },
-    resolve: {
-      alias: {
-        '@': pathResolve('./src'),
-      },
-    },
   };
 }