Vue 工程化

发布于：2025-07-29 ⋅ 阅读:(24) ⋅ 点赞:(0)

什么是 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 文件 

<!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'。

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

import './assets/main.css'

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

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

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

<!-- 定义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

<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 里面

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

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

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


</style>

案例 

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

<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 的命令

npm install axios

 

 

 

 

 

 

 

 

 

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布