m

build/webpack.base.conf.js

@@ -39,21 +39,7 @@ module.exports = {
         use: [
           'file-loader'
         ]
-      },
-      {
-        test: /\.less$/,
-        use: [
-          {
-            loader: MiniCssExtractPlugin.loader,
-            options: {
-              publicPath: '../'
-            }
-          },
-          'css-loader',
-          'postcss-loader',
-          'less-loader',
-        ],
-      },
+      }
     ]
   },
   plugins: [
@@ -67,7 +53,7 @@ module.exports = {
       filename: '[name]_[hash].js',
       path: './dll',
       entry: {
-        vendor: ['vue', 'vue-router', 'vuex']
+        vendor: ['vue', 'vue-router', 'vuex', 'element-ui']
       }
     }), //单独打包第三方库
     new VueLoaderPlugin(), // 它的职责是将你定义过的其它规则复制并应用到 .vue 文件里相应语言的块
@@ -83,4 +69,4 @@ module.exports = {
     },
     modules: ['node_modules']
   }
-}
+}

build/webpack.dev.conf.js

@@ -13,10 +13,24 @@ module.exports = merge(baseConfig, {
         test: /\.css$/,
         use: [
           'vue-style-loader',
-          'css-loader', 
+          'css-loader',
           'postcss-loader'
         ]
-      }
+      },
+      {
+        test: /\.scss$/,
+        use: [
+          {
+            loader: 'vue-style-loader',
+            options: {
+              publicPath: '../'
+            }
+          },
+          'css-loader',
+          'postcss-loader',
+          'sass-loader',
+        ],
+      },
     ]
   },
   devServer: {
@@ -30,4 +44,4 @@ module.exports = merge(baseConfig, {
       'process.env': require('../config/dev.env')
     }), // 配置请求地址
   ]
-})
+})

build/webpack.prod.conf.js

@@ -19,9 +19,23 @@ module.exports = merge(baseConfig, {
         test: /\.css$/,
         use: [
           MiniCssExtractPlugin.loader,
-          'css-loader', 
+          'css-loader',
           'postcss-loader'
         ]
+      },
+      {
+        test: /\.scss$/,
+        use: [
+          {
+            loader: MiniCssExtractPlugin.loader,
+            options: {
+              publicPath: '../'
+            }
+          },
+          'css-loader',
+          'postcss-loader',
+          'sass-loader',
+        ],
       }
     ]
   },
@@ -35,4 +49,4 @@ module.exports = merge(baseConfig, {
       'process.env': require('../config/prod.env')
     }), // 配置请求地址
   ]
-})
+})

package.json

@@ -20,13 +20,15 @@
     "babel-preset-env": "^1.7.0",
     "clean-webpack-plugin": "^2.0.1",
     "css-loader": "^2.1.1",
+    "element-ui": "^2.7.2",
     "eslint-plugin-vue": "^5.2.2",
     "file-loader": "^3.0.1",
     "html-webpack-plugin": "^3.2.0",
-    "less-loader": "^4.1.0",
     "mini-css-extract-plugin": "^0.5.0",
+    "node-sass": "^4.11.0",
     "optimize-css-assets-webpack-plugin": "^5.0.1",
     "postcss-loader": "^3.0.0",
+    "sass-loader": "^7.1.0",
     "uglifyjs-webpack-plugin": "^2.1.2",
     "vue": "^2.6.10",
     "vue-loader": "^15.7.0",

src/components/tab.vue

@@ -1,32 +1,4 @@
 <style scoped>
-  .tab {
-    width: 5rem;
-    height: 1.5rem;
-    background-color: cornflowerblue;
-    position: relative;
-  }
-  .tab::before {
-    content: "";
-    height: 0;
-    width: 0;
-    border: 0.75rem solid cornflowerblue;
-    border-top-color: transparent;
-    border-left-color: transparent;
-    position: absolute;
-    left: -1.5rem;
-    bottom: 0;
-  }
-  .tab::after {
-    content: "";
-    height: 0;
-    width: 0;
-    border: 0.75rem solid cornflowerblue;
-    border-top-color: transparent;
-    border-right-color: transparent;
-    position: absolute;
-    left: 100%;
-    bottom: 0;
-  }
 </style>
 
 <template>
