黑马JavaWeb开发笔记10(前端完结)——Vue路由介绍入门、前端工程打包、nginx前端部署

前言

本篇文章是2023年最新黑马JavaWeb开发笔记10：Vue路由介绍&入门、前端工程打包、nginx前端部署的总结，帮助需要学习Web开发的朋友温故而知新。

1. Vue路由介绍&入门
2. 前端工程打包
3. nginx前端部署

一、Vue路由

1. 介绍

• Vue Router是Vue的官方路由
• vue官方提供了路由插件Vue Router,其主要组成如下：
  • VueRouter：路由器类，根据路由请求在路由视图中动态渲染选中的组件
  • < router-link >：请求链接组件，浏览器会解析成< a >
  • < router-view >：动态视图组件，用来渲染展示与路由路径对应的组件
• 其工作原理如下图所示：
  
  • 首先VueRouter根据我们配置的url的hash片段和路由的组件关系去维护一张路由表;
  • 然后我们页面提供一个组件,用户点击，发出路由请求;
  • 接着我们的VueRouter根据路由请求，在路由表中找到对应的vue组件；
  • 最后VueRouter会切换中的组件，从而进行视图的更新

2. 路由入门

接下来我们来演示vue的路由功能

• 首先我们需要先安装vue-router插件，可以通过如下命令：
  npm install vue-router@3.5.1
  (但是我们不需要安装，因为当初我们在创建项目时，已经勾选了路由功能，已经安装好了)
• 然后我们需要在src/router/index.js文件中定义路由表，根据其提供的模板代码进行修改，最终代
  码如下：（注意需要去掉没有引用的import模块）

import Vue 'vue'
import VueRouter 'vue-router'
Vue.use(VueRouter)
const routes = [
	 {
	path: '/emp', //地址hash
	name: 'emp',
	component: () => import('../views/tlias/EmpView.vue') //对应的
	vue组件
	 },
	{
	path: '/dept',
	name: 'dept',
	component: () => import('../views/tlias/DeptView.vue')
	 }
]
const router = new VueRouter({
	routes
})

export default router

• 在main.js中，我们已经引入了router功能，如下图所示
  
• 路由基本信息配置好了，路由表已经被加载，此时我们还缺少2个东西，就是< router-lin >和
  < router-view >,所以我们需要修改2个页面（EmpView.vue和DeptView.vue）我们左侧栏的2个按
  钮为router-link,其代码如下：

<el-menu-item index="1-1">
<router-link to="/dept">部门管理</router-link>
</el-menu-item>
<el-menu-item index="1-2">
<router-link to="/emp">员工管理</router-link>
</el-menu-item>

• 然后我们还需要在内容展示区域即App.vue中定义route-view，作为组件的切换，其App.vue的完整
  代码如下：

<template>
<div id="app">
	<!-- {{message}} -->
	<!-- <element-view></element-view> -->
	<!-- <emp-view></emp-view> -->
	<router-view></router-view>
</div>
</template>
<script>
// import EmpView './views/tlias/EmpView.vue'
// import ElementView './views/Element/ElementView.vue'
export default {
	components: { },
		data(){
		return {
			"message":"hello world"
		 }
	 }
}
</script>
<style>
</style>

• 但是我们浏览器打开地址： http://localhost:7000/ ，发现一片空白，因为我们默认的路由路径是/,但是路由配置中没有对应的关系，所以我们需要在路由配置中/对应的路由组件，代码如下：

const routes = [
	 {
		path: '/emp',
		name: 'emp',
		component: () => import('../views/tlias/EmpView.vue')
	 },
	 {
		path: '/dept',
		name: 'dept',
		component: () => import('../views/tlias/DeptView.vue')
	 },
	 {
		path: '/',
		redirect:'/emp' //表示重定向到/emp即可
	 },
]

• 此时我们打开浏览器，访问http://localhost:7000 发现直接访问的是emp的页面，并且能够进行
  切换了，其具体如下图所示：
  
  到此我们的路由实现成功。

二、打包部署

1. 前端工程打包

• 我们直接通过VS Code的NPM脚本中提供的build按钮来完整，如下图所示，直接点击即可：
  

• 然后会在工程目录下生成一个dist目录，用于存放需要发布的前端资源，如下图所示：
  

2. 部署前端工程

2.1 nginx介绍

• Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器。
• 其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用
• niginx在windows中的安装：将nginx-1.22.0.zip压缩文件拷贝到无中文无空格的目录下，直接解压
• 下图是nginx的解压目录以及目录结构说明：
  
  很明显，我们如果要发布，直接将资源放入到html目录中

2.2 部署

• 将我们之前打包的前端工程dist目录下的内容拷贝到nginx的html目录下，如下图所示：
  
• 然后我们通过双击nginx.exe文件来启动nginx，如下图所示：
  
• nginx服务器的端口号是80，启动成功之后，浏览器直接访问http://localhost:80 即可，其中80端口可以省略，其浏览器展示效果如图所示：
  
  到此，我们的前端工程发布成功
• 如果80端口被占用，我们需要通过conf/nginx.conf配置文件来修改端口号。如下图所示：
  
  

总结

本篇文章是2023年最新黑马JavaWeb开发笔记10：Vue路由介绍&入门、前端工程打包、nginx前端部署的总结，帮助需要学习Web开发的朋友温故而知新。