WEB前端框架应用

廖莉

目录

  • 1 初识Vue.js
    • 1.1 Vue简介
    • 1.2 Vue开发环境
    • 1.3 Vue的初使用
  • 2 Vue.js 开发基础
    • 2.1 单文件组件
    • 2.2 数据绑定
    • 2.3 指令
    • 2.4 事件对象和事件修饰符
    • 2.5 计算属性和侦听器
    • 2.6 样式绑定
    • 2.7 案例：购物车模块
    • 2.8 案例：学习计划表
  • 3 组件基础（上）
    • 3.1 构建工具Vite
    • 3.2 选项式API和组合式API
    • 3.3 组合式编程
    • 3.4 生命周期
    • 3.5 组件的注册与引用
    • 3.6 组件通信
      • 3.6.1 父组件向子组件传递数据
      • 3.6.2 子组件向父组件传递数据
      • 3.6.3 跨级组件之间的数据传递
    • 3.7 案例：待办事项
  • 4 组件基础（下）
    • 4.1 动态组件
    • 4.2 插槽
    • 4.3 自定义指令
    • 4.4 引用静态资源
    • 4.5 案例：商品管理
  • 5 网络请求
    • 5.1 Axios
    • 5.2 Axios图书列表案例
  • 6 状态管理
    • 6.1 Vuex
    • 6.2 Pinia
  • 7 路由
    • 7.1 初识路由和VueRouter
    • 7.2 嵌套路由
    • 7.3 路由重定向
    • 7.4 动态路由
    • 7.5 命名路由
    • 7.6 编程式导航
    • 7.7 导航守卫
    • 7.8 案例：后台管理系统
  • 8 常用UI组件库
    • 8.1 Element Plus组件库
    • 8.2 Vant组件库
    • 8.3 Ant Design Vue组件库
  • 9 项目实战
    • 9.1 项目所需软件
    • 9.2 项目前台分析
    • 9.3 “微商城”后台分析
Element Plus组件库
  • 1 安装Element ...
  • 2 Button组件
  • 3 Table组件
  • 4 Form组件
  • 5 Menu组件

什么是Element Plus？

Element Plus是基于Vue 3开发的优秀的PC端开源UI组件库，它是Element的升级版，对于习惯使用Element的人员来说，在学习Element Plus时，不用花费太多的时间。因为Vue 3不再支持IE 11，所以Element Plus也不再支持IE 11及更低的IE版本。


使用npm或yarn包管理工具安装Element Plus。

# 使用npm包管理工具安装
npm install element-plus --save
# 使用yarn包管理工具安装
yarn add element-plus --save


在src\main.js文件中，导入并挂载Element Plus模块。

import { createApp } from 'vue'
import './style.css'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

Element Plus常用组件库

Element Plus组件库中的组件主要包括基础组件、配置组件、表单组件、数据展示组件、导航和反馈组件以及其他组件。每个组件类别又进行了细分，例如，基础组件包含Button组件、Border组件、Container组件等；表单组件包含Form组件、Input组件等。下面对Element Plus中常用的Button组件、Table组件、Form组件和Menu组件进行讲解。