第12章前端Web进阶（Vue工程化+ElementPlus）

一、Vue工程化-介绍

模块化：项目划分若干模块，单独开发、维护，提高效率

组件化：将页面的各个组成部分封装为一个一个的组件，提高复用

规范化：提供标准统一的目录结构、编码规范、开发流程

自动化：项目的构建、开发、测试、打包、部署

在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。

统一规范、提高复用、便于维护

二、Vue工程化-环境准备

介绍：create-vue是Vue官方提供的最新的脚手架工具 ，用于快速生成一个工程化的Vue项目。

create-vue提供了如下功能：

统一的目录结构
本地调试
热部署
单元测试
集成打包上线

依赖环境：NodeJS

2、安装NodeJS

npm：Node Package Manager，是NodeJs的软件包管理器。

管理员身份cmd配置全局路径

npm config set prefix "D:\install\installpath\NodeJS"

资源目录切换为淘宝下载

复制代码

npm config set registry https://registry.npmmirror.com

三、Vue工程化-Vue项目简介

1、创建项目

新建Vue文件夹，管理员cmd运行

npm create vue@3.3.4

创建项目vue-project1

2、安装依赖

进入，npm install

目录下出现新文件夹

3、启动项目

打开VSCode，打开vue-project1

两种启动方式

访问localhost:5173

四、Vue工程化-vue项目开发流程

1、入口文件

javascript 复制代码

import { createApp } from "vue";
import App from "./App.vue";

import "./assets/main.css";
// 创建应用实例，接管id为app的区域
createApp(App).mount("#app");

2、默认首页

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

3、根组件

html 复制代码

<!-- 定义JS，控制模板部分的数据和行为（JS） -->
<script setup>
//响应式数据
import { ref } from "vue";
const message = ref("Hello World");
</script>

<!-- 模板部分，控制的是页面的结构（HTML） -->
<template>
  <h1>{{ message }}</h1>
</template>
<!-- 当前组件的CSS样式 -->
<style scoped></style>

复制代码

*.vue是Vue项目中的组件文件 ，在Vue项目中也称为单文件组件（SFC，Single-FileComponents)。Vue的单文件组件会将一个组件的逻辑（Js），模板（HTML）和样式（CSS）封装在同一个文件里（*.Vue）。

五、Vue工程化-API风格

1、选项式API和组合式API对比

2、组合式API

创建src/views/ApiDemo.vue文件

html 复制代码

<script setup>
// 引入ref函数和钩子函数
import { onMounted, ref } from "vue";

//声明响应式数据
const count = ref(0);

//声明函数 - 在组合式API中没有this
function increment() {
  count.value++;
}

//钩子函数
onMounted(() => {
  console.log("组合式API - 挂载完成");
});
</script>

<template>
  <button @click="increment">count:{{ count }}</button>
</template>

<!-- scoped代表只会影响当前组件，不会影响其他组件 -->
<style scoped></style>

根组件中引入api文件

html 复制代码

<!-- 定义JS，控制模板部分的数据和行为（JS） -->
<script setup>
//响应式数据
import ApiDemo from "./views/ApiDemo.vue";
</script>

<!-- 模板部分，控制的是页面的结构（HTML） -->
<template>
  <!-- 上面引入的组件在这呈现出来 -->
  <ApiDemo></ApiDemo>
</template>
<!-- 当前组件的CSS样式 -->
<style scoped></style>

复制代码

3、介绍

setup：是一个标识，告诉vue需要进行一些处理，让我们可以更简洁的使用组合式API。

ref（）：接收一个内部值 ，返回一个响应式的ref对象 ，此对象只有一个指向内部值的 属性value。

onMounted（）：在组合式API中的钩子方法 ，注册一个回调函数 ，在组件挂载完成后执行。

注意：在Vue中的组合式API使用时，是没有this对象的，this对象是undefined。可以用count.value++;代替

六、Vue工程化-案例

新建src/view/EmpList.vue

html 复制代码

<script setup>
//引入
import { ref,onMounted } from 'vue';
import axios from 'axios';

//声明响应式数据
const name = ref('');
const gender = ref('');
const job = ref('');

const userList = ref([]);

//声明函数 - 箭头函数 - await & async
const search = async () => {
  //基于axios发送异步请求, 请求服务器端加载数据
  const result = await axios.get(`https://web-server.itheima.net/emps/list?name=${name.value}&gender=${gender.value}&job=${job.value}`);
  userList.value = result.data.data;
}

//钩子函数，用于数据初始化
onMounted(() => {
  search();
})
</script>

在组合式API中有没有this？

没有this

在组合式API中如何更新响应式数据内容？

xXX.value

