【JaveWeb教程】(10)Web前端基础:Vue快速入门 一篇文章教你轻松搞定Vue路由与打包部署 附详细示例代码案例

时间:2024-01-22 16:23:17



目录

  • 1 Vue路由
  • 1.1 路由介绍
  • 1.2 路由入门
  • 2 打包部署
  • 2.1 前端工程打包
  • 2.2 部署前端工程
  • 2.2.1 nginx介绍
  • 2.2.2 部署


【JaveWeb教程】(10)Web前端基础:Vue快速入门 一篇文章教你轻松搞定Vue路由与打包部署 附详细示例代码案例_nginx

1 Vue路由

1.1 路由介绍

将资代码/vue-project(路由)/vue-project/src/views/tlias/DeptView.vue拷贝到我们当前EmpView.vue同级,其结构如下:

【JaveWeb教程】(10)Web前端基础:Vue快速入门 一篇文章教你轻松搞定Vue路由与打包部署 附详细示例代码案例_vue.js_02

此时我们希望基于4.4案例中的功能,实现点击侧边栏的部门管理,显示部门管理的信息,点击员工管理,显示员工管理的信息,效果如下图所示:

【JaveWeb教程】(10)Web前端基础:Vue快速入门 一篇文章教你轻松搞定Vue路由与打包部署 附详细示例代码案例_nginx_03

【JaveWeb教程】(10)Web前端基础:Vue快速入门 一篇文章教你轻松搞定Vue路由与打包部署 附详细示例代码案例_javascript_04

这就需要借助我们的vue的路由功能了。

前端路由:URL中的hash(#号之后的内容)与组件之间的对应关系,如下图所示:

【JaveWeb教程】(10)Web前端基础:Vue快速入门 一篇文章教你轻松搞定Vue路由与打包部署 附详细示例代码案例_前端_05

当我们点击左侧导航栏时,浏览器的地址栏会发生变化,路由自动更新显示与url所对应的vue组件。

而我们vue官方提供了路由插件Vue Router,其主要组成如下:

  • VueRouter:路由器类,根据路由请求在路由视图中动态渲染选中的组件
  • <router-link>:请求链接组件,浏览器会解析成<a>
  • <router-view>:动态视图组件,用来渲染展示与路由路径对应的组件

其工作原理如下图所示:

【JaveWeb教程】(10)Web前端基础:Vue快速入门 一篇文章教你轻松搞定Vue路由与打包部署 附详细示例代码案例_前端_06

首先VueRouter根据我们配置的url的hash片段和路由的组件关系去维护一张路由表;

然后我们页面提供一个<router-link>组件,用户点击,发出路由请求;

接着我们的VueRouter根据路由请求,在路由表中找到对应的vue组件;

最后VueRouter会切换<router-view>中的组件,从而进行视图的更新

1.2 路由入门

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

首先我们需要先安装vue-router插件,可以通过如下命令

npm install vue-router@3.5.1

但是我们不需要安装,因为当初我们再创建项目时,已经勾选了路由功能,已经安装好了。

然后我们需要在src/router/index.js文件中定义路由表,根据其提供的模板代码进行修改,最终代码如下:

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

注意需要去掉没有引用的import模块。

在main.js中,我们已经引入了router功能,如下图所示:

【JaveWeb教程】(10)Web前端基础:Vue快速入门 一篇文章教你轻松搞定Vue路由与打包部署 附详细示例代码案例_javascript_07

路由基本信息配置好了,路由表已经被加载,此时我们还缺少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的页面,并且能够进行切换了,其具体如下图所示:

【JaveWeb教程】(10)Web前端基础:Vue快速入门 一篇文章教你轻松搞定Vue路由与打包部署 附详细示例代码案例_前端_08

到此我们的路由实现成功。

2 打包部署

我们的前端工程开发好了,但是我们需要发布,那么如何发布呢?主要分为2步:

  1. 前端工程打包
  2. 通过nginx服务器发布前端工程

2.1 前端工程打包

接下来我们先来对前端工程进行打包

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

【JaveWeb教程】(10)Web前端基础:Vue快速入门 一篇文章教你轻松搞定Vue路由与打包部署 附详细示例代码案例_javascript_09

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

【JaveWeb教程】(10)Web前端基础:Vue快速入门 一篇文章教你轻松搞定Vue路由与打包部署 附详细示例代码案例_前端_10

2.2 部署前端工程

2.2.1 nginx介绍

nginx: Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少,并发能力强,在各大型互联网公司都有非常广泛的使用。

niginx在windows中的安装是比较方便的,直接解压即可。所以我们直接将资料中的nginx-1.22.0.zip压缩文件拷贝到无中文的目录下,直接解压即可,如下图所示就是nginx的解压目录以及目录结构说明:

【JaveWeb教程】(10)Web前端基础:Vue快速入门 一篇文章教你轻松搞定Vue路由与打包部署 附详细示例代码案例_前端_11

很明显,我们如果要发布,直接将资源放入到html目录中。

2.2.2 部署

将我们之前打包的前端工程dist目录下得内容拷贝到nginx的html目录下,如下图所示:

【JaveWeb教程】(10)Web前端基础:Vue快速入门 一篇文章教你轻松搞定Vue路由与打包部署 附详细示例代码案例_前端_12

然后我们通过双击nginx下得nginx.exe文件来启动nginx,如下图所示:

【JaveWeb教程】(10)Web前端基础:Vue快速入门 一篇文章教你轻松搞定Vue路由与打包部署 附详细示例代码案例_Vue_13

nginx服务器的端口号是80,所以启动成功之后,我们浏览器直接访问http://localhost:80 即可,其中80端口可以省略,其浏览器展示效果如图所示:

【JaveWeb教程】(10)Web前端基础:Vue快速入门 一篇文章教你轻松搞定Vue路由与打包部署 附详细示例代码案例_javascript_14

到此,我们的前端工程发布成功。

PS: 如果80端口被占用,我们需要通过conf/nginx.conf配置文件来修改端口号。如下图所示:

【JaveWeb教程】(10)Web前端基础:Vue快速入门 一篇文章教你轻松搞定Vue路由与打包部署 附详细示例代码案例_前端_15