From 035fa114c9fd638cf467e6a73a8e4c558f503deb Mon Sep 17 00:00:00 2001 From: Soybean <2570172956@qq.com> Date: Tue, 4 Jan 2022 13:53:07 +0800 Subject: [PATCH] =?UTF-8?q?feat(projects):=20=E5=88=9D=E5=A7=8B=E5=8C=96?= =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E6=95=88=E6=9E=9C=EF=BC=9A=E5=BA=94=E7=94=A8?= =?UTF-8?q?=E4=B8=BB=E9=A2=98=E9=A2=9C=E8=89=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintignore | 1 - .eslintrc.js | 1 + .gitignore | 2 ++ .prettierrc.js | 12 ++++++++++-- index.html | 18 ++++++++++++++++-- public/favicon.ico | Bin 4286 -> 16958 bytes src/App.vue | 15 +++------------ src/AppProvider.vue | 13 +++++++++++++ src/main.ts | 19 +++++++++++++------ src/plugins/index.ts | 3 ++- src/plugins/logo.ts | 28 ++++++++++++++++++++++++++++ src/store/modules/theme/index.ts | 21 +++++++++++++-------- vite.config.ts | 4 ++++ windi.config.ts | 3 ++- 14 files changed, 107 insertions(+), 33 deletions(-) create mode 100644 src/AppProvider.vue create mode 100644 src/plugins/logo.ts diff --git a/.eslintignore b/.eslintignore index 105e5d69a..1f2dc32fa 100644 --- a/.eslintignore +++ b/.eslintignore @@ -11,5 +11,4 @@ lib /docs .vscode .local -index.html !.env-config.ts diff --git a/.eslintrc.js b/.eslintrc.js index e813bffc5..0569d3854 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -135,6 +135,7 @@ module.exports = { 'no-shadow': 0, 'no-unused-vars': 'off', 'no-use-before-define': 'off', + 'vue/comment-directive': 0, 'vue/multi-word-component-names': 0, '@typescript-eslint/ban-types': 'off', '@typescript-eslint/ban-ts-ignore': 'off', diff --git a/.gitignore b/.gitignore index b4300fae9..c16790f4d 100644 --- a/.gitignore +++ b/.gitignore @@ -23,3 +23,5 @@ dist-ssr *.njsproj *.sln *.sw? + +stats.html diff --git a/.prettierrc.js b/.prettierrc.js index a1267c687..4b3ba6545 100644 --- a/.prettierrc.js +++ b/.prettierrc.js @@ -15,5 +15,13 @@ module.exports = { requireConfig: false, // Require a 'prettierconfig' to format prettier stylelintIntegration: false, //不让prettier使用stylelint的代码格式进行校验 trailingComma: 'none', // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号） - tslintIntegration: false // 不让prettier使用tslint的代码格式进行校验 -} + tslintIntegration: false, // 不让prettier使用tslint的代码格式进行校验 + overrides: [ + { + files: '*.html', + options: { + parser: 'html' + } + } + ] +}; diff --git a/index.html b/index.html index 11603f878..3f9903e89 100644 --- a/index.html +++ b/index.html @@ -4,10 +4,24 @@ - Vite App + <%= appName %> -
+ +
+
+ +
+
+
+
+
+
+
+
+

<%= appTitle %>

+
+
diff --git a/public/favicon.ico b/public/favicon.ico index df36fcfb72584e00488330b560ebcf34a41c64c2..2b47ca6e980c026368b61d73b28cc993f659c382 100644 GIT binary patch literal 16958 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 diff --git a/src/App.vue b/src/App.vue index 9edec8f8c..32af11c23 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,19 +1,10 @@ diff --git a/src/AppProvider.vue b/src/AppProvider.vue new file mode 100644 index 000000000..fbf4dd9cf --- /dev/null +++ b/src/AppProvider.vue @@ -0,0 +1,13 @@ + + + + diff --git a/src/main.ts b/src/main.ts index 69e55df98..5a8af4fc2 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,22 +1,29 @@ import { createApp } from 'vue'; -import { setupAssets } from '@/plugins'; +import { setupAssets, setupInitSvgLogo } from '@/plugins'; import { setupRouter } from '@/router'; import { setupStore } from '@/store'; +import AppProvider from './AppProvider.vue'; import App from './App.vue'; async function setupApp() { - const app = createApp(App); + setupAssets(); + + // 挂载 appProvider 解决路由守卫，Axios中可使用，LoadingBar，Dialog，Message 等之类组件 + const appProvider = createApp(AppProvider); + setupStore(appProvider); + appProvider.mount('#appProvider'); + + // 初始化加载的svg logo + setupInitSvgLogo('#loadingLogo'); - // 挂载全局状态 + const app = createApp(App); setupStore(app); // 挂载路由 await setupRouter(app); - // 路由准备就绪后挂载APP实例 + // 路由准备就绪后挂载 App app.mount('#app'); } -setupAssets(); - setupApp(); diff --git a/src/plugins/index.ts b/src/plugins/index.ts index 4de580b26..fddc1b129 100644 --- a/src/plugins/index.ts +++ b/src/plugins/index.ts @@ -1,3 +1,4 @@ import setupAssets from './assets'; +import setupInitSvgLogo from './logo'; -export { setupAssets }; +export { setupAssets, setupInitSvgLogo }; diff --git a/src/plugins/logo.ts b/src/plugins/logo.ts new file mode 100644 index 000000000..6d982d667 --- /dev/null +++ b/src/plugins/logo.ts @@ -0,0 +1,28 @@ +/** 初始化加载效果的svg格式logo */ +export default function setupInitSvgLogo(id: string) { + const svgStr = ` + + + + + + +`; + const appEl = document.querySelector(id); + const div = document.createElement('div'); + div.innerHTML = svgStr; + appEl?.appendChild(div); +} diff --git a/src/store/modules/theme/index.ts b/src/store/modules/theme/index.ts index 23884f088..6577a84cc 100644 --- a/src/store/modules/theme/index.ts +++ b/src/store/modules/theme/index.ts @@ -25,8 +25,6 @@ interface ThemeStore { otherColor: ComputedRef; /** naiveUI的主题配置 */ naiveThemeOverrides: ComputedRef; - /** 添加css vars至html */ - addThemeCssVarsToRoot(): void; } type ThemeVarsKeys = keyof Exclude; @@ -64,23 +62,30 @@ export const useThemeStore = defineStore('theme-store', () => { }; }); - function addThemeCssVarsToRoot() { - const updatedThemeVars = { ...themeVars.value }; - Object.assign(updatedThemeVars, naiveThemeOverrides.value.common); + /** 添加css vars至html */ + function addThemeCssVarsToHtml() { + if (document.documentElement.style.cssText) return; + + const updatedThemeVars = { ...themeVars.value, ...naiveThemeOverrides.value.common }; const keys = Object.keys(updatedThemeVars) as ThemeVarsKeys[]; const style: string[] = []; keys.forEach(key => { style.push(`--${kebabCase(key)}: ${updatedThemeVars[key]}`); }); const styleStr = style.join(';'); - document.documentElement.style.cssText += styleStr; + document.documentElement.style.cssText = styleStr; } + function init() { + addThemeCssVarsToHtml(); + } + + init(); + const themeStore: ThemeStore = { themeColor, otherColor, - naiveThemeOverrides, - addThemeCssVarsToRoot + naiveThemeOverrides }; return themeStore; diff --git a/vite.config.ts b/vite.config.ts index 96439b9b6..d23568b85 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -28,6 +28,10 @@ export default defineConfig(configEnv => { host: '0.0.0.0', port: 3200, open: true + }, + build: { + brotliSize: false, + sourcemap: false } }; }); diff --git a/windi.config.ts b/windi.config.ts index 94f59d861..c51542335 100644 --- a/windi.config.ts +++ b/windi.config.ts @@ -39,7 +39,8 @@ export default defineConfig({ 'fixed-br': 'fixed-rb', 'fixed-center': 'fixed left-0 top-0 flex-center wh-full', 'nowrap-hidden': 'whitespace-nowrap overflow-hidden', - 'ellipsis-text': 'nowrap-hidden overflow-ellipsis' + 'ellipsis-text': 'nowrap-hidden overflow-ellipsis', + 'init-loading-spin': 'w-16px h-16px bg-primary rounded-8px animate-pulse' }, theme: { extend: {