@@ -38,4 +10,4 @@
 export default {
   name: 'tab'
 }
-</script>
+</script>

src/index.css

@@ -1,11 +1,13 @@
+* {
+  padding: 0;
+  margin: 0;
+}
 html, body {
   width: 100%;
   height: 100%;
   font-size: 16px;
-  padding: 0;
-  margin: 0
 }
 #app {
   width: 100%;
   height: 100%;
-}
+}

src/main.js

@@ -1,13 +1,18 @@
 import Vue from 'vue';
 import App from './App.vue';
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
 import './index.css';
-import router from './router/router'
-import store from './store'
- new Vue({
-    el: '#app',
-    router,
-    store,
-    render: (h) => h(App),
- })
+import router from './router/router';
+import store from './store';
+
+Vue.use(ElementUI);
+
+new Vue({
+  el: '#app',
+  router,
+  store,
+  render: (h) => h(App),
+})
 
 console.log(process.env.BASE_API)

src/pages/layout/Layout.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="container">
+    <LeftNav/>
+    <div class="right-con">
+      <TopTitle/>
+      <router-view/>
+    </div>
+  </div>
+</template>
+<script>
+import TopTitle from './toptitle/TopTitle';
+import LeftNav from './leftnav/LeftNav';
+
+export default {
+  components: {
+    TopTitle,
+    LeftNav
+  },
+}
+</script>
+<style lang="scss">
+  .container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    .right-con {
+      width: calc(100% - 200px);
+      display: flex;
+      flex-direction: column;
+    }
+  }
+</style>
+
+

src/pages/layout/leftnav/LeftNav.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="left-nav">
+    <el-menu
+      class="el-menu-vertical-demo"
+      background-color="#545c64"
+      text-color="#fff"
+      active-text-color="#ffd04b"
+      :router=true
+      :default-active="$route.path">
+      <el-menu-item index="/nav/nav1" route="/nav/nav1">
+        <i class="el-icon-menu"></i>
+        <span slot="title">导航二</span>
+      </el-menu-item>
+      <el-menu-item index="/nav/nav2" route="/nav/nav2">
+        <i class="el-icon-setting"></i>
+        <span slot="title">导航四</span>
+      </el-menu-item>
+    </el-menu>
+  </div>
+</template>
+<style lang="scss">
+  .left-nav {
+    width: 200px;
+    height: 100%;
+    background-color: rgb(84, 92, 100);
+  }
+</style>
+

src/pages/layout/toptitle/TopTitle.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="top-title">
+    上边
+  </div>
+</template>
+<style lang="scss">
+  .top-title {
+    width: 100%;
+    height:80px;
+    background: skyblue;
+  }
+</style>
+

src/pages/login/Login.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="login-container">
+    <el-form :model="loginForm" status-icon :rules="rules" ref="loginForm" autocomplete="off" class="login-form">
+      <h3 class="title">登录</h3>
+      <el-form-item label="账号" prop="userName" class="el-form-item" label-width="50px">
+        <el-input v-model="loginForm.userName" name="userName" type="text" autocomplete="off" placeholder="userName"/>
+      </el-form-item>
+      <el-form-item label="密码" prop="password" class="el-form-item" label-width="50px">
+        <el-input type="password" v-model="loginForm.password" autocomplete="off" show-password placeholder="password"/>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+  import { mapGetters } from 'vuex'
+  export default {
+    name: 'Login',
+    data() {
+      var checkUserName = (rule, value, callback) => {
+        if (!value) {
+          return callback(new Error('账号不能为空'));
+        }else {
+          callback();
+        }
+      };
+      var validatePass = (rule, value, callback) => {
+        if (value === '') {
+          callback(new Error('请输入密码'));
+        } else {
+          callback();
+        }
+      };
+      return {
+        loginForm: {
+          userName: '',
+          password: ''
+        },
+        rules: {
+          userName: [
+            { validator: checkUserName, trigger: 'blur' }
+          ],
+          password: [
+            { validator: validatePass, trigger: 'blur' }
+          ]
+        }
+      };
+    },
+    computed: {
+      // 使用对象展开运算符将 getter 混入 computed 对象中
+      ...mapGetters([
+        'flag'
+      ])
+    },
+    methods: {
+      submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            // console.log(this.loginForm.userName);
+            // const userName = this.loginForm.userName;
+            // const password = this.loginForm.password;
+            this.$store.dispatch('Login', this.loginForm).then(() => {
+              alert('登录成功');
+            }).catch(() => {
+              alert('登录失败');
+            })
+            //alert('submit!');
+          } else {
+            console.log('error submit!!');
+            return false;
+          }
+        });
+      },
+      // resetForm(formName) {
+      //   alert(flag);
+      // }
+    }
+  }
+</script>
+
+<style lang="scss">
+  .login-container {
+    width: 100%;
+    height: 100%;
+    background: #2d3a4b;
+    .login-form {
+      position: absolute;
+      left: 0;
+      right: 0;
+      width: 520px;
+      max-width: 100%;
+      padding: 35px 35px 15px 35px;
+      margin: 120px auto;
+      text-align: center;
+      box-sizing: border-box;
+      .title {
+        margin-bottom:30px;
+        color: #fff;
+      }
+      .el-form-item__label {
+        color:#fff;
+      }
+      .el-input input{
+        background: transparent;
+        border: 0px;
+        -webkit-appearance: none;
+        border-radius: 0px;
+        padding: 12px 5px 12px 15px;
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        background: rgba(0, 0, 0, 0.1);
+        border-radius: 5px;
+        color: #fff;
+        height: 47px;
+      }
+    }
+  }
+</style>

