rewite base structure

Author: liaofeiyin

src/app/index.ts

@@ -19,7 +19,7 @@ Vue.use(OptionGroup)
 Vue.use(Input)
 
 
-import './scss/index.scss'
+import '@/scss/index.scss'
 
 
 Vue.config.productionTip = false;

src/app/router.ts

@@ -5,7 +5,7 @@ import NotFoundComponent from '@/components/notFoundComponent.vue'
 Vue.use(Router);
 
 export default new Router({
- mode: "history",
+ //mode: "history",
  base: process.env.BASE_URL,
  scrollBehavior,
  routes: [{

src/app/scss/_colors.scss renamed to src/scss/_colors.scss

@@ -0,0 +1,32 @@
+#app {
+ width: 1180px;
+ margin: 0 auto;
+
+ // 主体区域 Main container
+ .main-container {
+ min-height: 100%;
+ transition: margin-left .28s;
+ margin-left: $sideBarWidth;
+ position: relative;
+ }
+
+ // 侧边栏 Sidebar container
+ .sidebar-container {
+ transition: width 0.28s;
+ width: $sideBarWidth !important;
+ height: 100%;
+ position: fixed;
+ font-size: 0px;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 1001;
+ overflow: hidden;
+ .el-menu {
+ border: none;
+ height: 100%;
+ width: 100% !important;
+ }
+ }
+}
+

src/app/scss/_flex.scss renamed to src/scss/_flex.scss

@@ -1,35 +1,3 @@
-@import 'text';
-@import 'flex';
-@import 'colors';
-
-html {
- line-height: 1.4;
- -webkit-tap-highlight-color: transparent;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-body {
- margin: 0;
- background-color: #ffffff;
-}
-
-p {
- margin-top: 0;
- margin-bottom: 0;
-}
-
-input {
- outline: 0;
- border: 0;
- background: transparent;
-}
-
-#app {
- width: 1180px;
- margin: 0 auto;
-}
-
 $inputWidth: 220px;
 $marginRight: 20px;
 .a-input-block {
@@ -72,5 +40,4 @@ $marginRight: 20px;
  padding-left: 80px;
  }
  }
-}
-
+}

src/scss/_layout.scss

@@ -1,6 +1,9 @@
+// ！！！不需要再单独引入！！！通过 webpack sass-resources-loader 全局注入
+
 //$_: 1rem/20;
 $_: 1px;
 $px: $_;
+$sideBarWidth: 180px;
 
 $weight-map: (
  ultralight: 100,

src/app/scss/index.scss renamed to src/scss/_reset-element-ui.scss

@@ -0,0 +1,33 @@
+@import 'colors';
+@import 'flex';
+@import 'layout';
+@import 'reset-element-ui';
+@import 'text';
+
+html {
+ line-height: 1.4;
+ -webkit-tap-highlight-color: transparent;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+ margin: 0;
+ background-color: #ffffff;
+}
+
+p {
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
+input {
+ outline: 0;
+ border: 0;
+ background: transparent;
+}
+
+
+
+
+