菜鸟之路Day25一一前端工程化（二）

菜鸟之路Day25一一前端工程化（二）

作者：blue

时间：2025.3.19

1.概述

文章内容大部分学习自黑马程序员BV1m84y1w7Tb

本文延续上一篇菜鸟之路Day24一一前端工程化（一）-CSDN博客，旨在梳理，从0到1，在仅有一个vscode的情况下，一步步完成一个使用Vue框架搭建的前端页面，并最终将其部署在Nginx服务器上。

截至目前阶段，我们已经完成了Vue项目的创建，现在我们需要做的就是编写组件或者说是页面，然后最终将组件挂载到index.html中进行展示。我们一步步来完成这个过程。

2.Element快速入门

为了快速完成前端页面的编写，提高前端页面的编写效率，我们可以利用Element组件库来帮助我们完成这个工作

什么是Element？

Element：是饿了么团队研发的，一套作为开发者，设计师和产品经理准备的基于Vue2.0的桌面端组件库。

组件：组成网页部件，例如超链接，按钮，图片，表格，表单，分页条等等

官网：https://element.eleme.cn/#/zh-CNListener

环境配置

①安装ElementUI组件库（在当前工程的目录下），在命令行执行指令

npm install element-ui@2.15.3

②引入ElementUI组件库

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

完成以上两步后我们可以在src中的views文件夹中新建一个名为element的文件夹然后在这个文件夹下再创建一个ElementView.vue的组件文件，我们将在这个文件中对ElementUI库做一个简单的使用演示

我们可以访问Element的官网，然后在侧边栏中选择我们所需要的组件，查看其源码，然后进行一个复制粘贴

就如同以下代码，我复制了一串按钮组件的代码，直接粘贴到了template部分，有时我们复制的组件比较繁琐，还需要注意观察这个组件需不需要什么数据模型，或者是样式，要把他们都复制到对应的版块中。

<template><div><el-row><el-button>默认按钮</el-button><el-button type="primary">主要按钮</el-button><el-button type="success">成功按钮</el-button><el-button type="info">信息按钮</el-button><el-button type="warning">警告按钮</el-button><el-button type="danger">危险按钮</el-button></el-row></div>
</template><script></script><style></style>

一份简易的组件代码写好了，然后现在的问题是，我们要如何看见这个组件所展示的页面呢？

我们回顾，我们是怎么看到App.vue这个根组件所渲染的页面的，在mian.js中引入了App.vue，mian.js又将根组件挂载到index.html上，所以我们可以将ElementView.vue引入到App.vue这个根组件中。让ElementView.vue在App.vue中渲染。

具体怎么做呢？我们一步一步来看，首先如果读者是按照我上一篇文章跟进的话，那么此时App.vue中应该是有一个注册页面的代码，我们可以在views下新建一个文件夹，然后在这个文件夹新建一个login.vue组件，然后将刚刚App.vue中的代码移植过去，这样一来我们就清空了App.vue。

然后我们依然正常的在App.vue中写出一个.vue应该有的三个部分，template，script，style。好，别忘了我们的目的，是将ElementView.vue引入到App.vue这个根组件中。这个过程主要分为3步

①组件导入

在代码的 <script> 部分，我们使用 import 语句从指定路径导入 ElementView 组件：

import ElementView from "./views/element/ElementView.vue" 

这一步的作用是将 ElementView.vue 文件中的组件定义引入到当前文件里，让当前文件可以使用该组件。

②局部组件注册

在 Vue 里，要使用一个组件，就需要先进行注册。在 components 选项里，键名 ElementView 是组件在当前组件中使用的名称，它的值就是之前导入的 ElementView 组件。Vue 会根据这个注册信息，在解析模板时识别并渲染对应的组件。

export default {components: {ElementView},// 其他选项
}

③模板中使用组件

在 <template> 部分，我们使用了 <element-view></element-view> 标签。在 Vue 中，组件名称在模板里使用时，既可以采用 PascalCase（大驼峰命名法，如 ElementView），也可以使用 kebab-case（短横线分隔命名法，如 element-view）。Vue 会自动把 element-view 映射到已注册的 ElementView 组件上，进而渲染出该组件的内容。

综上所述，因为我们导入了 ElementView 组件，并且在当前组件里进行了局部注册，所以能够在模板中使用 <element-view></element-view> 来渲染该组件。

于是App.vue中的代码被我们修改为了这样：

<template><div><!-- 3.在模板中使用组件 --><element-view></element-view></div>
</template><script>//1.组件导入import ElementView from "./views/element/ElementView.vue"export default {//2.局部组件注册components: {ElementView},}
</script><style></style>

