1

npm install element-plus @element-plus/icons-vue

1

yarn add element-plus @element-plus/icons-vue

1
2
3
4
5
6
7
8
9

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

1

npm install unplugin-vue-components unplugin-auto-import --save-dev

1

yarn add unplugin-vue-components unplugin-auto-import --dev

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()]
    }),
    Components({
      resolvers: [ElementPlusResolver()]
    })
  ]
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

@forward "element-plus/theme-chalk/src/common/var.scss" with (  
  $colors: (  
    "primary": (  
      "base": #2c82ff,  
    ),  
    "success": (  
      "base": #00d68f,  
    ),  
    "warning": (  
      "base": #ffaa00,  
    ),  
    "danger": (  
      "base": #ff4961,  
    ),  
    "info": (  
      "base": #9915c2,  
    ),  
  )
);

@import "element-plus/theme-chalk/src/index.scss";

1

import './assets/scss/custom-theme.scss';

1
2
3
4
5
6
7
8
9

<template>
  <el-container>
    <el-header>Header</el-header>
    <el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-main>Main</el-main>
    </el-container>
  </el-container>
</template>

1
2
3
4
5
6
7
8

<el-menu default-active="2" class="el-menu-vertical-demo">
  <el-menu-item index="1">处理中心</el-menu-item>
  <el-sub-menu index="2">
    <template #title>我的工作台</template>
    <el-menu-item index="2-1">选项1</el-menu-item>
    <el-menu-item index="2-2">选项2</el-menu-item>
  </el-sub-menu>
</el-menu>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<el-table :data="tableData" style="width: 100%">
  <el-table-column prop="date" label="日期" width="150"></el-table-column>
  <el-table-column prop="name" label="姓名" width="200"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
</el-table>
<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="currentPage"
  :page-sizes="[10, 20, 30, 40]"
  :page-size="pageSize"
  layout="total, sizes, prev, pager, next, jumper"
  :total="400"
></el-pagination>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

@Route(value = "path", layout = MainView.class)
@PageTitle("路径规划")
public class PathView extends VerticalLayout {

    @Autowired
    private PathService pathService;

    public PathView() {
        TextField start = new TextField();
        TextField end = new TextField();
        HorizontalLayout path = new HorizontalLayout();
        path.add(start, end);
        Button pathCalculate = new Button("calculate path");

        VerticalLayout result = new VerticalLayout();
        TextField transferNum = new TextField();
        TextField distance = new TextField();
        Text stations = new Text("");
        result.add(
                new H3("换乘数: "),
                transferNum,
                new H3("总距离 :"),
                distance,
                new H3("途径站点详情:"),
                stations
        );

        pathCalculate.addClickListener(click -> {
            PathInfoVO pathResult = pathService.getPath(start.getValue(), end.getValue());
            System.out.println(pathResult);
            stations.setText(StringUtils.join(pathResult.getDetail(), ","));
            transferNum.setValue(String.valueOf(pathResult.getTransferNum()));
            distance.setValue(String.valueOf(pathResult.getDistance()));
        });

        add(
                new Text("hello world"),
                path,
                pathCalculate,
                result
        );
    }
}

1
2
3
4
5

