王育民 2 жил өмнө
parent
commit
48c33b44a7

+ 1 - 1
README.md

@@ -1,4 +1,4 @@
-# chen
+# vue-chen
 
 ## Project setup
 ```

+ 2 - 1
package.json

@@ -9,7 +9,8 @@
   },
   "dependencies": {
     "core-js": "^2.6.5",
-    "vue": "^2.6.10"
+    "vue": "^2.6.10",
+    "vue-router": "3.1.3"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.12.0",

+ 7 - 1
public/index.html

@@ -6,8 +6,14 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title>chen</title>
+
+    <style>
+      html, body {
+        height: 100%;
+      }
+    </style>
   </head>
-  <body>
+  <body style="margin: 0; padding: 0;">
     <noscript>
       <strong>We're sorry but chen doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>

+ 39 - 13
src/App.vue

@@ -1,28 +1,54 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <router-view name="header"/>
+    <section class="main">
+      <router-view/>
+    </section>
+    <router-view name="footer"/>
   </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
-
 export default {
   name: 'app',
-  components: {
-    HelloWorld
-  }
+  components: {}
 }
 </script>
 
 <style>
 #app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+header {
+  flex: 0 0 auto;
+}
+
+.main {
+  flex: 1 0 auto;
+}
+
+footer {
+  flex: 0 0 auto;
+}
+
+@media all and (min-width: 991px) {
+  .main {
+    padding: 60px 120px;
+  }
+}
+
+@media (max-width: 991px) and (min-width: 580px) {
+  .main {
+    padding: 30px 60px;
+  }
+}
+
+@media all and (max-width: 580px) {
+  .main {
+    padding: 12px 12px;
+  }
 }
 </style>

+ 40 - 0
src/layout/Footer.vue

@@ -0,0 +1,40 @@
+<template>
+  <footer class="footer">
+    <div class="container">
+      <span class="copyright">
+        Except where noted, all site content is copyright <a href="#" target="_blank">Chen Luyu</a>. All rights reserved.
+      </span>
+      <span style="float: right">
+        &copy; {{ year }}
+      </span>
+    </div>
+  </footer>
+</template>
+
+<script>
+export default {
+  name: "Footer",
+  props: {
+    backgroundColor: String,
+    type: String
+  },
+  data() {
+    return {
+      year: new Date().getFullYear()
+    };
+  }
+}
+</script>
+
+<style scoped>
+.footer {
+  background-color: black;
+  color: white;
+  font-size: 14px;
+  padding: 32px;
+}
+
+a {
+  color: white;
+}
+</style>

+ 84 - 0
src/layout/Header.vue

@@ -0,0 +1,84 @@
+<template>
+  <header :data-color="color">
+    <div id="logo">
+      <a href="/#/">Chen.Space</a>
+    </div>
+
+    <nav id="menu">
+      <div :class="{active: active === 'index'}">
+        <a href="/#/">Projects</a>
+      </div>
+      <div :class="{active: active === 'about'}">
+        <a href="/#/about">About</a>
+      </div>
+      <div :class="{active: active === 'contact'}">
+        <a href="/#/contact">Contact</a>
+      </div>
+    </nav>
+
+    <span id="more">
+      <a href="/#/"><img alt="" src="../assets/logo.png" height="20"/></a>
+    </span>
+  </header>
+</template>
+
+<script>
+export default {
+  name: "Header",
+  props: {
+    active: String,
+    color: String,
+    type: String
+  },
+  methods: {},
+  mounted() {
+    // console.log(111);
+  },
+}
+</script>
+
+<style scoped>
+header {
+  display: flex;
+  flex-direction: row;
+  padding: 30px;
+  /*background: blanchedalmond;*/
+}
+
+#logo {
+  flex: 0 0 auto;
+}
+
+#logo a {
+  font-weight: bold;
+}
+
+#menu {
+  flex: 1 0 auto;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+}
+
+#menu div {
+  margin: 0 6px;
+  padding: 0 4px 4px 4px;
+}
+
+#menu div.active {
+  border-bottom: black solid 2px;
+}
+
+#menu div a {
+  color: black;
+  text-decoration: none;
+  font-size: 14px;
+  font-weight: unset;
+}
+
+#more {
+  flex: 0 0 auto;
+}
+</style>

+ 2 - 0
src/main.js

@@ -1,8 +1,10 @@
 import Vue from 'vue'
 import App from './App.vue'
+import router from "./router";
 
 Vue.config.productionTip = false
 
 new Vue({
+  router,
   render: h => h(App),
 }).$mount('#app')

+ 48 - 0
src/router.js

@@ -0,0 +1,48 @@
+import Vue from "vue";
+import Router from "vue-router";
+import Header from "./layout/Header.vue";
+import Footer from "./layout/Footer.vue";
+import Index from "./views/Index.vue";
+import About from "./views/About.vue";
+import Contact from "./views/Contact.vue";
+
+Vue.use(Router);
+
+export default new Router({
+  routes: [
+    {
+      path: "/",
+      name: "index",
+      components: { default: Index, header: Header, footer: Footer },
+      props: {
+        header: { active: "index", color: "red" },
+        footer: { backgroundColor: "black" }
+      }
+    },
+    {
+      path: "/about",
+      name: "about",
+      components: { default: About, header: Header, footer: Footer },
+      props: {
+        header: { active: "about", color: "black" },
+        footer: { backgroundColor: "black" }
+      }
+    },
+    {
+      path: "/contact",
+      name: "contact",
+      components: { default: Contact, header: Header, footer: Footer },
+      props: {
+        header: { active: "contact", color: "black" },
+        footer: { backgroundColor: "black" }
+      }
+    },
+  ],
+  scrollBehavior: to => {
+    if (to.hash) {
+      return { selector: to.hash };
+    } else {
+      return { x: 0, y: 0 };
+    }
+  }
+});

+ 25 - 0
src/views/About.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="container">
+    <div>
+      <a href="/#/"><h1>Biography</h1></a>
+      <a href="/#/"><h1>CV</h1></a>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "About"
+}
+</script>
+
+<style scoped>
+h1 {
+  font-size: 28px;
+}
+
+a {
+  color: black;
+  text-decoration: none;
+}
+</style>

+ 27 - 0
src/views/Contact.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="container">
+    <div>
+      <h1>Contact me</h1>
+      <p>
+        <a href="mailto:1441810516@qq.com">1441810516@qq.com</a>
+      </p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Contact"
+}
+</script>
+
+<style scoped>
+h1 {
+  font-size: 32px;
+}
+
+a {
+  color: black;
+  text-decoration: none;
+}
+</style>

+ 30 - 0
src/views/Index.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="container">
+    <div>
+      <a href="/#/"><h1>The Perspective of The Other, 2022</h1></a>
+      <a href="/#/"><h1>The Last Mile, 2021</h1></a>
+      <a href="/#/"><h1>La jetée 2021,2021</h1></a>
+      <a href="/#/"><h1>Cardboard Cut-outs, 2020</h1></a>
+      <a href="/#/"><h1>The right to clip, 2020</h1></a>
+      <a href="/#/"><h1>film.exe, 2020</h1></a>
+      <a href="/#/"><h1>Overexposure, 2019</h1></a>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Index"
+}
+</script>
+
+<style scoped>
+h1 {
+  font-size: 28px;
+}
+
+a {
+  color: black;
+  text-decoration: none;
+}
+</style>

+ 13 - 0
vue.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  devServer: {
+    port: 8000
+  },
+  css: {
+    loaderOptions: {
+      css: {
+        sourceMap: process.env.NODE_ENV !== "production"
+      }
+    }
+  },
+  publicPath: process.env.NODE_ENV === "production" ? "./" : "/"
+};

+ 49 - 6
yarn.lock

@@ -266,7 +266,7 @@
 
 "@babel/parser@^7.18.4", "@babel/parser@^7.20.7", "@babel/parser@^7.7.0":
   version "7.20.7"
-  resolved "https://registry.npmmirror.com/@babel/parser/-/parser-7.20.7.tgz#66fe23b3c8569220817d5feb8b9dcdc95bb4f71b"
+  resolved "https://repo.huaweicloud.com/repository/npm/@babel/parser/-/parser-7.20.7.tgz#66fe23b3c8569220817d5feb8b9dcdc95bb4f71b"
   integrity sha512-T3Z9oHybU+0vZlY9CiDSJQTD5ZapcW18ZctFMi0MOAl/4BjFF4ul7NVSARLdbGO5vDqy9eQiGTV0LtKfvCYvcg==
 
 "@babel/plugin-proposal-async-generator-functions@^7.2.0":
@@ -676,7 +676,7 @@
 
 "@babel/runtime@^7.0.0", "@babel/runtime@^7.8.4":
   version "7.20.7"
-  resolved "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.20.7.tgz#fcb41a5a70550e04a7b708037c7c32f7f356d8fd"
+  resolved "https://repo.huaweicloud.com/repository/npm/@babel/runtime/-/runtime-7.20.7.tgz#fcb41a5a70550e04a7b708037c7c32f7f356d8fd"
   integrity sha512-UF0tvkUtxwAgZ5W/KrkHf0Rn0fdnLDU9ScxBrEVNUprE/MzirjK4MJUX1/BVDv00Sv8cljtukVK1aky++X1SjQ==
   dependencies:
     regenerator-runtime "^0.13.11"
@@ -1064,7 +1064,7 @@
 
 "@vue/compiler-sfc@2.7.14":
   version "2.7.14"
-  resolved "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-2.7.14.tgz#3446fd2fbb670d709277fc3ffa88efc5e10284fd"
+  resolved "https://repo.huaweicloud.com/repository/npm/@vue/compiler-sfc/-/compiler-sfc-2.7.14.tgz#3446fd2fbb670d709277fc3ffa88efc5e10284fd"
   integrity sha512-aNmNHyLPsw+sVvlQFQ2/8sjNuLtK54TC6cuKnVzAY93ks4ZBrvwQSnkkIh7bsbNhum5hJBS00wSDipQ937f5DA==
   dependencies:
     "@babel/parser" "^7.18.4"
@@ -1087,6 +1087,13 @@
   optionalDependencies:
     prettier "^1.18.2 || ^2.0.0"
 
+"@vue/eslint-config-prettier@6.0.0":
+  version "6.0.0"
+  resolved "https://repo.huaweicloud.com/repository/npm/@vue/eslint-config-prettier/-/eslint-config-prettier-6.0.0.tgz#ad5912b308f4ae468458e02a2b05db0b9d246700"
+  integrity sha512-wFQmv45c3ige5EA+ngijq40YpVcIkAy0Lihupnsnd1Dao5CBbPyfCzqtejFLZX1EwH/kCJdpz3t6s+5wd3+KxQ==
+  dependencies:
+    eslint-config-prettier "^6.0.0"
+
 "@vue/preload-webpack-plugin@^1.1.0":
   version "1.1.2"
   resolved "https://registry.npmmirror.com/@vue/preload-webpack-plugin/-/preload-webpack-plugin-1.1.2.tgz#ceb924b4ecb3b9c43871c7a429a02f8423e621ab"
@@ -2758,7 +2765,7 @@ csso@^4.0.2:
 
 csstype@^3.1.0:
   version "3.1.1"
-  resolved "https://registry.npmmirror.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9"
+  resolved "https://repo.huaweicloud.com/repository/npm/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9"
   integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==
 
 current-script-polyfill@^1.0.0:
@@ -3247,6 +3254,13 @@ escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
   resolved "https://registry.npmmirror.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
   integrity sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==
 
+eslint-config-prettier@^6.0.0:
+  version "6.15.0"
+  resolved "https://repo.huaweicloud.com/repository/npm/eslint-config-prettier/-/eslint-config-prettier-6.15.0.tgz#7f93f6cb7d45a92f1537a70ecc06366e1ac6fed9"
+  integrity sha512-a1+kOYLR8wMGustcgAjdydMsQ2A/2ipRPwRKUmfYaSxc9ZPcrku080Ctl6zrZzZNs/U82MjSv+qKREkoq3bJaw==
+  dependencies:
+    get-stdin "^6.0.0"
+
 eslint-loader@^2.1.2:
   version "2.2.1"
   resolved "https://registry.npmmirror.com/eslint-loader/-/eslint-loader-2.2.1.tgz#28b9c12da54057af0845e2a6112701a2f6bf8337"
@@ -3258,6 +3272,13 @@ eslint-loader@^2.1.2:
     object-hash "^1.1.4"
     rimraf "^2.6.1"
 
+eslint-plugin-prettier@3.1.1:
+  version "3.1.1"
+  resolved "https://repo.huaweicloud.com/repository/npm/eslint-plugin-prettier/-/eslint-plugin-prettier-3.1.1.tgz#507b8562410d02a03f0ddc949c616f877852f2ba"
+  integrity sha512-A+TZuHZ0KU0cnn56/9mfR7/KjUJ9QNVXUhwvRFSR7PGPe0zQR6PTkmyqg1AtUUEOzTqeRsUwyKFh0oVZKVCrtA==
+  dependencies:
+    prettier-linter-helpers "^1.0.0"
+
 eslint-plugin-vue@^4.7.1:
   version "4.7.1"
   resolved "https://registry.npmmirror.com/eslint-plugin-vue/-/eslint-plugin-vue-4.7.1.tgz#c829b9fc62582c1897b5a0b94afd44ecca511e63"
@@ -3643,6 +3664,11 @@ fast-deep-equal@^3.1.1:
   resolved "https://registry.npmmirror.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
+fast-diff@^1.1.2:
+  version "1.2.0"
+  resolved "https://repo.huaweicloud.com/repository/npm/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
+  integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
+
 fast-glob@^2.2.6:
   version "2.2.7"
   resolved "https://registry.npmmirror.com/fast-glob/-/fast-glob-2.2.7.tgz#6953857c3afa475fff92ee6015d52da70a4cd39d"
@@ -3988,6 +4014,11 @@ get-intrinsic@^1.0.2, get-intrinsic@^1.1.1, get-intrinsic@^1.1.3:
     has "^1.0.3"
     has-symbols "^1.0.3"
 
+get-stdin@^6.0.0:
+  version "6.0.0"
+  resolved "https://repo.huaweicloud.com/repository/npm/get-stdin/-/get-stdin-6.0.0.tgz#9e09bf712b360ab9225e812048f71fde9c89657b"
+  integrity sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g==
+
 get-stream@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmmirror.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"
@@ -6602,7 +6633,7 @@ postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.27, postcss@^7.0.32, postcss@^7.0.3
 
 postcss@^8.4.14:
   version "8.4.20"
-  resolved "https://registry.npmmirror.com/postcss/-/postcss-8.4.20.tgz#64c52f509644cecad8567e949f4081d98349dc56"
+  resolved "https://repo.huaweicloud.com/repository/npm/postcss/-/postcss-8.4.20.tgz#64c52f509644cecad8567e949f4081d98349dc56"
   integrity sha512-6Q04AXR1212bXr5fh03u8aAwbLxAQNGQ/Q1LNa0VfOI06ZAlhPHtQvE4OIdpj4kLThXilalPnmDSOD65DcHt+g==
   dependencies:
     nanoid "^3.3.4"
@@ -6619,6 +6650,13 @@ prepend-http@^1.0.0:
   resolved "https://registry.npmmirror.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
   integrity sha512-PhmXi5XmoyKw1Un4E+opM2KcsJInDvKyuOumcjjw3waw86ZNjHwVUOOWLc4bCzLdcKNaWBH9e99sbWzDQsVaYg==
 
+prettier-linter-helpers@^1.0.0:
+  version "1.0.0"
+  resolved "https://repo.huaweicloud.com/repository/npm/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz#d23d41fe1375646de2d0104d3454a3008802cf7b"
+  integrity sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==
+  dependencies:
+    fast-diff "^1.1.2"
+
 "prettier@^1.18.2 || ^2.0.0":
   version "2.8.1"
   resolved "https://registry.npmmirror.com/prettier/-/prettier-2.8.1.tgz#4e1fd11c34e2421bc1da9aea9bd8127cd0a35efc"
@@ -8346,6 +8384,11 @@ vue-loader@^15.7.0:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
+vue-router@3.1.3:
+  version "3.1.3"
+  resolved "https://repo.huaweicloud.com/repository/npm/vue-router/-/vue-router-3.1.3.tgz#e6b14fabc0c0ee9fda0e2cbbda74b350e28e412b"
+  integrity sha512-8iSa4mGNXBjyuSZFCCO4fiKfvzqk+mhL0lnKuGcQtO1eoj8nq3CmbEG8FwK5QqoqwDgsjsf1GDuisDX4cdb/aQ==
+
 vue-style-loader@^4.1.0:
   version "4.1.3"
   resolved "https://registry.npmmirror.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz#6d55863a51fa757ab24e89d9371465072aa7bc35"
@@ -8369,7 +8412,7 @@ vue-template-es2015-compiler@^1.9.0:
 
 vue@^2.6.10:
   version "2.7.14"
-  resolved "https://registry.npmmirror.com/vue/-/vue-2.7.14.tgz#3743dcd248fd3a34d421ae456b864a0246bafb17"
+  resolved "https://repo.huaweicloud.com/repository/npm/vue/-/vue-2.7.14.tgz#3743dcd248fd3a34d421ae456b864a0246bafb17"
   integrity sha512-b2qkFyOM0kwqWFuQmgd4o+uHGU7T+2z3T+WQp8UBjADfEv2n4FEMffzBmCKNP0IGzOEEfYjvtcC62xaSKeQDrQ==
   dependencies:
     "@vue/compiler-sfc" "2.7.14"