前言

一直在学习B站黑马程序员苍穹外卖。现在已经学的差不多了，但是我学习一直是针对后端开发的，前端也没太注重去学（他大部分都给课程资料嘻嘻🤪），但我还是比较感兴趣，准备先把之前学JavaWeb（黑马程序员新推出的哦，视频讲的非常好😗可以去看看）时跳过的前端内容学一下，然后再用苍穹外卖前端内容补上。

前面写了Vue的基本语法、表达式、指令，并基于Vue的核心包，还有Vue的案例，但还是比较简单，在项目中的应用会更难一点。

嗯，这里大概概况一下Vue项目创建

大概分为：

• 环境准备（NodeJS安装–配置npm的全局安装路径）
• Vue项目创建
  • 创建一个工程化的Vue项目，执行命令：npm create vue@3.3.4
  • 使用VsCode直接打开这个Vue项目

🙌我们来看看Vue项目结构

1.先来了解目录结构：

前端工程化方式的开发，主要包括如下4个特点:

• 模块化：将js和css等，做成一个个可复用模块
• 组件化：我们将UI组件，css样式，js行为封装成一个个的组件，便于管理
• 规范化：我们提供一套标准的规范的目录接口和编码规范，所有开发人员遵循这套规范
• 自动化：项目的构建，测试，部署全部都是自动完成

2.那开发时，我们应该在哪个文件中写代码呢？来看看项目开发流程：

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

再来看看我们前面学习HTML、CSS、JS、Axios、Vue等技术时的工程界面：

两相对比就可以看出上述开发模式存在如下问题：

• 不规范：每次开发都是从零开始，比较麻烦
• 难复用：多个页面中的组件共用性不好
• 难维护：js、图片等资源没有规范化的存储目录，没有统一的标准，不方便维护

所以Vue工程化，就是在企业级的前端项目开发中，**把前端开发所需要的工具、技术、流程、经验进行规范化和标准化。**从而统一开发规范、提升开发效率，降低开发难度、提高复用等等。

那要怎么写网页结构呢？

Vue的组件有两种不同的风格：组合式API 和 选项式API
我们前面学习HTML、CSS、JS、Axios、Vue等技术时的工程界面就是选项是API：

1. 选项式API：

可以用包含多个选项的对象来描述组件的逻辑，如：data，methods，mounted等。选项定义的属性都会暴露在函数内部的this上，它会指向当前的组件实例。

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script type="module">
      import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
      createApp({
        data() {
          return {
            searchForm: {
              name: '',
              gender: '',
              job: ''
            },
            empList: []
          }
        },
        methods: {
          search() {
            //基于axios发送异步请求，请求https://web-server.itheima.net/emps/list，根据条件查询员工列表
            axios.get(`https://web-server.itheima.net/emps/list?name=${this.searchForm.name}&gender=${this.searchForm.gender}&job=${this.searchForm.job}`).then(res => {
              this.empList = res.data.data
            })
          },
          clear() {
            this.searchForm= {
              name: '',
              gender: '',
              job: ''
            }
          }
        },

        mounted() {
         this.search();
        }
        
      }).mount('#container')

      
    </script>

2. 组合式API：

是Vue3提供的一种基于函数的组件编写方式，通过使用函数来组织和复用组件的逻辑。它提供了一种更灵活、更可组合的方式来编写组件。代码形式如下：

<script setup>
import { ref, onMounted } from 'vue';
const count = ref(0); //声明响应式变量

function increment(){ //声明函数
   count.value++;
}

onMounted(() => { //声明钩子函数
  console.log('Vue Mounted....'); 
})
</script>

<template>
   <input type="button" @click="increment"> Api Demo1 Count : {{ count }}
</template>

<style scoped>
   
</style>

注：在Vue中的组合式API使用时，是没有this对象的，this对象是undefined。

最后🎉我们来看看员工列表数据怎么用Vue工程化来实现

代码：

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

import axios from 'axios';

// 定义响应式数据
const name = ref('');
const gender = ref('');
const job = ref('');
const userList = ref([]);

// 定义查询方法
const search = async() => {
  
  //基于axios发送异步请求，请求https://web-server.itheima.net/emps/list，根据条件查询员工列表
  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>



<template>
  <div id="center">
    姓名: <input type="text" name="name" v-model="name">
 
    性别:
    <select name="gender" v-model="gender">
      <option value="1">男</option>
      <option value="2">女</option>
    </select>
 
    职位:
    <select name="job" v-model="job">
      <option value="1">班主任</option>
      <option value="2">讲师</option>
      <option value="3">其他</option>
    </select>
 
    <input class="btn" type="button" value="查询" @click="search">
  </div>
   
  <table>
    <tr>
      <th>序号</th>
      <th>姓名</th>
      <th>头像</th>
      <th>性别</th>
      <th>职位</th>
      <th>入职时间</th>
      <th>更新时间</th>
    </tr>
 
    <!-- v-for 用于列表循环渲染元素 -->
    <tr v-for="(user, index) in userList" :key="user.id">
      <td>{{index + 1}}</td>
      <td>{{user.name}}</td>
      <td> <img :src="user.image"> </td>
      <td>
        <span v-if="user.gender == 1">男</span>
        <span v-else-if="user.gender == 2">女</span>
        <span v-else>其他</span>
      </td>
      <td>
        <span v-if="user.job == 1">班主任</span>
        <span v-else-if="user.job == 2">讲师</span>
        <span v-else-if="user.job == 3">学工主管</span>
        <span v-else-if="user.job == 4">教研主管</span>
        <span v-else-if="user.job == 5">咨询师</span>
        <span v-else>其他</span>
      </td>
      <td>{{user.entrydate}}</td>
      <td>{{user.updatetime}}</td>
    </tr>
  </table>
</template>
 
<style scoped>
  table,th,td {
    border: 1px solid #000;
    border-collapse: collapse;
    line-height: 50px;
    text-align: center;
  }
 
  #center,table {
    width: 60%;
    margin: auto;
  }
 
  #center {
    margin-bottom: 20px;
  }
 
  img {
    width: 50px;
  }
 
  input,select {
    width: 17%;
    padding: 10px;
    margin-right: 30px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
 
  .btn {
    background-color: #ccc;
  }
</style>

小白啊！！！写的不好轻喷啊🤯如果觉得写的不好，点个赞吧🤪（批评是我写作的动力）

…。。。。。。。。。。。…

…。。。。。。。。。。。…