Home Explore Help
Register Sign In
bianjiang
/
xihuaDesign
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

config

bianjiang 1 year ago
parent
0842e0283e
commit
f6154b905f
13 changed files with 146 additions and 29 deletions
Split View Show Diff Stats
  1. 4 5
      components.d.ts
  2. 1 1
      index.html
  3. 2 0
      package.json
  4. 19 7
      src/App.tsx
  5. BIN
      src/assets/logo_header.png
  6. 46 0
      src/components/layout/Header.tsx
  7. 2 2
      src/router/index.ts
  8. 7 4
      src/styles/base.css
  9. 1 0
      src/typings/asset.d.ts
  10. 4 0
      src/utils/image.ts
  11. 1 0
      src/utils/index.ts
  12. 23 9
      vite.config.ts
  13. 36 1
      yarn.lock

+ 4 - 5
components.d.ts
View File 

@@ -5,12 +5,11 @@
 
 // Read more: https://github.com/vuejs/core/pull/3399
 
 import '@vue/runtime-core'
 
 
-export {}
 
+export {};
 
 
-declare module '@vue/runtime-core' {
 
+declare module "@vue/runtime-core" {
 
   export interface GlobalComponents {
 
-    HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
 
-    RouterLink: typeof import('vue-router')['RouterLink']
 
-    RouterView: typeof import('vue-router')['RouterView']
 
+    RouterLink: typeof import("vue-router")["RouterLink"];
 
+    RouterView: typeof import("vue-router")["RouterView"];
 
   }
 
 }

+ 1 - 1
index.html
View File 

@@ -4,7 +4,7 @@
 
     <meta charset="UTF-8" />
 
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-    <title>Vite + Vue + TS</title>
 
+    <title>西华大学美术与设计学院</title>
 
   </head>
 
   <body>
 
     <div id="app"></div>

+ 2 - 0
package.json
View File 

@@ -14,6 +14,8 @@
 
     "@linaria/babel-preset": "^4.4.4",
 
     "@linaria/core": "^4.2.9",
 
     "@linaria/rollup": "^4.3.7",
 
+    "@rollup/plugin-inject": "^5.0.3",
 
+    "@types/rollup-plugin-css-only": "^3.1.0",
 
     "@vitejs/plugin-vue-jsx": "^3.0.1",
 
     "ant-design-vue": "^3.2.19",
 
     "less": "^4.1.3",

+ 19 - 7
src/App.tsx
View File 

@@ -1,14 +1,26 @@
 
 import { css } from "@linaria/core";
 
+import { Layout } from "ant-design-vue";
 
 import { defineComponent } from "vue";
 
-
 
+const { Header, Content, Footer } = Layout;
 
+import HeaderComponent from "./components/layout/Header";
 
 export default defineComponent(() => {
 
   return () => (
 
-    <div class={page}>
 
-      <router-view></router-view>
 
-    </div>
 
+    <Layout>
 
+      <Header class={HeaderLayout}>
 
+        <HeaderComponent />
 
+      </Header>
 
+      <Content>
 
+        <router-view></router-view>
 
+      </Content>
 
+      <Footer></Footer>
 
+    </Layout>
 
   );
 
 });
 
-
 
-const page = css`
 
-  height: 100%;
 
+const HeaderLayout = css`
 
+  &.ant-layout-header {
 
+    height: auto;
 
+    line-height: 1;
 
+    padding: 0;
 
+    background-color: transparent;
 
+  }
 
 `;

BIN
src/assets/logo_header.png
View File


+ 46 - 0
src/components/layout/Header.tsx
View File 

@@ -0,0 +1,46 @@
 
+import { css } from "@linaria/core";
 
+import { Space } from "ant-design-vue";
 
+import { defineComponent } from "vue";
 
+
 
+export default defineComponent(() => {
 
+  return () => (
 
+    <div class={HeaderLayout}>
 
+      <div class={"lay_top flex align-center justify-between"}>
 
+        <div>立足四川、面向全国，贴近行业，服务社会。</div>
 
+        <div>
 
+          <Space size={50}>
 
+            <a>西华首页</a>
 
+            <a>校友空间</a>
 
+            <a>师生作品</a>
 
+            <a>资料下载</a>
 
+          </Space>
 
+        </div>
 
+      </div>
 
+      <div class={"lay_menu"}>
 
+        <div>
 
+          <router-link to="/">
 
+            <img src={getImageUrl("logo_header.png")} />
 
+          </router-link>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  );
 
+});
 
+const HeaderLayout = css`
 
+  .lay_top {
 
+    padding: 10px 30px;
 
+    background: #242424;
 
+    color: var(--vt-c-white);
 
+
 
+    a {
 
+      color: var(--vt-c-white);
 
+      &:hover {
 
+        text-decoration: underline;
 
+      }
 
+    }
 
+  }
 
+  .lay_menu {
 
+    padding: 22px 30px;
 
+    background: var(--vt-c-primary);
 
+  }
 
+`;

+ 2 - 2
src/router/index.ts
View File 

@@ -1,8 +1,8 @@
 
-import { createRouter, createWebHistory } from "vue-router";
 
+import { createRouter, createWebHashHistory } from "vue-router";
 
 import HomeView from "../views/home";
 
 
 const router = createRouter({
 
-  history: createWebHistory(import.meta.env.BASE_URL),
 
+  history: createWebHashHistory(),
 
   routes: [
 
     {
 
       path: "/",

+ 7 - 4
src/styles/base.css
View File 

@@ -10,6 +10,8 @@
 
 
   --vt-c-indigo: #2c3e50;
 
 
+  --vt-c-primary: #41969c;
 
+
 
   --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);
 
@@ -64,10 +66,11 @@ body {
 
   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;
 
+  line-height: 1;
 
+  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
 
+    Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue",
 
+    sans-serif;
 
+  font-size: 14px;
 
   text-rendering: optimizeLegibility;
 
   -webkit-font-smoothing: antialiased;
 
   -moz-osx-font-smoothing: grayscale;

+ 1 - 0
src/typings/asset.d.ts
View File 

@@ -0,0 +1 @@
 
+declare var getImageUrl: (url: IAssetURLs) => string;

+ 4 - 0
src/utils/image.ts
View File 

@@ -0,0 +1,4 @@
 
+export function getImageUrl(path: string) {
 
+  const url = new URL(`/src/assets/${path}`, import.meta.url);
 
+  return url.href;
 
+}

+ 1 - 0
src/utils/index.ts
View File 

@@ -0,0 +1 @@
 
+export * from "./image";

+ 23 - 9
vite.config.ts
View File 

@@ -1,4 +1,4 @@
 
-import { defineConfig } from "vite";
 
+import { defineConfig, normalizePath } from "vite";
 
 import { fileURLToPath, URL } from "node:url";
 
 import vue from "@vitejs/plugin-vue";
 
 import vueJsx from "@vitejs/plugin-vue-jsx";
 
@@ -9,8 +9,26 @@ import Components from "unplugin-vue-components/vite";
 
 import { AntDesignVueResolver } from "unplugin-vue-components/resolvers";
 
 // https://vitejs.dev/config/
 
 export default defineConfig({
 
+  base: process.env.NODE_ENV == "production" ? "./" : "./",
 
   plugins: [
 
     WindiCSS(),
 
+    linaria({
 
+      include: ["**/*.{ts,tsx}"],
 
+      sourceMap: process.env.NODE_ENV !== "production",
 
+      babelOptions: {
 
+        presets: ["@babel/preset-typescript"],
 
+      },
 
+    }),
 
+    // css({
 
+    //   output: (
 
+    //     styles: string,
 
+    //     styleNodes: Record<string, string>,
 
+    //     bundle: any
 
+    //   ) => {
 
+    //     console.log(bundle);
 
+    //     return "style.css";
 
+    //   },
 
+    // }),
 
     Components({
 
       resolvers: [
 
         AntDesignVueResolver({
 
@@ -18,17 +36,13 @@ export default defineConfig({
 
         }),
 
       ],
 
     }),
 
-    linaria({
 
-      babelOptions: {
 
-        presets: ["@babel/preset-typescript"],
 
-      },
 
-    }),
 
-    css({
 
-      output: "styles.css",
 
-    }),
 
     vue(),
 
     vueJsx(),
 
   ],
 
+  esbuild: {
 
+    include: ["./src/**/*.tsx"],
 
+    jsxInject: `import { getImageUrl } from '@/utils'`,
 
+  },
 
   css: {
 
     preprocessorOptions: {
 
       less: {

+ 36 - 1
yarn.lock
View File 

@@ -1253,7 +1253,16 @@
 
     "@nodelib/fs.scandir" "2.1.5"
 
     fastq "^1.6.0"
 
 
-"@rollup/pluginutils@5", "@rollup/pluginutils@^5.0.2":
 
+"@rollup/plugin-inject@^5.0.3":
 
+  version "5.0.3"
 
+  resolved "http://124.70.149.18:4873/@rollup%2fplugin-inject/-/plugin-inject-5.0.3.tgz#0783711efd93a9547d52971db73b2fb6140a67b1"
 
+  integrity sha512-411QlbL+z2yXpRWFXSmw/teQRMkXcAAC8aYTemc15gwJRpvEVDQwoe+N/HTFD8RFG8+88Bme9DK2V9CVm7hJdA==
 
+  dependencies:
 
+    "@rollup/pluginutils" "^5.0.1"
 
+    estree-walker "^2.0.2"
 
+    magic-string "^0.27.0"
 
+
 
+"@rollup/pluginutils@5", "@rollup/pluginutils@^5.0.1", "@rollup/pluginutils@^5.0.2":
 
   version "5.0.2"
 
   resolved "http://124.70.149.18:4873/@rollup%2fpluginutils/-/pluginutils-5.0.2.tgz#012b8f53c71e4f6f9cb317e311df1404f56e7a33"
 
   integrity sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==
 
@@ -1278,16 +1287,34 @@
 
     core-js "^3.15.1"
 
     nanopop "^2.1.0"
 
 
+"@types/estree@0.0.39":
 
+  version "0.0.39"
 
+  resolved "http://124.70.149.18:4873/@types%2festree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
 
+  integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==
 
+
 
 "@types/estree@^1.0.0":
 
   version "1.0.1"
 
   resolved "http://124.70.149.18:4873/@types%2festree/-/estree-1.0.1.tgz#aa22750962f3bf0e79d753d3cc067f010c95f194"
 
   integrity sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==
 
 
+"@types/node@*":
 
+  version "18.16.2"
 
+  resolved "http://124.70.149.18:4873/@types%2fnode/-/node-18.16.2.tgz#2f610ea71034b3971c312192377f8a7178eb57f1"
 
+  integrity sha512-GQW/JL/5Fz/0I8RpeBG9lKp0+aNcXEaVL71c0D2Q0QHDTFvlYKT7an0onCUXj85anv7b4/WesqdfchLc0jtsCg==
 
+
 
 "@types/node@^18.16.1":
 
   version "18.16.1"
 
   resolved "http://124.70.149.18:4873/@types%2fnode/-/node-18.16.1.tgz#5db121e9c5352925bb1f1b892c4ae620e3526799"
 
   integrity sha512-DZxSZWXxFfOlx7k7Rv4LAyiMroaxa3Ly/7OOzZO8cBNho0YzAi4qlbrx8W27JGqG57IgR/6J7r+nOJWw6kcvZA==
 
 
+"@types/rollup-plugin-css-only@^3.1.0":
 
+  version "3.1.0"
 
+  resolved "http://124.70.149.18:4873/@types%2frollup-plugin-css-only/-/rollup-plugin-css-only-3.1.0.tgz#22d847b77be79321671beaeaaddffd8b9417a8e6"
 
+  integrity sha512-2/CYJ3xDTVtS9DBDXhj0jjxF3idO1yUjJWjFzqA3JlK8NqSlUHeMKv3FH/VILLrnvdZRY+901TlDPnKa4WhFYA==
 
+  dependencies:
 
+    "@types/node" "*"
 
+    rollup "^0.63.4"
 
+
 
 "@vitejs/plugin-vue-jsx@^3.0.1":
 
   version "3.0.1"
 
   resolved "http://124.70.149.18:4873/@vitejs%2fplugin-vue-jsx/-/plugin-vue-jsx-3.0.1.tgz#4c088ce445e34ae27e78a66e6dbf2cc2e85f827d"
 
@@ -2387,6 +2414,14 @@ rollup-plugin-css-only@^4.3.0:
 
   dependencies:
 
     "@rollup/pluginutils" "5"
 
 
+rollup@^0.63.4:
 
+  version "0.63.5"
 
+  resolved "http://124.70.149.18:4873/rollup/-/rollup-0.63.5.tgz#5543eecac9a1b83b7e1be598b5be84c9c0a089db"
 
+  integrity sha512-dFf8LpUNzIj3oE0vCvobX6rqOzHzLBoblyFp+3znPbjiSmSvOoK2kMKx+Fv9jYduG1rvcCfCveSgEaQHjWRF6g==
 
+  dependencies:
 
+    "@types/estree" "0.0.39"
 
+    "@types/node" "*"
 
+
 
 rollup@^3.21.0:
 
   version "3.21.0"
 
   resolved "http://124.70.149.18:4873/rollup/-/rollup-3.21.0.tgz#0a71517db56e150222670f88e5e7acfa4fede7c8"