2022-07-02 vue项目-通用后台管理系统(一) 技术栈,配置Element-UI,mockjs和axios,使用mock和axios实现一个登录功能

1.项目技术栈和难点

• 使用Vue ui+CMD创建vue项目
• 使用Mockjs进行后端配置:模拟登录,用户管理(增删改查等API接口)
• 使用Element-UI进行快速布局,使用到其布局,菜单,表格等多个组件
• 表格组件:数据绑定和相关属性设置
• 分页组件:传递参数到后端调用接口
• 登录表单:数据绑定和验证及表单重置(自定义验证规则)
• 路由导航守卫:控制访问权限
• 路由重定向以及菜单绑定路由重定向
• 左侧菜单的折叠和展开
• 用户信息的搜索过滤
• 用户列表信息的增删改查

2.创建项目

创建一个Vue项目:create vue crm,全程默认回车
进入该项目文件夹:cd crm
打开服务器:yarn serve,浏览器输入:http://localhost:8080/可以看到项目内容

3.Element-UI的下载和引入

复习笔记:2021-11-21 vue笔记-PC端框架:Element-UI组件库(一) element-ui介绍安装和使用
下载:npm i element-ui -S
引入在main.js中:

import ElementUI from "element-ui"
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI)

使用(是否引入成功):
App.vue

<template>
  <div id="app">
    <div id="nav">
      <el-button @click="show" type="primary">按钮</el-button>