src/pages/nav1/Nav1.vue

@@ -0,0 +1,6 @@
+<template>
+<div>
+nav1
+</div>
+</template>
+

src/pages/nav2/Nav2.vue

@@ -0,0 +1,5 @@
+<template>
+<div>
+nav2
+</div>
+</template>

src/router/router.js

@@ -1,15 +1,37 @@
 import Vue from 'vue';
 import Router from 'vue-router';
-import tab from 'components/tab'
-
+import tab from 'components/tab';
+import Login from  '@/pages/login/Login';
+import Layout from  '@/pages/layout/Layout';
 Vue.use(Router)
 
 export default new Router({
-  mode: 'history',
+  // mode: 'history',
   // base: process.env.BASE_URL,
-  routes: [{
-    path: '/',
-    name:'home',
-    component: tab
-  }]
+  routes: [
+    {
+      path: '/login',
+      name:'login',
+      component: Login,
+    },
+    {
+      path: '/',
+      name:'layout',
+      component: Layout,
+      hidden: true
+    },
+    {
+      path: '/nav',
+      component: Layout,
+      children: [{
+        path: 'nav1',
+        name:'Nav1',
+        component: () => import('@/pages/nav1/Nav1'),
+      },{
+        path: 'nav2',
+        name:'Nav2',
+        component: () => import('@/pages/nav2/Nav2'),
+      }]
+    }
+  ]
 })

src/store/getter.js

@@ -1,4 +1,4 @@
 const getters = {
-  device: state => state.app.device
+  flag: state => state.login.flag
 }
 export default getters

src/store/index.js

@@ -1,13 +1,13 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
-import app from './modules/app'
+import login from './modules/login'
 import getters from './getter'
 
 Vue.use(Vuex)
 
 const store = new Vuex.Store({
   modules: {
-    app
+    login
   },
   getters
 })

src/store/modules/app.js

@@ -1,18 +0,0 @@
-
-const app = {
-  state: {
-    device: 'desktop'
-  },
-  mutations: {
-    TOGGLE_DEVICE: (state, device) => {
-      state.device = device
-    }
-  },
-  actions: {
-    ToggleDevice({ commit }, device) {
-      commit('TOGGLE_DEVICE', device)
-    }
-  }
-}
-
-export default app

src/store/modules/login.js

@@ -0,0 +1,28 @@
+
+const login = {
+  state: {
+    flag: false
+  },
+  mutations: {
+    SET_FLAG: (state, flag) => {
+      state.flag = flag
+    }
+  },
+  actions: {
+    Login({ commit }, userInfo) {
+      console.log(userInfo)
+      const username = userInfo.userName.trim();
+      const password = userInfo.password.trim();
+      return new Promise((resolve, reject) => {
+        if(username == 'admin' && password == '123456') {
+          resolve();
+          commit('SET_FLAG', true)
+        }else {
+          reject();
+        }
+      })
+    }
+  }
+}
+
+export default login