002-VUE+ElementUI实现登录页面

如果还没有下载node请看：001-vue入门

一、整合ElementUI

1.创建一个名为 vue-elementui 的工程

# 使用 webpack 打包工具初始化一个名为 vue-elementui 的工程
vue init webpack vue-elementui

2.安装依赖

安装 vue-router 、element-ui 、sass-loader 和 node-sass 四个插件

进入工程目录 
cd vue-elementui 
安装 vue-router 
npm install vue-router --save-dev 
安装 element-ui 
npm i element-ui -S 
安装 SASS 加载器 
npm install sass-loader@7.3.1 node-sass --save-dev
安装项目所有依赖
npm install

assets：用于存放资源文件
components：用于存放 Vue 功能组件
views：用于存放 Vue 视图组件
router：用于存放 vue-router 配置

• 安装成功后：>npm run dev 运行即可
  

在浏览器打开 http://localhost:8080 你会看到如下效果。说明项目以及创建成功了

二、登录页面

在elm官网中，可以快速生代码

1、创建首页视图

在 views 目录下创建一个名为 Main.vue 的视图组件；该组件在当前章节无任何作用，主要用于登录后展示登录成 功的跳转效果

<template>
  <div>
    <el-container>
      <el-aside width="200px">
        <el-menu :default-openeds="['1']">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-message"></i>会员管理</template>
            <el-menu-item-group>
              <el-menu-item index="1-1">
                <router-link :to="{name:'MemberLevel',params:{id:3}}">会员等级</router-link>
              </el-menu-item>
              <el-menu-item index="1-2">
                <router-link to="/member/list">会员列表</router-link>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
             <template slot="title"><i class="el-icon-message"></i>商品管理</template>
            <el-menu-item-group>
              <el-menu-item index="2-1">商品分类</el-menu-item>
              <el-menu-item index="2-2">商品列表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>


      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>用户中心</el-dropdown-item>
              <el-dropdown-item>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span>{{$store.getters.getUser.name}}</span>
        </el-header>

        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  export default {
    name: 'Main'
  }
</script>

<style scoped>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }
</style>

2、创建登录页视图

在 views 目录下创建一个名为 Login.vue 的视图组件，其中 el-* 的元素为 ElementUI 组件

<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" class="login-box">
      <h3 class="login-title">欢迎登录</h3>
      <el-form-item label="账号" prop="name">
        <el-input type="text" placeholder="请输入用户名" v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" placeholder="请输入密码" v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('form')">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: 'Login',
    data() {
      return {
        form: {
          name: '',
          password: ''
        },
        rules: {
          name: [{
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }],
          password: [{
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }]
        }
      }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            sessionStorage.setItem('isLogin','true');
            this.$store.dispatch("asyncUpdateUser",{name:this.form.name});
            this.$router.push({name:'Main',params:{name:this.form.name}});
          } else {
            this.$message({
              message: '用户名或密码错误',
              type: 'warning'
            });
            return false;
          }
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .login-box {
    width: 350px;
    margin: 120px auto;
    border: 1px solid #DCDFE6;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 30px #DCDFE6;
  }

  .login-title {
    text-align: center;
  }
</style>

4、路由配置文件

在 router 目录下创建一个名为 index.js 的 vue-router 路由配置文件

import Vue from 'vue'
import Router from 'vue-router'
import Login from '../views/Login'
import Main from '../views/Main'
import MemberList from '../views/Member/MemberList'
import MemberLevel from '../views/Member/MemberLevel'
import NotFound from '../views/NotFound'

Vue.use(Router);

export default new Router({
  mode:'history',
  routes:[
  {
    // 登录页
    path:'/login',
    name:'Login',
    component:Login
  },
  {
    // 首页
    path:'/main',
    name:'Main',
    component:Main,
    children:[
      {
        // 会员列表
        path:'/member/list/',
        name:'MemberList',
        component:MemberList
      },
      {
        // 会员等级
        path:'/member/level/:id',
        name:'MemberLevel',
        component:MemberLevel,
        props:true
      }
    ]
  },
  {
    path:'/goMain',
    redirect:'/main'
  },
  {
    path:'*',
    component:NotFound
  }
  ]
})

5、 测试运行

npm run dev

三、创建嵌套视图组件

在elm官网中，可以快速生代码

1、创建嵌套vue

在src/views/Member创建*.vue （有几个嵌套创建几个vue）

1.用户信息组件

在 views/members 目录下创建一个名为 MemberLevel.vue 的视图组件；该组件在当前章节无任何作用，主要用于 展示嵌套效果；

<template>
  <div>
    会员等级 ID={{id}}
  </div>
</template>

<script>
  export default {
    props: ['id'],
    name: 'MemberLevel',
    beforeRouteEnter: (to, from, next) => {
      console.log("进入会员等级页面");
      next(vm => {
        vm.getData();
      });
    },
    beforeRouteLeave: (to, from, next) => {
      console.log("离开会员等级页面");
      next();
    },
    methods: {
      getData: function() {
        this.axios({
          method: 'get',
          url: 'http://localhost:8080/data.json',
        }).then(function(repos) {
          console.log(repos);
        }).catch(function(error) {
          console.log(error);
        });
      }
    }
  }
</script>

<style>
</style>

2.用户列表组件

在 views/members 目录下创建一个名为 MemberList.vue 的视图组件；该组件无任何作用，主要用于展示嵌套效 果；

<template>
  <div>
    会员列表
  </div>
</template>

<script>
  export default{
    name:'MemberList'
  }
</script>

<style>
</style>

2、添加路由

  {
    // 首页
    path:'/main',
    name:'Main',
    component:Main,
    children:[
      {
        // 会员列表
        path:'/member/list/',
        name:'MemberList',
        component:MemberList
      },
      {
        // 会员等级
        path:'/member/level/:id',
        name:'MemberLevel',
        component:MemberLevel,
        props:true
      }
    ]
  },