self.__next['$1024'] = {
  type: 'p',
  props: null,
  children: "Hello world!",
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

// server端
import { cookies } from 'next/headers';

export const nextFetchGet = async (api: string) => {
  const nextCookies = cookies();
  const token = nextCookies.get('token') || '';
  const role = nextCookies.get('role');
  const roleId = nextCookies.get('roleId');
  const url =
    `${process.env.BASE_FETCH_URL}/api/be${api}`;
  const res = await fetch(url, {
    headers: token ? { Authorization: 'Bearer ' + token } : {}
  });
  if (!res.ok) {
    throw new Error('Failed to fetch data');
  }
  return res.json();
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120

// client端参考
import { getCookie } from './cookie';
import { getApiUrl } from './helpers';

interface RequestOptions extends RequestInit {
  responseType?:
    | 'TEXT'
    | 'JSON'
    | 'BLOB'
    | 'ARRAYBUFFER'
    | 'text'
    | 'json'
    | 'blob'
    | 'arraybuffer';
  body?: any;
}

// 发送数据请求
const request = async (url: string, config?: RequestOptions) => {
  const finalUrl: string = getApiUrl(url);

  const inital: RequestOptions = {
    method: 'GET',
    body: null,
    headers: {
      'Content-Type': 'application/json',
      Authorization: getCookie('token') ? 'Bearer ' + getCookie('token') : ''
    },
    credentials: 'include',
    cache: 'no-cache',
    mode: 'cors',
    responseType: 'JSON'
  };

  const configs: RequestOptions = {
    ...inital,
    ...config
  };
  if (config && config.headers)
    configs.headers = {
      ...inital.headers,
      Authorization: getCookie('token') ? 'Bearer ' + getCookie('token') : '',
      ...config.headers
    };

  // 基于fetch请求数据
  const finalConfig: RequestInit = {
    method: configs.method?.toUpperCase(),
    credentials: configs.credentials,
    mode: configs.mode,
    cache: configs.cache,
    headers: configs.headers,
    body: configs.body
  };

  return fetch(`${finalUrl}`, finalConfig)
    .then((response: Response) => {
      // 走到这边不一定是成功的：
      // Fetch的特点的是，只要服务器有返回结果，不论状态码是多少，它都认为是成功
      const { status } = response;

      if (status >= 200 && status < 400) {
        // 真正成功获取数据
        let result: any;
        switch (configs.responseType && configs.responseType.toUpperCase()) {
          case 'TEXT':
            result = response.text();
            break;
          case 'JSON':
            result = response.json();
            break;
          case 'BLOB':
            result = response.blob();
            break;
          case 'ARRAYBUFFER':
            result = response.arrayBuffer();
            break;
          default:
            result = response.json();
        }
        return result;
      }
      // 失败的处理
      return Promise.reject(response);
    })
    .catch((reason: any) => {
      // @2:断网
      if (typeof window !== 'undefined' && navigator && !navigator.onLine) {
        console.log('Your network is break!');
      }
      // @1:状态码失败
      if (reason && reason.status) {
        switch (reason.status) {
          case 400:
            console.log('Please verify your info!');
            break;
          case 401:
            console.log('Please Login!');
            break;
          case 403:
            console.log('You have no access to this');
            break;
          case 500:
            console.log("Oops, there's something wrong!");
            break;
          case 504:
            console.log("Oops, there's something wrong!");
            break;
          default:
        }
      } else {
        // @3:处理返回数据格式失败
        console.log("Oops, there's something wrong!");
      }

      return Promise.reject(reason);
    });
};

export default request;

1
2
3
4
5
6
7
8
9
10
11
12

const nextConfig = {
  rewrites: () => {
    return [
      {
        // 注意，加了一个be/，为什么？为了区分我们项目写的接口，避免被代理进去了。我们只需要代理外部的接口
        // Note that a be/ is added, why? In order to distinguish the interface written by our project, avoid being proxied. We only need to proxy the external interface
        source: '/api/be/:slug*',
        destination: `${process.env.BACKEND_URL}/api/:slug*`
      }
    ];
  }
};

1

pnpm add @formatjs/intl-localematcher negotiator

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

import { i18n } from '@/i18n/config';

import { match as matchLocale } from '@formatjs/intl-localematcher';
import Negotiator from 'negotiator';

function getLocale(request: NextRequest): string | undefined {
  // Negotiator expects plain object so we need to transform headers
  const negotiatorHeaders: Record<string, string> = {};
  request.headers.forEach((value, key) => (negotiatorHeaders[key] = value));

  // Use negotiator and intl-localematcher to get best locale
  const languages = new Negotiator({ headers: negotiatorHeaders }).languages();
  const locales: string[] = i18n.locales as unknown as string[];
  return matchLocale(languages, locales, i18n.defaultLocale);
}

export function middleware(request: NextRequest) {
  const pathname = request.nextUrl.pathname;

  // Check if there is any supported locale in the pathname
  const pathnameIsMissingLocale = i18n.locales.every(
    (locale) => !pathname.startsWith(`/${locale}/`) && pathname !== `/${locale}`
  );

  // Redirect if there is no locale
  if (pathnameIsMissingLocale) {
    const locale = getLocale(request);

    // e.g. incoming request is /products
    // The new URL is now /en-US/products
    return NextResponse.redirect(
      new URL(`/${locale}${pathname === '' ? '/' : pathname}`, request.url)
    );
  }
}

export const config = {
  // 2023-8-28 update
  matcher: '/((?!api|static|.*\\..*|_next).*)'
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

// getDictionary.ts
import 'server-only';
import type { Locale } from './config';
import enJson from '@/i18n/locales/en.json' assert { type: 'json' };
import zhCNJson from '@/i18n/locales/zh-CN.json' assert { type: 'json' };

// We enumerate all dictionaries here for better linting and typescript support
// We also get the default import for cleaner types
const dictionaries = {
  en: () => enJson,
  'zh-CN': () => zhCNJson
  // https://github.com/vercel/next.js/issues/47595
  // en: () =>
  // import('@/i18n/locales/en.json', { assert: { type: 'json' } }).then(
  //   (module) => module.default
  // ),
  // 'zh-CN': () =>
  //   import('@/i18n/locales/zh-CN.json', { assert: { type: 'json' } }).then(
  //     (module) => module.default
  //   )
};

export const getDictionary = async (locale: Locale) => dictionaries[locale]();

1
2
3
4
5
6
7
8

// config.ts
export const i18n = {
  defaultLocale: 'en',
  locales: ['en', 'zh-CN']
} as const;

export type Locale = (typeof i18n)['locales'][number];

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// next.config.js
// eslint-disable-next-line @typescript-eslint/no-var-requires
const withPWA = require('@ducanh2912/next-pwa').default({
  dest: 'public',
  cacheOnFrontEndNav: true,
  aggressiveFrontEndNavCaching: true
});

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
};

module.exports = withPWA(nextConfig);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

import { Metadata } from 'next';

export async function generateMetadata(): Promise<Metadata> {
  return {
    ...DefaultMetadata,
    title: 'Create Next App',
    description: 'Generated by create next app',
    applicationName: 'vadxq',
    manifest: '/mainfest.json',
    themeColor: '#FFFFFF',
    appleWebApp: {
      capable: true,
      statusBarStyle: 'default',
      title: 'vadxq'
    },
    formatDetection: {
      telephone: false
    },
    icons: {
      shortcut: '/favicon.ico',
      apple: [{ url: '/favicon.ico', sizes: '180x180' }]
    }
  };
}

1
2
3

public/sw.js
public/swe-worker-*
public/workbox-*

1
2
3
4
5
6
7
8

// state.ts
'use client';

import { createContext } from 'react';

const StartRouterChangeContext = createContext<() => void>(() => {});

export default StartRouterChangeContext;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

// link.tsx
'use client';

import Link from 'next/link';
import { useContext } from 'react';
import StartRouterChange from './state';

export default function LayoutLink({
  href,
  style,
  children,
  className
}: React.ComponentProps<'a'>) {
  const startChange = useContext(StartRouterChange);
  const useLink = href && href.startsWith('/');
  if (useLink)
    return (
      <Link
        href={href}
        className={className}
        onClick={() => {
          const { pathname, search, hash } = window.location;
          if (href !== pathname + search + hash) startChange();
        }}
        style={style}
      >
        {children}
      </Link>
    );
  return (
    <a href={href} style={style} className={className}>
      {children}
    </a>
  );
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

// index.tsx
'use client';

import { useCallback, useEffect, useState } from 'react';
import { usePathname, useSearchParams } from 'next/navigation';
import NProgress from 'nprogress';
import StartRouterChangeContext from './state';

function RouterEventWrapper({
  onStart = () => null,
  onComplete = () => null,
  children
}: React.PropsWithChildren<{ onStart?: () => void; onComplete?: () => void }>) {
  const [isChanging, setIsChanging] = useState(false);
  const pathname = usePathname();
  const searchParams = useSearchParams();
  useEffect(() => setIsChanging(false), [pathname, searchParams]);

  useEffect(() => {
    if (isChanging) onStart();
    else onComplete();
  }, [isChanging]);

  return (
    <StartRouterChangeContext.Provider value={() => setIsChanging(true)}>
      {children}
    </StartRouterChangeContext.Provider>
  );
}

export default function RootLayout({ children }: React.PropsWithChildren) {
  const onStart = useCallback(() => NProgress.start(), []);
  const onComplete = useCallback(() => NProgress.done(), []);
  return (
    <RouterEventWrapper onStart={onStart} onComplete={onComplete}>
      {children}
    </RouterEventWrapper>
  );
}

1
2

pnpm add @prisma/client
pnpm add -D prisma

1
2
3
4

"script": {
  "prisma:push": "npx prisma db push",
  "prisma:generate": "npx prisma generate",
}

1
2
3

experimental: {
  serverComponentsExternalPackages: ['@prisma/client'] // prisma support
},

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// prisma/index.ts
import { PrismaClient } from '@prisma/client';

// PrismaClient is attached to the `global` object in development to prevent
// exhausting your database connection limit.
//
// Learn more:
// https://pris.ly/d/help/next-js-best-practices

const globalForPrisma = global as unknown as { prisma: PrismaClient };

export const prisma = globalForPrisma.prisma || new PrismaClient();

if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma;

export default prisma;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

// prisma/schema.prisma
// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "mysql"
  url      = env("DATABASE_URL")
}

model Post {
  id        String      @id @default(cuid())
  title     String
  content   String?     @db.LongText
  published Boolean     @default(false)
  comments  Comment[]
  @@map(name: "posts")
}

model Comment {
  id        String      @id @default(cuid())
  content   String?
  post      Post?       @relation(fields: [postId], references: [id])
  postId    String?
  published Boolean     @default(false)
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

# VERCEL_ORG_ID就是vercel的组织ID，VERCEL_PROJECT_ID就是vercel的这个项目的ID，VERCEL_TOKEN就是Vercel的api token
name: Production Deployment

env:
  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}

on:
  push:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2
      - name: Install Vercel CLI
        run: npm install --global vercel@canary
      - uses: pnpm/action-setup@v2
        with:
          version: latest
      - uses: actions/setup-node@v3
        with:
          node-version: 18
          cache: 'pnpm'
      - name: Pull Vercel Environment Information
        run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
      - name: Build Project Artifacts
        run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
      - name: Deploy Project Artifacts to Vercel
        run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}

1
2
3
4

// pacakge.json
"scripts": {
  "preinstall": "npx only-allow pnpm",
}

1
2

# 安装husky和lint-staged
pnpm add -D husky lint-staged pretty-quick

1
2
3
4
5
6
7

// pacakge.json
"scripts": {
  "prepare": "husky install",
  "lint:lint-staged": "lint-staged -c ./.husky/lintstagedrc.js",
  "lint:pretty": "pretty-quick --staged",
  "lint": "pnpm lint:lint-staged && pnpm lint:pretty",
}

1
2
3
4
5
6
7
8

module.exports = {
  '*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'],
  '{!(package)*.json}': ['prettier --write--parser json'],
  'package.json': ['prettier --write'],
  '*.vue': ['eslint --fix', 'prettier --write', 'stylelint --fix'],
  '*.{vue,css,scss,postcss,less}': ['stylelint --fix', 'prettier --write'],
  '*.md': ['prettier --write']
};

