vue3 + Element-plus 开发后台管理系统（7）

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第7天，点击查看活动详情

搭建登录架构解决方案与实现

前边的6篇文章，我们已经基本讲编码规范、提交规范等内容进行了配置，下边我们就可以开始进行项目的开发了

首先，我们来熟悉一下 Vue3 的项目结构

为了更加方便于理解，我们将用 Vue2 来与它进行对比

1. main.js

• 通过按需引入的 createApp 方法来构建 vue 实例
• 通过 vue 实例的 use 方法来挂载插件（如 router、vuex）
• 没有了 vue 的构造方法，无法再挂载原型

2. App.vue

• 组件内部结构无变化，依然是 template、script、style
• <template> 标签中支持多个根标签

3. router/index.js

• 通过按需引入的 createRouter 方法来构建 router 实例
• 通过按需引入的 createWebHashHistory 方法来创建 hash 模式对象，进行路由模式指定
• 无需通过 Vue.use(VueRouter) 的形式进行挂载
• routes 路由表的定义无差别

4. store/index.js

• 通过按需引入的 createStore 方法来构建 store 实例
• 无需通过 Vue.use(Vuex) 的形式进行挂载

由此可见，vue3 与 vue2 最大的差异其实就是两点：

1、vue3 使用按需导入的形式进行初始化操作

2、<template> 标签中支持多个根标签

了解了这些，我们就开始我们项目的登录页的开发

导入 element-plus

1. 在项目中执行如下命令

   vue add element-plus

2. 选择全局导入

3. 暂不生成覆盖变量的 scss 文件

4、选择简体中文

5、出现 Successfully 即表示安装完成

至此我们已经将 element-plus 导入成功，下边我们就开始开发我们的登录页面、