优化全局样式和 element ui框架，修改nacos-federation，增加打包依赖分析等
This commit is contained in:
编码猿
@@ -18,9 +18,12 @@
|
||||
"vue-router": "^4.5.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@element-plus/icons-vue": "^2.3.2",
|
||||
"@originjs/vite-plugin-federation": "^1.4.1",
|
||||
"@types/node": "^24.5.2",
|
||||
"@vue3-oop/plugin-vue-jsx": "^1.5.1",
|
||||
"element-plus": "^2.11.3",
|
||||
"rollup-plugin-visualizer": "^6.0.3",
|
||||
"tslib": "^2.8.1",
|
||||
"typescript": "~5.8.3",
|
||||
"vite": "^7.1.6",
|
||||
|
||||
@@ -1,86 +0,0 @@
|
||||
/* color palette from <https://github.com/vuejs/theme> */
|
||||
:root {
|
||||
--vt-c-white: #ffffff;
|
||||
--vt-c-white-soft: #f8f8f8;
|
||||
--vt-c-white-mute: #f2f2f2;
|
||||
|
||||
--vt-c-black: #181818;
|
||||
--vt-c-black-soft: #222222;
|
||||
--vt-c-black-mute: #282828;
|
||||
|
||||
--vt-c-indigo: #2c3e50;
|
||||
|
||||
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
|
||||
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
|
||||
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
|
||||
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
|
||||
|
||||
--vt-c-text-light-1: var(--vt-c-indigo);
|
||||
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
|
||||
--vt-c-text-dark-1: var(--vt-c-white);
|
||||
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
|
||||
}
|
||||
|
||||
/* semantic color variables for this project */
|
||||
:root {
|
||||
--color-background: var(--vt-c-white);
|
||||
--color-background-soft: var(--vt-c-white-soft);
|
||||
--color-background-mute: var(--vt-c-white-mute);
|
||||
|
||||
--color-border: var(--vt-c-divider-light-2);
|
||||
--color-border-hover: var(--vt-c-divider-light-1);
|
||||
|
||||
--color-heading: var(--vt-c-text-light-1);
|
||||
--color-text: var(--vt-c-text-light-1);
|
||||
|
||||
--section-gap: 160px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-background: var(--vt-c-black);
|
||||
--color-background-soft: var(--vt-c-black-soft);
|
||||
--color-background-mute: var(--vt-c-black-mute);
|
||||
|
||||
--color-border: var(--vt-c-divider-dark-2);
|
||||
--color-border-hover: var(--vt-c-divider-dark-1);
|
||||
|
||||
--color-heading: var(--vt-c-text-dark-1);
|
||||
--color-text: var(--vt-c-text-dark-2);
|
||||
}
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
color: var(--color-text);
|
||||
background: var(--color-background);
|
||||
transition:
|
||||
color 0.5s,
|
||||
background-color 0.5s;
|
||||
line-height: 1.6;
|
||||
font-family:
|
||||
Inter,
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
'Segoe UI',
|
||||
Roboto,
|
||||
Oxygen,
|
||||
Ubuntu,
|
||||
Cantarell,
|
||||
'Fira Sans',
|
||||
'Droid Sans',
|
||||
'Helvetica Neue',
|
||||
sans-serif;
|
||||
font-size: 15px;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
|
||||
|
Before Width: | Height: | Size: 276 B |
@@ -1,35 +0,0 @@
|
||||
@import './base.css';
|
||||
|
||||
#app {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
a,
|
||||
.green {
|
||||
text-decoration: none;
|
||||
color: hsla(160, 100%, 37%, 1);
|
||||
transition: 0.4s;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
a:hover {
|
||||
background-color: hsla(160, 100%, 37%, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
body {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
#app {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
}
|
||||
@@ -2,9 +2,9 @@ import { createApp } from 'vue'
|
||||
import { createPinia } from 'pinia'
|
||||
import App from './App'
|
||||
import router from './router'
|
||||
import { init } from "shared/normalize";
|
||||
import element from "shared/element-plus";
|
||||
|
||||
import { initNormalizeStyles } from "shared/normalize";
|
||||
import elementPlus from "shared/element-plus";
|
||||
import { initPubStyles } from 'shared/pub';
|
||||
|
||||
class Main {
|
||||
constructor() {
|
||||
@@ -14,9 +14,10 @@ class Main {
|
||||
.use(router)
|
||||
.mount('#app')
|
||||
|
||||
app.use(element)
|
||||
elementPlus.init(app)
|
||||
|
||||
init()
|
||||
initNormalizeStyles()
|
||||
initPubStyles()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
import {productRouter} from 'product/ProductRouter'
|
||||
import {RouteRecordRaw} from 'vue-router'
|
||||
import { productRouter } from 'product/ProductRouter'
|
||||
import { RouteRecordRaw } from 'vue-router'
|
||||
|
||||
|
||||
const baseRouter: Array<RouteRecordRaw> = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
component: () => import('../views/Home'),
|
||||
component: () => import('../views/Home/Home'),
|
||||
},
|
||||
{
|
||||
path: '/about',
|
||||
name: 'about',
|
||||
component: () => import('../views/About'),
|
||||
component: () => import('../views/About/About'),
|
||||
},
|
||||
{
|
||||
path: '/:pathMatch(.*)*',
|
||||
@@ -21,5 +21,5 @@ const baseRouter: Array<RouteRecordRaw> = [
|
||||
];
|
||||
|
||||
// 聚合所有功能模块的路由
|
||||
const routes: RouteRecordRaw[] = [...baseRouter, ...productRouter];
|
||||
const routes: RouteRecordRaw[] = [ ...baseRouter, ...productRouter ];
|
||||
export default routes;
|
||||
4
front-end/main-app/src/app/views/About/About.module.less
Normal file
4
front-end/main-app/src/app/views/About/About.module.less
Normal file
@@ -0,0 +1,4 @@
|
||||
|
||||
.About {
|
||||
|
||||
}
|
||||
@@ -1,10 +1,12 @@
|
||||
import styles from "./About.module.less";
|
||||
|
||||
import { Component, Vue } from 'vue-facing-decorator'
|
||||
|
||||
@Component()
|
||||
export default class About extends Vue {
|
||||
render() {
|
||||
return (
|
||||
<div class="about">
|
||||
<div class={ styles.About }>
|
||||
<h1>我的</h1>
|
||||
</div>
|
||||
)
|
||||
5
front-end/main-app/src/app/views/Home/Home.module.less
Normal file
5
front-end/main-app/src/app/views/Home/Home.module.less
Normal file
@@ -0,0 +1,5 @@
|
||||
.Home {
|
||||
.title {
|
||||
color: var(--theme-color);
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,10 @@
|
||||
import styles from "./Home.module.less";
|
||||
|
||||
import { Component, Ref, Setup, Vue } from 'vue-facing-decorator'
|
||||
import Header from '../components/Header'
|
||||
import Header from '@/components/Header'
|
||||
import { RouteLocationNormalizedLoaded, Router, useRoute, useRouter } from "vue-router";
|
||||
import { ElButton, SearchIcon } from "shared/element-plus";
|
||||
import { ElButton, Icons } from "shared/element-plus";
|
||||
|
||||
|
||||
interface ListItemType {
|
||||
id: number
|
||||
@@ -29,6 +32,7 @@ export default class Home extends Vue {
|
||||
]
|
||||
|
||||
async created() {
|
||||
console.log("import.meta.env: ", import.meta.env)
|
||||
}
|
||||
|
||||
async addCount() {
|
||||
@@ -36,8 +40,6 @@ export default class Home extends Vue {
|
||||
// console.log("ref dom: ", this.refH1)
|
||||
// this.router.push({ name: 'about' })
|
||||
// this.route.query
|
||||
|
||||
|
||||
this.counter++
|
||||
}
|
||||
|
||||
@@ -48,13 +50,19 @@ export default class Home extends Vue {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div class="home">
|
||||
<h1 ref="refH1">首页</h1>
|
||||
<ElButton type="primary" icon={ SearchIcon }>按钮</ElButton>
|
||||
<div class={ styles.Home }>
|
||||
<h1 ref="refH1" class={ styles.title }>首页</h1>
|
||||
<ElButton type="primary" icon={ Icons.Search }>element-plus按钮</ElButton>
|
||||
<p onClick={ this.addCount }>counter 响应式变量（点我）：{ this.counter }</p>
|
||||
<Header
|
||||
list={ this.newList }
|
||||
text={ "测试" }>
|
||||
text={ "测试" }
|
||||
// v-slots= { {
|
||||
// default: () => <div class="default">父到子 default 插槽</div>,
|
||||
// haveName: () => <div class="haveName">父到子 具名 插槽</div>,
|
||||
// item: (val: ListItemType) => <li key={ val.id }>{ val.title }</li>
|
||||
// } }
|
||||
>
|
||||
{ {
|
||||
default: () => <div class="default">父到子 default 插槽</div>,
|
||||
haveName: () => <div class="haveName">父到子 具名 插槽</div>,
|
||||
32
front-end/main-app/src/shared/types/shared.d.ts
vendored
32
front-end/main-app/src/shared/types/shared.d.ts
vendored
@@ -1,20 +1,30 @@
|
||||
/// <reference types="vite/client" />
|
||||
|
||||
declare module 'shared/utils' {
|
||||
export const UrlCheckUtils: any;
|
||||
}
|
||||
|
||||
// 2. 为 "shared/element-plus" 模块提供精确的类型声明
|
||||
declare module 'shared/element-plus' {
|
||||
import { App } from "vue";
|
||||
export {
|
||||
ElButton,
|
||||
ElInput,
|
||||
ElTable,
|
||||
ElMessage
|
||||
// 添加其他组件
|
||||
} from 'element-plus';
|
||||
export const initElement: (app: App) => void;
|
||||
export default any;
|
||||
import * as ElementPlus from 'element-plus';
|
||||
import * as ElementPlusIcons from '@element-plus/icons-vue';
|
||||
import type { App } from 'vue';
|
||||
export * from 'element-plus';
|
||||
export import Icons = ElementPlusIcons;
|
||||
|
||||
export function init(app: App): void;
|
||||
|
||||
const defaultExport: typeof ElementPlus & {
|
||||
Icons: typeof ElementPlusIcons;
|
||||
init: typeof init;
|
||||
};
|
||||
export default defaultExport;
|
||||
}
|
||||
|
||||
declare module 'shared/normalize' {
|
||||
export const init: () => void;
|
||||
export const initNormalizeStyles: () => void;
|
||||
}
|
||||
|
||||
declare module 'shared/pub' {
|
||||
export function initPubStyles(): void;
|
||||
}
|
||||
@@ -4,6 +4,7 @@ import { defineConfig, loadEnv } from 'vite'
|
||||
import vueJsx from '@vue3-oop/plugin-vue-jsx'
|
||||
import federation from '@originjs/vite-plugin-federation';
|
||||
import { nacosRegVitePlugin } from "nacos-federation";
|
||||
import { visualizer } from 'rollup-plugin-visualizer';
|
||||
|
||||
export default defineConfig(async ({ mode }) => {
|
||||
const env = loadEnv(mode, process.cwd());
|
||||
@@ -18,7 +19,7 @@ export default defineConfig(async ({ mode }) => {
|
||||
return {
|
||||
server: {
|
||||
port: Number(env.VITE_SERVER_PORT),
|
||||
host: '0.0.0.0',
|
||||
host: '::',
|
||||
strictPort: true,
|
||||
},
|
||||
plugins: [
|
||||
@@ -45,6 +46,13 @@ export default defineConfig(async ({ mode }) => {
|
||||
'vue-router': { requiredVersion: '^4.0.6' },
|
||||
pinia: { requiredVersion: '^3.0.3' }
|
||||
}
|
||||
}),
|
||||
visualizer({
|
||||
title: "主应用依赖分析",
|
||||
filename: 'dist/stats.html', // 分析文件输出路径
|
||||
open: false, // 构建完成后自动打开
|
||||
gzipSize: true, // 显示gzip后的大小
|
||||
brotliSize: true, // 显示brotli后的大小
|
||||
})
|
||||
],
|
||||
build: {
|
||||
|
||||
Reference in New Issue
Block a user