1
2
3
4
5
6
7
8
9
10
11

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
. "$(dirname "$0")/common.sh"

[ -n "$CI" ] && exit 0

# Format and submit code according to lintstagedrc.js configuration
npm run lint:lint-staged

npm run lint:pretty

1
2
3
4
5
6
7
8
9

#!/bin/sh
command_exists () {
  command -v "$1" >/dev/null 2>&1
}

# Workaround for Windows 10, Git Bash and Pnpm
if command_exists winpty && test -t 1; then
  exec < /dev/tty
fi

1
2

# 添加包以来
pnpm add -D @commitlint/cli @commitlint/config-conventional

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

module.exports = {
  ignores: [(commit) => commit.includes('init')],
  extends: ['@commitlint/config-conventional'],
  rules: {
    'body-leading-blank': [2, 'always'],
    'footer-leading-blank': [1, 'always'],
    'header-max-length': [2, 'always', 108],
    'subject-empty': [2, 'never'],
    'type-empty': [2, 'never'],
    'type-enum': [
      2,
      'always',
      [
        'feat',
        'fix',
        'perf',
        'style',
        'docs',
        'test',
        'refactor',
        'build',
        'ci',
        'chore',
        'revert',
        'wip',
        'workflow',
        'types',
        'release'
      ]
    ]
  }
};