此时我们再次启动这个项目，可以看到默认页面，已经变成了 ElementView.vue 中的内容

ElementUI库还有非常多的组件，使用方式与以上大同小异，再此就不一一展示。

3.综合案例

在这个综合案例中，我们将利用前面所学的知识完成一个综合小demo，并将其部署在Nginx服务器上。

步骤:

①创建页面，完成页面的整体布局规划

②布局中各个部分的组件实现

③列表数据的异步加载，并渲染展示

我们一步一步来做，首先，我在刚刚创建的User文件下创建了一个EmpView.vue，我们将在这个文件下将上面的内容编辑出来，我将其引入到App.vue中，这样我就能通过vue-cli提供的热部署功能，实时查看页面的编写情况。

一.布局

我们在Element官网发现以下这个布局非常适合我们

通过参考官网示例的代码，我们编写出大体布局的页面

EmpView.vue:

<template><div><el-container style="height: 700px; border: 1px solid #eee"><el-header style="font-size: 40px; background-color: rgb(238, 241, 246)">智能学习辅助系统</el-header><el-container><el-aside width="200px"><el-menu><el-submenu><template slot="title"><i class="el-icon-message"></i>信息管理系统</template><el-menu-item>部门管理</el-menu-item><el-menu-item>员工管理</el-menu-item></el-submenu></el-menu></el-aside><el-main><el-table :data="tableData"><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="image" label="图像" width="180"></el-table-column><el-table-column prop="gender" label="性别" width="140"></el-table-column><el-table-column prop="job" label="职位" width="140"></el-table-column><el-table-column prop="entrydate" label="入职日期" width="180"></el-table-column><el-table-column prop="updatetime" label="最后操作时间" width="230"></el-table-column><el-table-column label="操作"><el-button type="primary" size="mini">编辑</el-button><el-button type="danger" size="mini">删除</el-button></el-table-column></el-table></el-main></el-container></el-container></div>
</template><script>export default {data() {return {tableData:[]}}}
</script><style></style>

针对一些属性的解释

prop属性的作用是指定表格列要展示的数据字段。在表格渲染时，它会从每一行的数据对象里提取和prop属性值同名的字段，然后将该字段的值显示在对应的表格单元格中。

placeholder 属性用于在输入框为空时显示一段提示性文本，它可以帮助用户了解该输入框期望输入的内容，起到引导用户输入的作用。当用户在输入框中输入内容时，这个提示文本会自动消失；而当输入框中的内容被清空后，提示文本又会重新显示出来。

二.组件

为页面添加必要组件，完善页面功能

<template><div><el-container style="height: 700px; border: 1px solid #eee"><el-header style="font-size: 40px; background-color: rgb(238, 241, 246)">智能学习辅助系统</el-header><el-container><el-aside width="200px"><el-menu><el-submenu><template slot="title"><i class="el-icon-message"></i>信息管理系统</template><el-menu-item>部门管理</el-menu-item><el-menu-item>员工管理</el-menu-item></el-submenu></el-menu></el-aside><el-main><!-- 表单 --><el-form :inline="true" :model="searchFrom" class="demo-form-inline"><el-form-item label="姓名"><el-input v-model="searchFrom.name" placeholder="姓名"></el-input></el-form-item><el-form-item label="性别"><el-select v-model="searchFrom.gender" placeholder="性别"><el-option label="男" value="1"></el-option><el-option label="女" value="2"></el-option></el-select></el-form-item><el-form-item label="入职日期"><!-- 日期选择器 --><el-date-picker v-model="searchFrom.entrydate" type="daterange" range-separator="至"start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">查询</el-button></el-form-item></el-form><!-- 表格 --><el-table :data="tableData" border><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="image" label="图像" width="180"></el-table-column><el-table-column prop="gender" label="性别" width="140"></el-table-column><el-table-column prop="job" label="职位" width="140"></el-table-column><el-table-column prop="entrydate" label="入职日期" width="180"></el-table-column><el-table-column prop="updatetime" label="最后操作时间" width="230"></el-table-column><el-table-column label="操作"><el-button type="primary" size="mini">编辑</el-button><el-button type="danger" size="mini">删除</el-button></el-table-column></el-table><br><!-- 分页条 --><el-pagination background layout="prev, pager, next" :total="1000"></el-pagination></el-main></el-container></el-container></div>
</template><script>export default {data() {return {tableData: [],searchFrom: {name: "",gender: "",entrydate: []}}},methods: {onSubmit() {alert("submit!");}}}
</script><style></style>

