update

src/App.vue

@@ -1,32 +1,13 @@
 <template>
-  <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
+  <div>
     <router-view />
   </div>
 </template>
 
 <style lang="scss">
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-
-#nav {
-  padding: 30px;
-
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-
-    &.router-link-exact-active {
-      color: #42b983;
-    }
-  }
+// 全局样式设置
+body {
+  margin: 0;
+  background-color: $color-page-background;
 }
 </style>

src/assets/scss/public.scss

@@ -1 +1,18 @@
-$default-color: green;
+// color
+$color-page-background: #f4f7fc;
+$color-card-background: #ffffff;
+
+// shadow
+$shadow-default: 0 3px 8px rgba(211, 215, 222, 0.4);
+$shadow-darker: 0 3px 8px rgb(211, 215, 222);
+$shadow-lighter: 0 3px 8px rgba(211, 215, 222, 0.2);
+
+// border
+$borderRadius-default: 4px;
+
+// font
+
+// margin
+$margin-default: 8px;
+$margin-small: 4px;
+$margin-large: 12px;

src/views/About.vue

@@ -6,6 +6,6 @@
 
 <style lang="scss" scoped>
 h1 {
-  color: $default-color;
+  color: green;
 }
 </style>

src/views/Home.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="home">
-    <h1>This is a home page</h1>
+    <div class="header"></div>
+    <div class="page">
+      <div class="left-menu"></div>
+      <div class="page-content"></div>
+    </div>
   </div>
 </template>
 
@@ -15,7 +19,29 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-h1 {
-  color: $default-color;
+.header {
+  background-color: #4368b6;
+  height: 64px;
+  max-width: 100%;
+  -webkit-box-shadow: $shadow-default;
+  box-shadow: $shadow-default;
+}
+.page {
+  max-width: 100%;
+  height: 1000px;
+  display: flex;
+}
+.left-menu {
+  background-color: #e4930a;
+  height: 100%;
+  width: 200px;
+}
+.page-content {
+  background-color: $color-card-background;
+  height: 100%;
+  width: 100%;
+  margin: 12px;
+  border-radius: $borderRadius-default;
+  box-shadow: $shadow-default;
 }
 </style>

vue.config.js

@@ -1,13 +1,6 @@
 module.exports = {
   css: {
     loaderOptions: {
-      // 给 sass-loader 传递选项
-      sass: {
-        // @/ 是 src/ 的别名
-        // 所以这里假设你有 `src/variables.sass` 这个文件
-        // 注意：在 sass-loader v8 中，这个选项名是 "prependData"
-        // additionalData: `@import "~@/variables.sass"`,
-      },
       // 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
       // 因为 `scss` 语法在内部也是由 sass-loader 处理的
       // 但是在配置 `prependData` 选项的时候