Vue 工程化 - 技术栈

什么是 Vue

Vue 是一款用于构建用户界面的渐进式的 JavaScript 框架。

前端工程化

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

环境准备

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

create - vue 提供了如下功能：

-> 统一的目录结构

-> 本地测试

-> 热部署

-> 单元测试

-> 集成打包上线

依赖环境：NodeJS

接下来我们就要安装 NodeJS。

NodeJs 是一个免费，开源，跨平台的 javaScript 运行时的环境，就像我们学习 java 之前要先安装 jdk，要得有 java 的运行环境。

这个 NodeJS 安装完成后，会自动配置好环境变量，我们可以通过 node -v 来验证

安装完 NodeJs 时，会自动安装 npm（Node Package Manager）是 NodeJS 的软件包管理器

然后我们要配置 npm 的全局安装路径，我们必须以管理员身份运行 cmd

复制代码

npm config set prefix "D:\develop\NodeJS"

最后我们要配置淘宝镜像，加速我们后续的下载操作

复制代码

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

Vue 项目简介

创建

创建一个工程化的 Vue 项目，执行命令：npm create vue@3.3.4 (这里如果不指定版本就会自动安装最新版本)

安装依赖

然后我们要进入到我们刚才创建的 vue-project1 的目录下，执行 npm install 命令来安装依赖，注意这个过程需要联网

我们用 vscode 打开刚才创建的 Vue 文件夹，可以看到里面的文件

启动

方法一：在 cmd 中输入 npm run dev

方法二：直接在 vscode 中启动

看到以下页面就代表启动成功了

开发流程

我们通过打开这个网页的源代码可以发现，这个 html 页面其实对应的就是我们文件夹中的 index.html 这个 html 文件

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>

可以看见这里面的 src 引用的是 main.js，我们称其为 **入口文件,**这个 createApp 我们叫做应用实例，它接管的区域就是 'app'。

javascript 复制代码

import { createApp } from 'vue'
import App from './App.vue'

import './assets/main.css'

createApp(App).mount('#app')

通过这个 import App from 可以看到相关的数据都是写在 App.vue 这个文件当中，我们称其为 根组件

所以最后我们在浏览器页面中所呈现出来的数据，都是在这个 App.vue 根组件中定义的。

html 复制代码

<!-- 定义JS，控制模板部分的数据和行为（JS） -->
<script setup>
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
</script>

<!-- 模板部分，控制的是页面的结构（HTML） -->
<template>
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />
    </div>
  </header>

  <main>
    <TheWelcome />
  </main>
</template>

<!-- 当前组件的 CSS 样式 -->
<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>

API 风格

Vue 的组件有两种不同的风格：选项式 API 和 组合式 API

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

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

示例：我们先写一个 Demp.vue

html 复制代码

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

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

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

// 钩子函数
onMounted(() => {
  console.log('Vue mounted')
})
</script>

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

<style scoped>

</style>

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

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

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

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

然后将这个 Demo 导到 App 里面

html 复制代码

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

<!-- 模板部分，控制的是页面的结构（HTML） -->
<template>
  <ApiDemo></ApiDemo>
</template>

<!-- 当前组件的 CSS 样式 -->
<style scoped>


</style>

案例

要求在页面加载完毕之后，发送异步请求，加载数据，渲染表格

java 复制代码

<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 发送异步请求，请求服务器端加载数据
  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>

注意我们这里如果要用 axios，我们需要在目录下执行安装 axios 的命令

java 复制代码

npm install axios