前端学习之vue+element-ui电商项目（一）登录界面+主页面

shakalaca

已于 2022-03-25 13:41:50 修改

阅读量1.3k

点赞数

文章标签： javascript 前端

于 2022-03-22 17:10:51 首次发布

本文链接：https://blog.csdn.net/cathyleeq/article/details/123465462

版权

本文介绍了使用Vue和Element-UI构建电商项目的步骤，包括项目创建、配置ElementUI和axios、处理ESLint错误、设置后端接口、创建登录页面、实现表单验证和路由跳转，以及主页面布局、token验证和侧边栏菜单的渲染等。通过此教程，读者可以掌握基于Vue的前端开发实践。

摘要由CSDN通过智能技术生成

1.创建项目

1.1使用图形化界面创建项目

vue ui

在这里插入图片描述

1.2创建项目

在这里插入图片描述

1.2.1选择手动创建项目

在这里插入图片描述

1.3进入项目仪表盘

在这里插入图片描述

1.3.1配置ElementUI组件库

在这里插入图片描述

1.3.2安装axios依赖

在这里插入图片描述

1.3.3运行项目

在这里插入图片描述

1.4修改控制台报错

在这里插入图片描述

1.4.1修改ESLint发出的语法报错警告

1.项目根目录中创建文件.prettierrc

{
   
  "semi": false, // 格式化是结尾不加分号
  "singleQuote" : true // 单引号代替分号
}

2.修改ESLint语法规则.eslintrc.js

rules: {
   
  'space-before-function-paren': 0 // 禁用函数后面要加空格的格式要求
}

2. 配置后端接口

2.1安装 MySQL 数据库

1）关闭Apache

使用phpStudy软件：安装phpStudy后,点击【其他选项菜单】—>【服务器管理】—>【服务器管理】—>【Apache】—>【停止】

2）导入数据库文件（路径不能有中文）

使用phpStudy软件：【MySQL管理器】—>【MySQL导入导出】—>【MySQL密码（输入：root）】—>【选择要还原的文件：…\db\mydb.aql】、【还原到：mydb】—>【导入】

3）检查数据数据是否导入完成。

使用phpStudy软件：【其他选项菜】—>【MySQL工具】—>【打开数据库目录】可以看到< mydb >< mysql >等文件说明导入成功

2.2安装node.js

进入项目文件夹输入：

cnpm install

2.3启动项目

node app.js

在这里插入图片描述

2.4测试后台项目接口

1）打开 Postman，打开API文档电商管理后台 API 接口文档.md。进入Postman测试。
在这里插入图片描述

打开phpstudy,开启MySQL，再次测试。

2 ) 注意：MySQL第一次打开要重新设置密码

3）postman测试成功
在这里插入图片描述

3.登录页面制作

3.1登录页面绘制

准备工作：
1 ）清空Vue模板和路由 main.js App.vue ./components/HelloWorld.vue ./views

2 ）创建组件 ./view/Login.vue
3 ）编写Home.vue

3.1.1 按需引入element-ui组件

import {
    Button, Form, FormItem, Input } from 'element-ui'

Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)

Vue.use(Button)

3.1.2 安装less less-loader

1）在命令行输入以下代码，或者在可视化工具中直接安装。

npm install less less-loader

安装过后重新编译。

2 ）设置全局样式./assets/css/global.css，并导入到main.js中

/* 全局样式表 */
html,
body,
#app {
   
  height: 100%;
  margin: 0;
  padding: 0;
  min-width: 1366px;
}

// 导入全局样式表
import './assets/css/global.css'

3.1.3 绘制登录盒子（Login.Vue）

<div class="login_container">
  <div class="login_box"></div>
</div>

.login_container {
   
  background-color: #409eff;
  height: 100%;
}

.login_box {
   
  width: 450px;
  height: 300px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

3.1.4 绘制登录头像（Login.Vue）

<!-- 头像区域 -->
<div class="avatar_box">
  <img src="../assets/logowl.png" alt="" />
</div>

.avatar_box {
   
  height: 130px;
  width: 130px;
  border: 1px solid #eee;
  border-radius: 50%;
  padding: 10px;
  box-shadow: 0 0 10px #ddd;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
}
img {
   
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #eee;
}

3.1.5 绘制表单区（Login.Vue）

<!-- 登录表单区域 -->
<el-form label-width="0px" class="login_form">
  <!-- 用户名 -->
  <el-form-item>
    <el-input></el-input>
  </el-form-item>
  <!-- 密码 -->
  <el-form-item>