1
2
3
4
5
6

#!/bin/sh

# shellcheck source=./_/husky.sh
. "$(dirname "$0")/_/husky.sh"

npx --no-install commitlint --edit "$1"

1
2
3
4

// pacakge.json
"scripts": {
  "log": "npx conventional-changelog --config ./node_modules/@commitlint/cli -i CHANGELOG.md -s -r 0"
}

1
2
3
4
5
6
7
8
9
10
11

// 在package.json
"scripts": {
  "dev": "vite --mode mock",
  "dev:alpha": "vite --mode alpha",
  "dev:test": "vite --mode test",
  "dev:test1": "vite --mode test1",
  "dev:grey": "vite --mode grey",
  "build:test": "vue-tsc --noEmit && vite build --mode test",
  "build:test1": "vue-tsc --noEmit && vite build --mode test1",
  "build": "vue-tsc --noEmit && vite build --mode prod"
},

1
2
3
4
5
6
7
8
9
10

base:
  mode === 'prod'
    ? `${cdnConfig.host}${projectBasePath}`
    : mode === 'test'
    ? baseConfig.publicPath + '/'
    : mode === 'test1'
    ? baseConfig.publicPath + '/'
    : mode === 'grey'
    ? baseConfig.publicPath + '/'
    : './',

1
2

