Vue + ElementUI 登录页面

一. Vue项目搭建

1. cmd命令cd

用管理员身份运行 cmd， 目录切换到项目要创建的文件夹

2. 初始化工程

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

vue init webpack vue-elementui

这里稍微会有一点慢，我大概等了3分钟左右，然后根据以下截图选择即可：

 等待3分钟左右，出现以下界面则安装完成。

 3. 安装vue-router

npm install vue-router --save-dev

 安装过程中，若无报错则继续

 我有以下报错，npm ERR! peer vue@"^3.2.0" from [email protected]

 这是因为2022年2月7日以后，vue-router的默认版本，为4版本，而且 vue-router4,只能在vue3中，我目前vue是版本2 ，因此vue2中需要改成vue-router3

命令指定vue-router的版本为3，即可安装成功

npm install vue-router@3 --save-dev

4. 安装ElementUI

npm i element-ui -S

 5. 安装SASS加载器

npm install [email protected] node-sass --save-dev

说明:  sass-loader默认不指定版本是最新的8.0.x，运行可能出现问题，所以指定版本安装

6. 安装项目所有依赖 

npm install

 7. 项目启动测试

 npm run dev

 浏览器访问成功：

 

 

二. 项目实战 

1. 设置路由成功

1-1  项目开始从App.vue入手，删掉原来的页面展示代码和style样式，并添加路由标签， HelloWorld.vue删掉，如下：

1-2  新建一个登录页面，路径为/src/views/Login.vue，将这个页面暴露出去

1-3  主页面和登录页面要建立关联，因此创建/src/router/index.js文件，来实现路由功能

引入'vue-router'并使用，将登录页面Login.vue跟访问路径对应起来

import Vue from 'vue'
import Router from 'vue-router'
import Login from '../views/Login.vue'

Vue.use(Router);

export default new Router({
  routes: [{
    //登录页
    path: '/login',
    name: 'login',
    component: Login
  }]
})

1-4  main.js文件需要引入'vue-router'和elementui相关依赖，看elementui官网： 

        https://element.eleme.cn/#/zh-CN/component/quickstarthttps://element.eleme.cn/#/zh-CN/component/quickstart

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(VueRouter);
Vue.use(ElementUI);

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

现在，一个简单的页面路由就可以测试成功啦

2. 登录页面绘制 

2-1  登录页面绘制

2-2  登录成功，跳转主页面绘制   /src/views/Main.vue

在index.js中增加路由配置，在Login.vue中增加跳转代码

3. 登录验证

组件从ElementUI官网直接抄现成的  /src/views/Login.vue

 4. 嵌套路由与参数传递

4-1 路由嵌套

主要适用于一个主页面，有侧边栏、导航栏和中间动态的部分，点击侧边栏，中间内容随着变化的场景，中间变化的内容便是嵌套的路由

4-1-1  在中间嵌套路由那里用 占用位置

4-1-2  中间部分需要新建页面，如MemberLevel.vue

 4-1-3  子路由需要配置在/src/router/index.js中

import Vue from 'vue'
import Router from 'vue-router'
import Login from '../views/Login.vue'
import Main from '../views/Main.vue'
import MemberLevel from "../views/member/MemberLevel";
import MemberList from "../views/member/MemberList";

Vue.use(Router);

export default new Router({
  routes: [{
    //登录页
    path: '/login',
    name: 'login',
    component: Login
  },
    {
      //首页
      path: '/main',
      name: 'main',
      component: Main,
      //子路由
      children: [
        {
          //会员等级
          path: '/member/level',
          name: 'MemberLevel',
          component: MemberLevel
        },
        {
          //会员等级
          path: '/member/list',
          name: 'MemberList',
          component: MemberList
        }
      ]
    },
  ]
})

4-1-4  路由跳转配置在页面点击处，跟超链接的概念一致  /src/views/Main.vue

会员等级 

4-2  参数传递

4-2-1  路径匹配的两种方式

{
  //会员等级
  path: '/member/level/:id',
  name: 'MemberLevel',
  component: MemberLevel
}

说明：主要是在path属性中增加了:id这样的占位符

取值方式：

  会员等级 ID= {{$route.params.id}}

会员等级

会员等级

 4-2-2  props的方式

{
  //会员等级
  path: '/member/level/:id',
  name: 'MemberLevel',
  component: MemberLevel,
  props: true
}

export default {
  props:['id'],
  name: "MemberLevel"
}

取值方式：

会员等级 ID=  {{id}}

5. 组件重定向

  返回首页

{
  //重定向
  path: '/goMain/:name',
  redirect: '/main/:name'
}

6. 路由模式 + 处理404

6-1  之前访问路径http://localhost:8080/#/login  总带有‘#’，可以这种方式去掉

export default new Router({
  mode: 'history',

6-2  有些页面找不到资源的时候，需要报错404

新增报错页面 ，然后在页面加以下配置即可

{
  path: '*',
  component: Error
}

 7. 路由钩子函数 + 异步请求

7-1  钩子函数

/*路由钩子*/
beforeRouteEnter: (to, from, next) => {
  console.log("进入会员等级页面");
  next();
},
beforeRouteLeave: (to, from, next) => {
  console.log("离开会员等级页面");
  next();
}

7-2  异步请求  

安装axios

npm install axios -s

在main.js文件中引入并使用axios

import axios from "axios";
Vue.prototype.axios = axios;

7-3  使用 

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);
    })
  }
}

/*路由钩子*/
beforeRouteEnter: (to, from, next) => {
  console.log("进入会员等级页面");
  next(vm => {
    vm.getData();
  });
},

这里，我遇到一个跨域的问题，后续解决完再回来补充

  8. Vuex判断用户是否登录

安装Vuex，引入并使用

npm install vuex@3 --save

 import Vuex from "vuex";

Vue.use(Vuex);

sessionStorage.setItem('isLogin', 'true');
// 路由跳转之前
router.beforeEach((to, from, next)=>{
  let isLogin = sessionStorage.getItem('isLogin');
  if (to.path == '/logout'){
    //清空
    sessionStorage.clear();
    //跳转到登录页面
    next({path:'/login'});
  }else if (to.path == '/login') {
    if (isLogin  != null) {
      next({path:'/main'});
    }
  }else if (isLogin == null) {
    next({path:'/login'});
  }
  next();
})

  9. Vuex操作对象

 

  10. Vuex模块化

 

项目gitee地址：https://gitee.com/EstellaQ/vue-elementui.git