-
+
欢迎来到 {{ title }}
-
+ 欢迎来到 {{ title }}
+
+
- {{ text.title }}
- {{ text.details }}
+
+ {{ text.title }}
+
+
+ {{ text.details }}
+
@@ -33,74 +38,75 @@
type="primary"
block
@click="router.push({ name: 'Login' })"
- >Let's Get Started
-
创建账户？
+ Let's Get Started
+
+
创建账户？
diff --git a/stylelint.config.js b/stylelint.config.js
deleted file mode 100644
index 4b3501d..0000000
--- a/stylelint.config.js
+++ /dev/null
@@ -1,100 +0,0 @@
-module.exports = {
- root: true,
- plugins: ['stylelint-order'],
- extends: ['stylelint-config-standard', 'stylelint-config-prettier'],
- customSyntax: 'postcss-html',
- rules: {
- 'function-no-unknown': null,
- 'selector-class-pattern': null,
- 'selector-pseudo-class-no-unknown': [
- true,
- {
- ignorePseudoClasses: ['global'],
- },
- ],
- 'selector-pseudo-element-no-unknown': [
- true,
- {
- ignorePseudoElements: ['v-deep'],
- },
- ],
- 'at-rule-no-unknown': [
- true,
- {
- ignoreAtRules: [
- 'tailwind',
- 'apply',
- 'variants',
- 'responsive',
- 'screen',
- 'function',
- 'if',
- 'each',
- 'include',
- 'mixin',
- ],
- },
- ],
- 'no-empty-source': null,
- 'string-quotes': null,
- 'named-grid-areas-no-invalid': null,
- 'unicode-bom': 'never',
- 'no-descending-specificity': null,
- 'font-family-no-missing-generic-family-keyword': null,
- 'declaration-colon-space-after': 'always-single-line',
- 'declaration-colon-space-before': 'never',
- // 'declaration-block-trailing-semicolon': 'always',
- 'rule-empty-line-before': [
- 'always',
- {
- ignore: ['after-comment', 'first-nested'],
- },
- ],
- 'unit-no-unknown': [true, { ignoreUnits: ['rpx'] }],
- 'order/order': [
- [
- 'dollar-variables',
- 'custom-properties',
- 'at-rules',
- 'declarations',
- {
- type: 'at-rule',
- name: 'supports',
- },
- {
- type: 'at-rule',
- name: 'media',
- },
- 'rules',
- ],
- { severity: 'warning' },
- ],
- },
- ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts'],
- overrides: [
- {
- files: ['*.vue', '**/*.vue', '*.html', '**/*.html'],
- extends: ['stylelint-config-recommended'],
- rules: {
- 'keyframes-name-pattern': null,
- 'selector-pseudo-class-no-unknown': [
- true,
- {
- ignorePseudoClasses: ['deep', 'global'],
- },
- ],
- 'selector-pseudo-element-no-unknown': [
- true,
- {
- ignorePseudoElements: ['v-deep', 'v-global', 'v-slotted'],
- },
- ],
- },
- },
- {
- files: ['*.less', '**/*.less'],
- customSyntax: 'postcss-less',
- extends: ['stylelint-config-standard', 'stylelint-config-recommended-vue'],
- },
- ],
-};
diff --git a/tsconfig.json b/tsconfig.json
index 3f84553..2071caf 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,26 +1,26 @@
{
"compilerOptions": {
"target": "ESNext",
+ "jsx": "preserve",
+ "lib": ["ESNext", "DOM"],
"useDefineForClassFields": true,
- "allowSyntheticDefaultImports": true,
+ "baseUrl": ".",
"module": "ESNext",
"moduleResolution": "Node",
- "strict": true,
- "sourceMap": true,
- "jsx": "preserve",
- "baseUrl": ".",
- "resolveJsonModule": true,
- "isolatedModules": true,
- "esModuleInterop": true,
- "lib": ["ESNext", "DOM"],
- "types": ["vite/client"],
- "typeRoots": ["./node_modules/@types/", "./types"],
- "noImplicitAny": false,
- "skipLibCheck": true,
"paths": {
"@/*": ["src/*"],
"#/*": ["types/*"]
- }
+ },
+ "resolveJsonModule": true,
+ "typeRoots": ["./node_modules/@types/", "./types"],
+ "types": ["vite/client"],
+ "strict": true,
+ "noImplicitAny": false,
+ "sourceMap": true,
+ "allowSyntheticDefaultImports": true,
+ "esModuleInterop": true,
+ "isolatedModules": true,
+ "skipLibCheck": true
},
"include": [
"src/**/*.ts",
diff --git a/types/config.d.ts b/types/config.d.ts
index d217959..d22f076 100644
--- a/types/config.d.ts
+++ b/types/config.d.ts
@@ -1,29 +1,29 @@
export interface GlobConfig {
- title: string;
- titleCN: string;
- apiUrl: string;
- shortName: string;
- urlPrefix?: string;
- uploadUrl?: string;
- prodMock: boolean;
- imgUrl?: string;
+ title: string
+ titleCN: string
+ apiUrl: string
+ shortName: string
+ urlPrefix?: string
+ uploadUrl?: string
+ prodMock: boolean
+ imgUrl?: string
}
export interface GlobEnvConfig {
// 标题
- VITE_GLOB_APP_TITLE: string;
+ VITE_GLOB_APP_TITLE: string
// 中文标题
- VITE_GLOB_APP_TITLE_CN: string;
+ VITE_GLOB_APP_TITLE_CN: string
// 接口地址
- VITE_GLOB_API_URL: string;
+ VITE_GLOB_API_URL: string
// 接口前缀
- VITE_GLOB_API_URL_PREFIX?: string;
+ VITE_GLOB_API_URL_PREFIX?: string
// Project abbreviation
- VITE_GLOB_APP_SHORT_NAME: string;
+ VITE_GLOB_APP_SHORT_NAME: string
// 图片上传地址
- VITE_GLOB_UPLOAD_URL?: string;
+ VITE_GLOB_UPLOAD_URL?: string
// 图片前缀地址
- VITE_GLOB_IMG_URL?: string;
+ VITE_GLOB_IMG_URL?: string
// 生产环境开启mock
- VITE_GLOB_PROD_MOCK: boolean;
+ VITE_GLOB_PROD_MOCK: boolean
}
diff --git a/types/global.d.ts b/types/global.d.ts
index abd3ce6..95c7c2d 100644
--- a/types/global.d.ts
+++ b/types/global.d.ts
@@ -1,9 +1,9 @@
import type {
- VNodeChild,
ComponentPublicInstance,
FunctionalComponent,
+ VNodeChild,
PropType as VuePropType,
-} from 'vue';
+} from 'vue'
// declare global 在具有 import 或 export 声明全局范围内的事物的文件中使用。
// 这在包含 import 或 export 因为此类文件被视为模块的文件中是必需的，并且在模块中声明的任何内容都在模块范围内。
@@ -12,66 +12,66 @@ import type {
declare global {
const __APP_INFO__: {
pkg: {
- name: string;
- version: string;
- dependencies: Recordable
;
- devDependencies: Recordable;
- };
- lastBuildTime: string;
- };
+ name: string
+ version: string
+ dependencies: Recordable
+ devDependencies: Recordable
+ }
+ lastBuildTime: string
+ }
// vue
- type PropType = VuePropType;
- type VueNode = VNodeChild | JSX.Element;
+ type PropType = VuePropType
+ type VueNode = VNodeChild | JSX.Element
export type Writable = {
-readonly [P in keyof T]: T[P];
- };
+ }
- type Nullable = T | null;
- type NonNullable = T extends null | undefined ? never : T;
- type Recordable = Record;
- type ReadonlyRecordable = {
- readonly [key: string]: T;
- };
- type Indexable = {
- [key: string]: T;
- };
+ type Nullable = T | null
+ type NonNullable = T extends null | undefined ? never : T
+ type Recordable = Record
+ interface ReadonlyRecordable {
+ readonly [key: string]: T
+ }
+ interface Indexable {
+ [key: string]: T
+ }
type DeepPartial = {
[P in keyof T]?: DeepPartial;
- };
- type TimeoutHandle = ReturnType;
- type IntervalHandle = ReturnType;
+ }
+ type TimeoutHandle = ReturnType
+ type IntervalHandle = ReturnType
interface ChangeEvent extends Event {
- target: HTMLInputElement;
+ target: HTMLInputElement
}
interface WheelEvent {
- path?: EventTarget[];
+ path?: EventTarget[]
}
interface ImportMetaEnv extends ViteEnv {
- __: unknown;
+ __: unknown
}
interface ViteEnv {
- VITE_PORT: number;
- VITE_USE_MOCK: boolean;
- VITE_PUBLIC_PATH: string;
- VITE_GLOB_APP_TITLE: string;
- VITE_GLOB_APP_SHORT_NAME: string;
- VITE_DROP_CONSOLE: boolean;
- VITE_GLOB_PROD_MOCK: boolean;
- VITE_GLOB_IMG_URL: string;
- VITE_PROXY: [string, string][];
- VITE_BUILD_COMPRESS: 'gzip' | 'brotli' | 'none';
- VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE: boolean;
+ VITE_PORT: number
+ VITE_USE_MOCK: boolean
+ VITE_PUBLIC_PATH: string
+ VITE_GLOB_APP_TITLE: string
+ VITE_GLOB_APP_SHORT_NAME: string
+ VITE_DROP_CONSOLE: boolean
+ VITE_GLOB_PROD_MOCK: boolean
+ VITE_GLOB_IMG_URL: string
+ VITE_PROXY: [string, string][]
+ VITE_BUILD_COMPRESS: 'gzip' | 'brotli' | 'none'
+ VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE: boolean
}
}
declare module 'vue' {
export type JSXComponent =
| { new (): ComponentPublicInstance }
- | FunctionalComponent;
+ | FunctionalComponent
}
diff --git a/types/index.d.ts b/types/index.d.ts
index 6f3e2a6..c80f3f2 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -1,29 +1,29 @@
declare interface Fn {
- (...arg: T[]): R;
+ (...arg: T[]): R
}
declare interface PromiseFn {
- (...arg: T[]): Promise;
+ (...arg: T[]): Promise
}
-declare type RefType = T | null;
+declare type RefType = T | null
// 就是数组里的 value 是这个对象类型
declare type LabelValueOptions = {
- label: string;
- value: any;
- disabled: boolean;
- [key: string]: string | number | boolean;
-}[];
+ label: string
+ value: any
+ disabled: boolean
+ [key: string]: string | number | boolean
+}[]
-declare type EmitType = (event: string, ...args: any[]) => void;
+declare type EmitType = (event: string, ...args: any[]) => void
-declare type TargetContext = '_self' | '_blank';
+declare type TargetContext = '_self' | '_blank'
declare interface ComponentElRef {
- $el: T;
+ $el: T
}
-declare type ComponentRef = ComponentElRef | null;
+declare type ComponentRef = ComponentElRef | null
-declare type ElRef = Nullable;
+declare type ElRef = Nullable
diff --git a/types/modules.d.ts b/types/modules.d.ts
index 6ca5b6c..32b11ad 100644
--- a/types/modules.d.ts
+++ b/types/modules.d.ts
@@ -1,7 +1,9 @@
+/* eslint-disable ts/ban-types */
///
declare module '*.vue' {
- import { DefineComponent } from 'vue';
- const Component: DefineComponent<{}, {}, any>;
- export default Component;
+ import type { DefineComponent } from 'vue'
+
+ const Component: DefineComponent<{}, {}, any>
+ export default Component
}
diff --git a/uno.config.ts b/uno.config.ts
new file mode 100644
index 0000000..d4f8712
--- /dev/null
+++ b/uno.config.ts
@@ -0,0 +1,64 @@
+// uno.config.ts
+import {
+ defineConfig,
+ presetAttributify,
+ presetIcons,
+ presetTypography,
+ presetUno,
+ presetWebFonts,
+} from 'unocss'
+
+import transformerVariantGroup from '@unocss/transformer-variant-group'
+import transformerDirectives from '@unocss/transformer-directives'
+
+export default defineConfig({
+ // ...UnoCSS options
+ presets: [
+ // 此预设尝试提供流行的实用程序优先框架的通用超集，包括 Tailwind CSS、Windi CSS、Bootstrap、Tachyons 等
+ presetUno(),
+
+ // 图标预设: https://unocss.dev/presets/icons
+ presetIcons({
+ extraProperties: {
+ 'display': 'inline-block',
+ 'vertical-align': 'middle',
+ // ...
+ },
+ }),
+
+ // 属性模式(在 class 属性过多的情况下优先使用属性模式，否则将会变得难以维护)
+ // https://unocss.dev/presets/attributify#attributify-mode
+ presetAttributify(),
+
+ // https://unocss.dev/presets/typography#usage
+ presetTypography(),
+
+ // 网络字体预设：https://unocss.dev/presets/web-fonts
+ presetWebFonts({
+ // 默认字体提供商 https://unocss.dev/presets/web-fonts#providers
+ provider: 'google',
+ // https://unocss.dev/presets/web-fonts#example
+ fonts: {
+ mono: ['Fira Code'],
+ },
+ }),
+ ],
+ transformers: [
+ // 启用 Windi CSS for UnoCSS 的变体组功能(就是简写，具体看链接): https://unocss.dev/transformers/variant-group#usage
+ transformerVariantGroup(),
+ // 在样式类里你也可以写原子化 css 具体看链接: https://unocss.dev/transformers/directives#usage
+ // Unknown at rule @apply: https://github.com/unocss/unocss/issues/2401
+ transformerDirectives(),
+ ],
+
+ // 一些实用的自定义组合
+ shortcuts: {
+ 'm-0-auto': 'm-0 ma', // margin: 0 auto
+ 'wh-full': 'w-full h-full', // width: 100%, height: 100%
+ 'flex-center': 'flex justify-center items-center', // flex布局居中
+ 'flex-x-center': 'flex justify-center', // flex布局：主轴居中
+ 'flex-y-center': 'flex items-center', // flex布局：交叉轴居中
+ 'text-overflow': 'overflow-hidden whitespace-nowrap text-ellipsis', // 文本溢出显示省略号
+ 'text-break': 'whitespace-normal break-all break-words', // 文本溢出换行
+ },
+})
diff --git a/vite.config.ts b/vite.config.ts
index 86460bd..a6b4908 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,17 +1,19 @@
-import { ConfigEnv, UserConfig } from 'vite';
-import { loadEnv } from 'vite';
-import { wrapperEnv } from './build/utils';
-import { createVitePlugins } from './build/vite/plugin';
-import { OUTPUT_DIR } from './build/constant';
-import { resolve } from 'path';
-import { createProxy } from './build/vite/proxy';
-import pkg from './package.json';
-import { format } from 'date-fns';
-const { dependencies, devDependencies, name, version } = pkg;
+import { resolve } from 'node:path'
+import type { ConfigEnv, UserConfig } from 'vite'
+import { loadEnv } from 'vite'
+import { format } from 'date-fns'
+import { wrapperEnv } from './build/utils'
+import { createVitePlugins } from './build/vite/plugin'
+import { OUTPUT_DIR } from './build/constant'
+import { createProxy } from './build/vite/proxy'
+import pkg from './package.json'
+const { dependencies, devDependencies, name, version } = pkg
+
+// 当使用文件系统路径的别名时，请始终使用绝对路径。相对路径的别名值会原封不动地被使用，因此无法被正常解析。
// path.resolve () 方法用于将一系列路径段解析为绝对路径。它通过处理从右到左的路径序列来工作，在每个路径之前添加，直到创建绝对路径。
function pathResolve(dir: string) {
- return resolve(process.cwd(), '.', dir);
+ return resolve(process.cwd(), '.', dir)
}
const __APP_INFO__ = {
@@ -19,25 +21,25 @@ const __APP_INFO__ = {
pkg: { dependencies, devDependencies, name, version },
// 最后编译时间
lastBuildTime: format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
-};
+}
/** @type {import('vite').UserConfig} */
export default ({ command, mode }: ConfigEnv): UserConfig => {
// process.cwd() 方法返回 Node.js 进程的当前工作目录
// mode 返回应用的环境模式 development（开发环境） 或者 production（生产环境）
// command 返回（dev/serve 或 build）命令模式，yarn dev 返回 dev/serve yarn build 返回 build
- const root = process.cwd();
+ const root = process.cwd()
// loadEnv() 根据 mode 检查 root(项目根路径) 路径下 .env、.env.development 环境文件，输出 NODE_ENV 和 VITE_ 开头的键值队
- const env = loadEnv(mode, root);
+ const env = loadEnv(mode, root)
// 读取并处理所有环境变量配置文件 .env
- const viteEnv = wrapperEnv(env);
+ const viteEnv = wrapperEnv(env)
- const { VITE_PUBLIC_PATH, VITE_DROP_CONSOLE, VITE_PORT, VITE_PROXY, VITE_GLOB_PROD_MOCK } =
- viteEnv;
+ const { VITE_PUBLIC_PATH, VITE_DROP_CONSOLE, VITE_PORT, VITE_PROXY, VITE_GLOB_PROD_MOCK }
+ = viteEnv
- const prodMock = VITE_GLOB_PROD_MOCK;
+ const prodMock = VITE_GLOB_PROD_MOCK
- const isBuild = command === 'build';
+ const isBuild = command === 'build'
// command === 'build'
return {
base: VITE_PUBLIC_PATH,
@@ -49,12 +51,12 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
// @/xxxx => src/xxxx
{
find: /\@\//,
- replacement: pathResolve('src') + '/',
+ replacement: `${pathResolve('src')}/`,
},
// #/xxxx => types/xxxx
{
find: /\#\//,
- replacement: pathResolve('types') + '/',
+ replacement: `${pathResolve('types')}/`,
},
],
dedupe: ['vue'],
@@ -69,7 +71,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
esbuild: {
// 使用 esbuild 压缩 剔除 console.log
- pure: VITE_DROP_CONSOLE ? ['console.log', 'debugger'] : [],
+ drop: VITE_DROP_CONSOLE ? ['debugger', 'console'] : [],
// minify: true, // minify: true, 等于 minify: 'esbuild',
},
@@ -96,6 +98,26 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
reportCompressedSize: true,
// chunk 大小警告的限制（以 kbs 为单位）
chunkSizeWarningLimit: 2000,
+ // 自定义底层的 Rollup 打包配置
+ rollupOptions: {
+ // 静态资源分类打包
+ output: {
+ chunkFileNames: 'js/[name]-[hash].js', // 引入文件名的名称
+ entryFileNames: 'js/[name]-[hash].js', // 包的入口文件名称
+ assetFileNames: '[ext]/[name]-[hash].[ext]', // 资源文件像 字体，图片等
+ // 将 node_modules 三方依赖包最小化拆分
+ manualChunks(id) {
+ if (id.includes('node_modules') && !id.includes('@antv')) {
+ const paths = id.toString().split('node_modules/')
+ if (paths[2]) {
+ return paths[2].split('/')[0].toString()
+ }
+
+ return paths[1].split('/')[0].toString()
+ }
+ },
+ },
+ },
},
css: {
@@ -111,8 +133,16 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
server: {
host: true,
- port: VITE_PORT,
+ // 服务启动时是否自动打开浏览器
+ open: true,
+ // 服务端口号
+ port: Number(VITE_PORT),
proxy: createProxy(VITE_PROXY),
+ // 预热文件以降低启动期间的初始页面加载时长
+ warmup: {
+ // 预热的客户端文件：首页、views、 components
+ clientFiles: ['./index.html', './src/{views,components}/*'],
+ },
// proxy: {
// '/api': {
// target: '',
@@ -122,13 +152,31 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
// }
},
+ // 有需要再打开，否则 既不优化 也不排除
optimizeDeps: {
- include: [],
+ /**
+ * 依赖预构建，vite 启动时会将下面 include 里的模块，编译成 esm 格式并缓存到 node_modules/.vite 文件夹，
+ * 页面加载到对应模块时如果浏览器有缓存就读取浏览器缓存，如果没有会读取本地缓存并按需加载
+ * 尤其当您禁用浏览器缓存时（这种情况只应该发生在调试阶段）必须将对应模块加入到 include 里，
+ * 否则会遇到开发环境切换页面卡顿的问题（vite 会认为它是一个新的依赖包会重新加载并强制刷新页面），
+ * 因为它既无法使用浏览器缓存，又没有在本地 node_modules/.vite 里缓存
+ * 温馨提示：如果你使用的第三方库是全局引入，也就是引入到 src/main.ts 文件里，
+ * 就不需要再添加到 include 里了，因为 vite 会自动将它们缓存到 node_modules/.vite
+ */
+ include: [
+ 'pinia',
+ 'lodash-es',
+ 'axios',
+ '@vicons/antd',
+ '@vicons/ionicons5',
+ ],
// 打包时强制排除的依赖项
- exclude: [],
+ exclude: [
+
+ ],
},
// 加载插件
plugins: createVitePlugins(viteEnv, isBuild, prodMock),
- };
-};
+ }
+}
diff --git a/windi.config.ts b/windi.config.ts
deleted file mode 100644
index 86db182..0000000
--- a/windi.config.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import { defineConfig } from 'vite-plugin-windicss';
-
-export default defineConfig({
- darkMode: 'class',
- attributify: true,
- plugins: [createEnterPlugin()],
- theme: {
- extend: {
- textColor: {
- darkBlue: '#243658',
- garyWhite: '#f5f5f5',
- },
- zIndex: {
- '-1': '-1',
- },
- colors: {
- primary: '#5d9dfe',
- },
- screens: {
- sm: '576px',
- md: '768px',
- lg: '992px',
- xl: '1200px',
- '2xl': '1600px',
- },
- },
- },
-});
-
-/**
- * Used for animation when the element is displayed.
- * @param maxOutput The larger the maxOutput output, the larger the generated css volume.
- */
-function createEnterPlugin(maxOutput = 10) {
- const createCss = (index: number, d = 'x') => {
- const upd = d.toUpperCase();
- return {
- [`*> .enter-${d}:nth-child(${index})`]: {
- transform: `translate${upd}(50px)`,
- },
- [`*> .-enter-${d}:nth-child(${index})`]: {
- transform: `translate${upd}(-50px)`,
- },
- [`* > .enter-${d}:nth-child(${index}),* > .-enter-${d}:nth-child(${index})`]: {
- 'z-index': `${10 - index}`,
- opacity: '0',
- animation: `enter-${d}-animation 0.4s ease-in-out 0.3s`,
- 'animation-fill-mode': 'forwards',
- 'animation-delay': `${(index * 1) / 10}s`,
- },
- };
- };
- const handler = ({ addBase }) => {
- const addRawCss = {};
- for (let index = 1; index < maxOutput; index++) {
- Object.assign(addRawCss, {
- ...createCss(index, 'x'),
- ...createCss(index, 'y'),
- });
- }
- addBase({
- ...addRawCss,
- [`@keyframes enter-x-animation`]: {
- to: {
- opacity: '1',
- transform: 'translateX(0)',
- },
- },
- [`@keyframes enter-y-animation`]: {
- to: {
- opacity: '1',
- transform: 'translateY(0)',
- },
- },
- });
- };
- return { handler };
-}
-
+ 
+ 
+