三.Axios异步加载数据

在Vue项目中使用Axios：

//在项目目录下安装axios：npm insatll axios//需要使用axios时，导入axios：import axios from 'axios'

请求代码：

<script>import axios from 'axios'export default {data() {return {tableData: [],searchFrom: {name: "",gender: "",entrydate: []}}},methods: {onSubmit() {alert("submit!");}},mounted() {axios.get('http://127.0.0.1:4523/m1/6068388-5758637-default/user/1').then(result => {console.log(result.data.data); // 打印返回的数据，检查格式// console.log('数据类型:', Array.isArray(result.data.data));this.tableData = [result.data.data]; //魔鬼细节！！！}).catch(error => {console.error('请求出错:', error);});}}
</script>

注意注意，这里有一个魔鬼细节，笔者在这里调试35min才调试出来（deepseek NB）

this.tableData = [result.data.data]; //魔鬼细节！！！

由于tableData所需要的数据是一个数组，但是result.data.data是一个对象，所以，我们应该把result.data.data强行转为一个数组。

不过这不太优雅，这是接口的问题，接口的响应数据应该是一个对象数组，所以我们可以直接去改接口

最终我们将接口的数据结构修改为如下图所示

这样我们就可以直接做一个赋值操作啦this.tableData = result.data.data;

<template><div><el-container style="height: 700px; border: 1px solid #eee"><el-header style="font-size: 40px; background-color: rgb(238, 241, 246)">智能学习辅助系统</el-header><el-container><el-aside width="200px"><el-menu><el-submenu><template slot="title"><i class="el-icon-message"></i>信息管理系统</template><el-menu-item>部门管理</el-menu-item><el-menu-item>员工管理</el-menu-item></el-submenu></el-menu></el-aside><el-main><!-- 表单 --><el-form :inline="true" :model="searchFrom" class="demo-form-inline"><el-form-item label="姓名"><el-input v-model="searchFrom.name" placeholder="姓名"></el-input></el-form-item><el-form-item label="性别"><el-select v-model="searchFrom.gender" placeholder="性别"><el-option label="男" value="1"></el-option><el-option label="女" value="2"></el-option></el-select></el-form-item><el-form-item label="入职日期"><!-- 日期选择器 --><el-date-picker v-model="searchFrom.entrydate" type="daterange" range-separator="至"start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">查询</el-button></el-form-item></el-form><!-- 表格 --><el-table :data="tableData" border><el-table-column prop="id" label="ID" width="180"></el-table-column><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="image" label="图像" width="180"></el-table-column><el-table-column prop="gender" label="性别" width="140"></el-table-column><el-table-column prop="job" label="职位" width="140"></el-table-column><el-table-column prop="entrydate" label="入职日期" width="180"></el-table-column><el-table-column prop="updatetime" label="最后操作时间" width="230"></el-table-column><el-table-column label="操作"><el-button type="primary" size="mini">编辑</el-button><el-button type="danger" size="mini">删除</el-button></el-table-column></el-table><br><!-- 分页条 --><el-pagination background layout="prev, pager, next" :total="1000"></el-pagination></el-main></el-container></el-container></div>
</template><script>import axios from 'axios'export default {data() {return {tableData: [],searchFrom: {name: "",gender: "",entrydate: []}}},methods: {onSubmit() {alert("submit!");}},mounted() {axios.get('http://127.0.0.1:4523/m1/6068388-5758637-default/user/1').then(result => {console.log(result.data.data); // 打印返回的数据，检查格式// console.log('数据类型:', Array.isArray(result.data.data));this.tableData = result.data.data;}).catch(error => {console.error('请求出错:', error);});}}
</script><style></style>

在此需要解释一下mounted钩子函数

在 Vue.js 中，mounted 是一个生命周期钩子函数。下面为你详细介绍 mounted 钩子函数的相关内容：

1. 生命周期钩子概述

Vue 实例从创建到销毁的整个过程，被称为 Vue 的生命周期。在这个生命周期的不同阶段，Vue 会自动调用一些特定的函数，这些函数就被叫做生命周期钩子函数。开发者可以利用这些钩子函数，在特定的时间点执行自定义的逻辑。

2. mounted 钩子函数的作用

mounted 钩子函数会在 Vue 实例挂载到 DOM 之后立即被调用。也就是说，当 Vue 实例已经将其模板渲染成真实的 DOM 元素并插入到页面中时，mounted 函数就会执行。通常，我们会在这个钩子函数里进行一些需要访问 DOM 的操作，或者发起异步请求来获取数据。

可以看到数据成功被渲染

四.Vue路由

我们可以看到，我们在浏览器中打开项目，他的URL是这样的

http://localhost:7000/#/

前端路由：URL中的hash{#号}与组件之间的对应关系

Vue Router 是Vue的官方路由

组成：

​ VueRouter：路由器类，根据路由请求在路由视图中动态渲染选中的组件

​ ‘’ :请求链接组件，浏览器会解析成’’

​ ‘’:动态视图组件，用来渲染展示与路由路径对应的组件

我们可以通过配置路由来完成页面的切换

首先要注意安装Vue Router(不过我们在用ui界面创建Vue项目时已经选择了)

npm install vue-router@3.5.1

如何配置路由信息呢？

在src>router>index.js中可以配置路由信息，我们可以看到官方的Vue项目给我们演示了两种配置路由的方法，我们只需要依葫芦画瓢进根据我们的需要进行修改即可，因为我们之前写了注册界面，所以我在这里就做一个注册界面与员工管理界面切换的演示逻辑，并不符合正常业务逻辑，仅仅只是为了展示。

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'Vue.use(VueRouter)const routes = [{path: '/',name: 'home',component: HomeView},{path: '/about',name: 'about',// route level code-splitting// this generates a separate chunk (about.[hash].js) for this route// which is lazy-loaded when the route is visited.component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')}
]const router = new VueRouter({routes
})export default router

• path：表示路由的路径，这里的 '/' 是根路径，当用户访问应用的根 URL 时，会匹配到这个路由。
• name：为路由定义的一个名称，这里是 'home'，可以在代码中通过名称来引用这个路由，例如在使用 router.push 或 router-link 时可以使用名称来导航，这样可以提高代码的可读性和可维护性。
• component：指定当用户访问该路径时要渲染的组件，这里直接引用了 HomeView 组件，意味着在项目中已经导入了 HomeView 组件。

about这里使用了动态导入（也称为懒加载）的方式来加载组件。具体解释如下：

• () => import('../views/AboutView.vue') 是一个箭头函数，返回一个 import() 函数调用。import() 是 ES6 动态导入模块的语法，它会返回一个 Promise，当 Promise 成功解析时，会加载并返回指定的模块。

我们将src>router>index.js修改成这样

const routes = [{path: '/Emp',name: 'Emp',component: () => import( '../views/User/EmpView.vue')},{path: '/login',name: 'login',component: () => import('../views/User/loginView.vue')}
]

然后我们’'来链接组件

EmpView.vue中

<el-submenu><template slot="title"><i class="el-icon-message"></i>信息管理系统</template><el-menu-item><router-link to="/login">登录</router-link></el-menu-item><el-menu-item><router-link to="/Emp">员工管理</router-link></el-menu-item>
</el-submenu>

这个改好之后我们通过’'来渲染组件，在根组件App.vue中，将原来挂载的组件信息注释掉用动态视图组件，来渲染展示与路由路径对应的组件

<template><div><!-- 3.在模板中使用组件 --><!-- <EmpView></EmpView> --><router-view></router-view></div>
</template>
<script>//1.组件导入// import EmpView from './views/User/EmpView.vue'export default {//2.局部组件注册components: {// EmpView},}
</script>
<style>
</style>

此外，为了避免打开根目录时出现空白页面，我们对根目录的路由做一个重定向

const routes = [{path: '/Emp',name: 'Emp',component: () => import( '../views/User/EmpView.vue')},{path: '/login',name: 'login',component: () => import('../views/User/loginView.vue')},//将根目录重定向到login页面{path: '/',redirect: '/login'}
]

好了路由配置到这里就结束了，我们重新启动项目，现在，我们可以自由切换页面了

五.打包部署

打包

打包只需要执行build任务就可以了，打包后的内容会被放在dist文件夹下，我们做部署的话，就只需要将dist内容部署到服务器上即可。

npm run build

部署

Nginx

介绍：Nginx是一款轻量级的web服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器。其特点是占有内存少，并发能力强。

下载地址：nginx: download

解压后，文件中有这么几个文件。

部署：将打包好的dist目录下的文件按，复制到nginx安装目录的html目录下

启动：双击nginx.exe文件即可，Nginx服务器默认占用80端口号

直接在浏览器访问80端口，即可访问，我们刚刚所写的页面

访问：http://localhost:90

如果80端口被占用了，可以在conf文件夹下的nginx.conf文件中修改默认的端口号

打开后，修改server板块下的listen即可