# 安装husky和lint-staged
yarn add -D husky lint-staged

1
2

# 安装commitlint
yarn add -D @commitlint/cli @commitlint/config-conventional commitizen conventional-changelog-cli cz-customizable

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// pacakge.json
"scripts": {
  "prepare": "husky install",
  "lint": "npx lint-staged"
},
"husky": {
  "hooks": {
    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "*.md": "prettier . -w",
  "*.{ts,tsx,js,vue}": "eslint . --fix",
  "*.{vue,css,scss,less,sass}": "stylelint --fix",
  "*": "prettier . -w -u"
},

1
2
3
4
5
6
7
8
9

// pacakge.json
"config": {
  "commitizen": {
    "path": "./node_modules/cz-customizable"
  },
  "cz-customizable": {
    "config": ".cz-config.js"
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

// .cz-config.js
// 配置可以参考demo的配置，有注释
module.exports = {
  // type 类型
  types: [
    { value: 'feat', name: 'feat:     新增产品功能' },
    { value: 'fix', name: 'fix:      修复 bug' },
    { value: 'upd', name: 'upd:      update,更新某功能（不是 feat, 不是 fix' },
    { value: 'docs', name: 'docs:     文档的变更' },
    { value: 'release', name: 'release:     版本，打tag' },
    {
      value: 'style',
      name: 'style:    不改变代码功能的变动(如删除空格、格式化、去掉末尾分号等)'
    },
    {
      value: 'refactor',
      name: 'refactor: 重构代码。不包括 bug 修复、功能新增'
    },
    {
      value: 'perf',
      name: 'perf:     性能优化'
    },
    { value: 'test', name: 'test:     添加、修改测试用例' },
    {
      value: 'build',
      name: 'build:    构建流程、外部依赖变更，比如升级 npm 包、修改 webpack 配置'
    },
    { value: 'ci', name: 'ci:       修改了 CI 配置、脚本' },
    {
      value: 'chore',
      name: 'chore:    对构建过程或辅助工具和库的更改,不影响源文件、测试用例的其他操作'
    },
    { value: 'revert', name: 'revert:   回滚 commit' }
  ],

  // scope 类型，针对 React 项目
  scopes: [
    // 如果选择 custom ,后面会让你再输入一个自定义的 scope , 也可以不设置此项， 把后面的 allowCustomScopes 设置为 true
    ['custom', '以下都不是？我要自定义,或者回车跳过此项'],
    ['components', '组件相关'],
    ['views', '页面相关'],
    ['utils', '工具函数相关'],
    ['apis', '接口对接相关'],
    ['layout', '调整layout和页面布局相关'],
    ['styles', '样式相关'],
    ['deps', '项目依赖'],
    ['other', '其他修改']
  ].map(([value, description]) => {
    return {
      value,
      name: `${value.padEnd(30)} (${description})`
    };
  }),

  // allowTicketNumber: false,
  // isTicketNumberRequired: false,
  // ticketNumberPrefix: 'TICKET-',
  // ticketNumberRegExp: '\\d{1,5}',

  // 可以设置 scope 的类型跟 type 的类型匹配项，例如: 'fix'
  /*
    scopeOverrides: {
      fix: [
        { name: 'merge' },
        { name: 'style' },
        { name: 'e2eTest' },
        { name: 'unitTest' }
      ]
    },
   */
  // 覆写提示的信息
  messages: {
    type: '请确保你的提交遵循了原子提交规范！\n选择你要提交的类型:',
    scope: '\n选择一个 scope (可选):',
    // 选择 scope: custom 时会出下面的提示
    customScope: '请输入自定义的 scope:',
    subject: '填写一个简短精炼的描述语句:\n',
    body: '添加一个更加详细的描述，可以附上新增功能的描述或 bug 链接、截图链接 (可选)。使用 "|" 换行:\n',
    breaking: '列举非兼容性重大的变更 (可选):\n',
    footer: '列举出所有变更的 ISSUES CLOSED  (可选)。 例如.: #31, #34:\n',
    confirmCommit: '确认提交?'
  },

  // 是否允许自定义填写 scope ，设置为 true ，会自动添加两个 scope 类型 [{ name: 'empty', value: false },{ name: 'custom', value: 'custom' }]
  // allowCustomScopes: true,
  allowBreakingChanges: ['feat', 'fix'],
  // skip any questions you want
  // skipQuestions: [],

  // subject 限制长度
  subjectLimit: 100
  // breaklineChar: '|', // 支持 body 和 footer
  // footerPrefix : 'ISSUES CLOSED:'
  // askForBreakingChangeFirst : true,
};

1
2
3
4
5
6
7
8
9
10
11
12

// vite配置,可以参考项目vite-plugin-vconsole的文档填写，兼容多环境情况
viteVConsole({
  entry: resolve(__dirname, './src/main.ts'),
  localEnabled: true,
  enabled:
    command !== 'serve' &&
    (mode === 'test' || mode === 'test1' || mode === 'alpha'),
  config: {
    maxLogNumber: 1000,
    theme: 'light'
  }
}),

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

legacy({
  // 不考虑ie的兼容性和老的vivo/锤子/荣耀等国产机型，则可以使用下面
  // targets: ['defaults', 'not IE 11', '> 0.25%, not dead'],
  // 如果考虑上面说的兼容性问题，使用下面配置
  targets: ['ie >= 11'],
  additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
  // 下面可以根据情况选用
  renderLegacyChunks: true,
  polyfills: [
    'es.symbol',
    'es.array.filter',
    'es.promise',
    'es.promise.finally',
    'es/map',
    'es/set',
    'es.array.for-each',
    'es.object.define-properties',
    'es.object.define-property',
    'es.object.get-own-property-descriptor',
    'es.object.get-own-property-descriptors',
    'es.object.keys',
    'es.object.to-string',
    'web.dom-collections.for-each',
    'esnext.global-this',
    'esnext.string.match-all'
  ],
  modernPolyfills: ['es.promise.finally']
})

1
2
3
4
5
6
7
8
9
10
11

viteMockServe({
  mockPath: 'mocks',
  supportTs: true,
  localEnabled: command === 'serve' && mode === 'mock',
  prodEnabled: false
  //  这样可以控制关闭mock的时候不让mock打包到最终代码内
  // injectCode: `
  //   import { setupProdMockServer } from './mockProdServer';
  //   setupProdMockServer();
  // `
}),

1
2
3
4

const phone = 17600000000;
const data = phone.toString().replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
console.log(data);
// 176****0000

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

/**
 * 设置cookie
 * @param {String} name cookie name
 * @param {String} val cookie value
 */
export const setCookie = (name, val) => {
  const date = new Date();
  const value = val;

  // Set it expire in 7 days
  date.setTime(date.getTime() + 7 * 24 * 60 * 60 * 1000);

  // Set it
  document.cookie =
    name + "=" + value + "; expires=" + date.toUTCString() + "; path=/";
};

/**
 * 获取cookie
 * @param {String} name cookie name
 */
export const getCookie = (name) => {
  const value = "; " + document.cookie;
  const parts = value.split("; " + name + "=");

  if (parts.length === 2) {
    const ppop = parts.pop();
    if (ppop) {
      return ppop.split(";").shift();
    }
  }
};

/**
 * 删除cookie
 * @param {String} name cookie name
 */
export const deleteCookie = (name) => {
  const date = new Date();

  // Set it expire in -1 days
  date.setTime(date.getTime() + -1 * 24 * 60 * 60 * 1000);

  // Set it
  document.cookie = name + "=; expires=" + date.toUTCString() + "; path=/";
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

/**
 * 格式化时间，间隔符为-
 * @param {Number} date 大小，单位时间戳13位
 * @return {String} 格式化后的大小 2021-03-12 20:21:02
 */
export const formatDate = (date) => {
  const da = new Date(date);
  const year = da.getFullYear();
  const month = da.getMonth() + 1;
  const day = da.getDate();
  const hours = da.getHours();
  const mins = da.getMinutes();
  const secs = da.getSeconds();
  return `${year}-${month > 9 ? month : "0" + month}-${
    day > 9 ? day : "0" + day
  } ${hours > 9 ? hours : "0" + hours}:${mins > 9 ? mins : "0" + mins}:${
    secs > 9 ? secs : "0" + secs
  }`;
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

/**
 * 生成uuid
 * @param {Number} len 生成的uuid长度
 * @param {Number} radix 随机字符的长度选择
 * @return {String} uuid
 */
export const UUID = (len, radix) => {
  const chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz".split(
    ""
  );
  const uuid = [];
  let i;
  radix = radix || chars.length;

  if (len) {
    // Compact form
    for (i = 0; i < len; i++) uuid[i] = chars[0 | (Math.random() * radix)];
  } else {
    // rfc4122, version 4 form
    let r;

    // rfc4122 requires these characters
    uuid[8] = uuid[13] = uuid[18] = uuid[23] = "-";
    uuid[14] = "4";

    // Fill in random data.  At i==19 set the high bits of clock sequence as
    // per rfc4122, sec. 4.1.5
    for (i = 0; i < 36; i++) {
      if (!uuid[i]) {
        r = 0 | (Math.random() * 16);
        uuid[i] = chars[i === 19 ? (r & 0x3) | 0x8 : r];
      }
    }
  }

  return uuid.join("");
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

export const isString = (e) => { //是否字符串
  return Object.prototype.toString.call(e).slice(8, -1) === 'String'
}

export const isNumber = (e) => { //是否数字
  return Object.prototype.toString.call(e).slice(8, -1) === 'Number'
}

export const isBoolean = (e) => { //是否boolean
  return Object.prototype.toString.call(e).slice(8, -1) === 'Boolean'
}

export const isFunction = (e) => { //是否函数
  return Object.prototype.toString.call(e).slice(8, -1) === 'Function'
}

export const isNull = (e) => { //是否为null
  return Object.prototype.toString.call(e).slice(8, -1) === 'Null'
}

export const isUndefined = (e) => { //是否undefined
  return Object.prototype.toString.call(e).slice(8, -1) === 'Undefined'
}

export const isObj = (e) => { //是否对象
  return Object.prototype.toString.call(e).slice(8, -1) === 'Object'
}

export const isArray = (e) => { //是否数组
  return Object.prototype.toString.call(e).slice(8, -1) === 'Array'
}

export const isDate = (e) => { //是否时间
  return Object.prototype.toString.call(e).slice(8, -1) === 'Date'
}

export const isRegExp = (e) => { //是否正则
  return Object.prototype.toString.call(e).slice(8, -1) === 'RegExp'
}

export const isError = (e) => { //是否错误对象
  return Object.prototype.toString.call(e).slice(8, -1) === 'Error'
}

export const isSymbol = (e) => { //是否Symbol函数
  return Object.prototype.toString.call(e).slice(8, -1) === 'Symbol'
}

export const isPromise = (e) => { //是否Promise对象
  return Object.prototype.toString.call(e).slice(8, -1) === 'Promise'
}

export const isSet = (e) => { //是否Set对象
  return Object.prototype.toString.call(e).slice(8, -1) === 'Set'
}

1
2

// min, 最小的值，max最大的数，包含两者
export const randoms = (min, max) => Math.floor(min + Math.random() * ((max + 1) - min))

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

/**
 * 去除空格
 * @param  {String} srt: 传入字符串
 * @param  {Number} type: 1-所有空格 2-前后空格 3-前空格 4-后空格
 * @return {String}
 */
export const trim = (str, type = 1) => {
  switch (type) {
    case 1:
      return str.replace(/\s+/g, '')
    case 2:
      return str.replace(/(^\s*)|(\s*$)/g, '')
    case 3:
      return str.replace(/(^\s*)/g, '')
    case 4:
      return str.replace(/(\s*$)/g, '')
    default:
      return str
  }
}