七、ElementPlus

官网：一个 Vue 3 UI 框架 | Element Plus

1、快速入门

创建vue项目

安装依赖：npm install element-plus@2.4.4 --save

引入组件库：main.js中

javascript 复制代码

import { createApp } from 'vue'
// 引入ElementPlus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

import './assets/main.css'

// 使用ElementPlus
createApp(App).use(ElementPlus).mount('#app')

2、常见组件

（1）Table表格组件

（2）Pagination分页组件

复制代码

html 复制代码

<!-- 分页条 -->
  <div class="mb-4">
    <el-pagination
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[10, 20, 30, 40, 50, 75, 100]"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>

（3）Dialog对话框组件

复制代码

html 复制代码

<!-- 对话框 -->
  <div class="mb-4">
    <el-button plain @click="dialogTableVisible = true"
      >打开Dialog对话框</el-button
    >

    <el-dialog v-model="dialogTableVisible" title="收货地址" width="800">
      <el-table :data="tableData">
        <el-table-column property="date" label="日期" width="150" />
        <el-table-column property="name" label="姓名" width="200" />
        <el-table-column property="address" label="地址" />
      </el-table>
    </el-dialog>
  </div>

（4）Form表单组件

3、案例

（1）页面布局

（2）交互效果

html 复制代码

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';

//表单
const emp = ref({name: '',gender: '',job: ''})

//钩子函数
onMounted(() => {
  search();
})

//查询
const search = async () => {
  const result = await axios.get(`https://web-server.itheima.net/emps/list?name=${emp.value.name}&gender=${emp.value.gender}&job=${emp.value.job}`);
  empList.value = result.data.data;
}

//清空
const clear = () => {
  emp.value = {name: '',gender: '',job: ''};
  search();
}

const empList = ref([]);
</script>

<template>
  <div id="container">
    <!-- 搜索表单 -->
    <el-form :inline="true" :model="emp" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input v-model="emp.name" placeholder="请输入姓名" />
      </el-form-item>

      <el-form-item label="性别">
        <el-select v-model="emp.gender" placeholder="请选择">
          <el-option label="男" value="1" />
          <el-option label="女" value="2" />
        </el-select>
      </el-form-item>

      <el-form-item label="职位">
        <el-select v-model="emp.job" placeholder="请选择">
          <el-option label="班主任" value="1" />
          <el-option label="讲师" value="2" />
          <el-option label="学工主管" value="3" />
          <el-option label="教研主管" value="4" />
          <el-option label="咨询师" value="5" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button type="info" @click="clear">清空</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table :data="empList" border style="width: 100%">
      <el-table-column prop="id" label="ID" width="100" align="center"/>
      <el-table-column prop="name" label="姓名" width="120"  align="center"/>
      <el-table-column label="头像" width="180"  align="center">
        <template #default="scope">
          <img :src="scope.row.image" height="40px">
        </template>
      </el-table-column>
      <el-table-column label="性别" width="180"  align="center">
        <template #default="scope">
          {{ scope.row.gender == 1 ? '男' : '女'}}
        </template>
      </el-table-column>
      <el-table-column label="职位" width="180"  align="center">
        <template #default="scope">
          <span v-if="scope.row.job == 1">班主任</span>
          <span v-else-if="scope.row.job == 2">讲师</span>
          <span v-else-if="scope.row.job == 3">学工主管</span>
          <span v-else-if="scope.row.job == 4">教研主管</span>
          <span v-else-if="scope.row.job == 5">咨询师</span>
          <span v-else>其他</span>
        </template>
      </el-table-column>
      <el-table-column prop="entrydate" label="入职日期" width="180"  align="center"/>
      <el-table-column prop="updatetime" label="更新时间"  align="center"/>
    </el-table>
  </div>
</template>

<style scoped>
#container {
  width: 70%;
  margin-left: 15%;
  margin-right: 15%;
}
</style>

第12章 前端Web进阶（Vue工程化+ElementPlus）

一、Vue工程化-介绍

二、Vue工程化-环境准备

2、安装NodeJS

三、Vue工程化-Vue项目简介

1、创建项目

2、安装依赖

3、启动项目

四、Vue工程化-vue项目开发流程

1、入口文件

2、默认首页

3、根组件

五、Vue工程化-API风格

1、选项式API和组合式API对比

2、组合式API

3、介绍

六、Vue工程化-案例

七、ElementPlus

1、快速入门

2、常见组件

（1）Table表格组件

（2）Pagination分页组件

（3）Dialog对话框组件

（4）Form表单组件

3、案例

（1）页面布局

（2）交互效果

第12章前端Web进阶（Vue工程化+ElementPlus）