后端程序员需要了解的vue知识

最新推荐文章于 2024-08-17 11:52:42 发布
最新推荐文章于 2024-08-17 11:52:42 发布
阅读量906 收藏 5
点赞数 5
分类专栏： 前端 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53961667/article/details/140082034
版权

vue简单使用

文章目录

引言

一个完整的html页面包括了视图和数据，数据是通过请求 从后台获取的，那么意味着我们需要将后台获取到的数据呈现到页面上，很明显， 这就需要我们使用DOM操作。正因为这种开发流程，所以我们引入了一种叫做MVVM(Model-View-ViewModel)的前端开发思想，即让我们开发者更加关注数据，而非数据绑定到视图这种机械化的操作。那么具体什么是MVVM思想呢？

MVVM:其实是Model-View-ViewModel的缩写，有3个单词，具体释义如下：

  • Model: 数据模型，特指前端中通过请求从后台获取的数据
  • View: 视图，用于展示数据的页面，可以理解成我们的html+css搭建的页面，但是没有数据
  • ViewModel: 数据绑定到视图，负责将数据（Model）通过JavaScript的DOM技术，将数据展示到视图（View）上
1、什么是vue

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

框架即是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。基于框架进行开发，更加快捷、更加高效。

image-20240629181548015

2、vue简单使用

第一步：从官网下载文件，https://cn.vuejs.org/guide/quick-start.html，然后编写<script>标签来引入vue.js文件，代码如下：

<script src="js/vue.js"></script>

第二步：在js代码区域定义vue对象,代码如下：

<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
            message: "Hello Vue"
        }
    })
</script>

在创建vue对象时，有几个常用的属性：

  • el: 用来指定哪儿些标签受 Vue 管理。 该属性取值 #app 中的 app 需要是受管理的标签的id属性值
  • data: 用来定义数据模型
  • methods: 用来定义函数。

第三步：在html区域编写视图，其中{{}}是插值表达式，用来将vue对象中定义的model展示到页面上的

<body>
    <div id="app">
        <input type="text" v-model="message">
        {{message}}
    </div>
</body>

image-20240629181918593

整体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-快速入门</title>
    <script src="js/vue.js"></script>
</head>
<body>

    <div id="app">
        <input type="text" v-model="message">
        {{message}}
    </div>
    
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
            message: "Hello Vue"
        }
    })
</script>
</body>
</html>
3、vue指令

在上述的快速入门中，我们发现了html中输入了一个属性v-model，这个就是vue的指令。

**指令：**HTML 标签上带有 v- 前缀的特殊属性，不同指令具有不同含义。例如：v-if，v-for…

在vue中，通过大量的指令来实现数据绑定到视图的，所以接下来我们需要学习vue的常用指令，如下表所示：

指令作用
v-bind为HTML标签绑定属性值，如设置 href , css样式等
v-model在表单元素上创建双向数据绑定
v-on为HTML标签绑定事件
v-if条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else
v-else-if
v-show根据条件展示某元素，区别在于切换的是display属性的值
v-for列表渲染，遍历容器的元素或者对象的属性
3.1、v-bind和v-model
指令作用
v-bind为HTML标签绑定属性值，如设置 href , css样式等
v-model在表单元素上创建双向数据绑定

v-bind: 为HTML标签绑定属性值，如设置 href , css样式等。当vue对象中的数据模型发生变化时，标签的属性值会随之发生变化。

接下来我们通过代码来演示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-bind</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">

        <a >链接1</a>
        <a >链接2</a>

        <input type="text" >

    </div>

<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           url: "https://www.baidu.com"
        }
    })
</script>
</body>
</html>

在上述的代码中，我们需要给<a>标签的href属性赋值，并且值应该来自于vue对象的数据模型中的url变量。所以编写如下代码：

<a v-bind:href="url">链接1</a>

在上述的代码中，v-bind指令是可以省略的，但是:不能省略，所以第二个超链接的代码编写如下：

<a :href="url">链接2</a>

浏览器打开，2个超链接都可以点击，然后跳转到百度去！效果如图所示：

image-20240629182459573

注意：html属性前面有:表示采用的vue的属性绑定！

v-model： 在表单元素上创建双向数据绑定。什么是双向？

  • vue对象的data属性中的数据变化，视图展示会一起变化
  • 视图数据发生变化，vue对象的data属性中的数据也会随着变化。
<input type="text" v-model="url">

打开浏览器，我们修改表单项标签，发现vue对象data中的数据也发生了变化，如下图所示：

image-20240629182605109

通过上图我们发现，我们只是改变了表单数据，那么我们之前超链接的绑定的数据值也发生了变化，为什么？

就是因为我们双向绑定，在视图发生变化时，同时vue的data中的数据模型也会随着变化。

双向绑定的作用：可以获取表单的数据的值，然后提交给服务器

整体代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-bind</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">

        <a v-bind:href="url">链接1</a>
        <a :href="url">链接2</a>

        <input type="text" v-model="url">

    </div>

<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           url: "https://www.baidu.com"
        }
    })
</script>    
</body>
</html>
3.2、 v-on

v-on: 用来给html标签绑定事件的。需要注意的是如下2点：

  • v-on语法给标签的事件绑定的函数，必须是vue对象种声明的函数

  • v-on语法绑定事件时，事件名相比较js中的事件名，没有on

  • 例如：在js中，事件绑定demo函数

    <input onclick="demo()">

    vue中，事件绑定demo函数

    <input v-on:click="demo()">

接下来我们通过代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-on</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">

        <input type="button" value="点我一下">
        <input type="button" value="点我一下">

    </div>

<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           
        },
        methods: {
           
        }
    })
</script>    
</body>
</html>

然后我们需要在vue对象的methods属性中定义事件绑定时需要的handle()函数，代码如下：

 methods: {
        handle: function(){
           alert("你点我了一下...");
        }
}

然后我们给第一个按钮，通过v-on指令绑定单击事件，代码如下：

 <input type="button" value="点我一下" v-on:click="handle()">

同样，v-on也存在简写方式，即v-on: 可以替换成@，所以第二个按钮绑定单击事件的代码如下：

<input type="button" value="点我一下" @click="handle()">

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-on</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">

        <input type="button" value="点我一下" v-on:click="handle()">

        <input type="button" value="点我一下" @click="handle()">

    </div>

<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           
        },
        methods: {
            handle: function(){
                alert("你点我了一下...");
            }
        }
    })
</script>    
</body>
</html>
3.3、v-if和v-show
指令描述
v-if条件性的渲染某元素，判定为true时渲染,否则不渲染
v-if-else
v-else
v-show根据条件展示某元素，区别在于切换的是display属性的值

我们直接通过代码来演示效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-if与v-show</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        
        年龄<input type="text" v-model="age">经判定,为:
        <span>年轻人(35及以下)</span>
        <span>中年人(35-60)</span>
        <span>老年人(60及以上)</span>

        <br><br>
    </div>

<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           age: 20
        },
        methods: {
            
        }
    })
</script>    
</body>
</html>

其中采用了双向绑定到age属性，意味着我们可以通过表单输入框来改变age的值。

需求是当我们改变年龄时，需要动态判断年龄的值，呈现对应的年龄的文字描述。年轻人，我们需要使用条件判断age<=35,中年人我们需要使用条件判断age>35 && age<60,其他情况是老年人。所以通过v-if指令编写如下代码：

年龄<input type="text" v-model="age">经判定,为:
<span v-if="age <= 35">年轻人(35及以下)</span>
<span v-else-if="age > 35 && age < 60">中年人(35-60)</span>
<span v-else>老年人(60及以上)</span>

v-show和v-if的作用效果是一样的，只是原理不一样。复制上述html代码，修改v-if指令为v-show指令，代码如下：

年龄<input type="text" v-model="age">经判定,为:
<span v-show="age <= 35">年轻人(35及以下)</span>
<span v-show="age > 35 && age < 60">中年人(35-60)</span>
<span v-show="age >= 60">老年人(60及以上)</span>

打开浏览器，展示效果如下所示：

image-20240629182942829

可以发现，浏览器呈现的效果是一样的，但是浏览器中html源码不一样。v-if指令，不满足条件的标签代码直接没了，而v-show指令中，不满足条件的代码依然存在，只是添加了css样式来控制标签不去显示。

完整代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-if与v-show</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        
        年龄<input type="text" v-model="age">经判定,为:
        <span v-if="age <= 35">年轻人(35及以下)</span>
        <span v-else-if="age > 35 && age < 60">中年人(35-60)</span>
        <span v-else>老年人(60及以上)</span>

        <br><br>

        年龄<input type="text" v-model="age">经判定,为:
        <span v-show="age <= 35">年轻人(35及以下)</span>
        <span v-show="age > 35 && age < 60">中年人(35-60)</span>
        <span v-show="age >= 60">老年人(60及以上)</span>

    </div>

<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           age: 20
        },
        methods: {
            
        }
    })
</script>    
</body>
</html>
3.4、 v-for

v-for: 从名字我们就能看出，这个指令是用来遍历的。其语法格式如下：

<标签 v-for="变量名 in 集合模型数据">
    {{变量名}}
</标签>

需要注意的是：需要循环那个标签，v-for 指令就写在那个标签上。

有时我们遍历时需要使用索引，那么v-for指令遍历的语法格式如下：

<标签 v-for="(变量名,索引变量) in 集合模型数据">
    <!--索引变量是从0开始，所以要表示序号的话，需要手动的加1-->
   {{索引变量 + 1}} {{变量名}}
</标签>

接下来，我们再VS Code中创建名为16. Vue-指令-v-for.html的文件编写代码演示，提前准备如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-for</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">

    </div>
    
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           addrs:["北京", "上海", "西安", "成都", "深圳"]
        },
        methods: {
            
        }
    })
</script>    
</body>
</html>

然后分别编写2种遍历语法，来遍历数组，展示数据，代码如下：

 <div id="app">
     <div v-for="addr in addrs">{{addr}}</div>
     <hr>
     <div v-for="(addr,index) in addrs">{{index + 1}} : {{addr}}</div>
</div>

浏览器打开，呈现如下效果：

1668866805981

4、vue生命周期

vue的生命周期：指的是vue对象从创建到销毁的过程。vue的生命周期包含8个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。其完整的生命周期如下图所示：

执行一个生命周期方法，这些生命周期方法也被称为钩子方法。其完整的生命周期如下图所示：

状态阶段周期
beforeCreate创建前
created创建后
beforeMount挂载前
mounted挂载完成
beforeUpdate更新前
updated更新后
beforeDestroy销毁前
destroyed销毁后

下图是 Vue 官网提供的从创建 Vue 到效果 Vue 对象的整个过程及各个阶段对应的钩子函数：

1668867134683

mounted：挂载完成，Vue初始化成功，HTML页面渲染成功

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-for</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">

    </div>

<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           
        },
        methods: {
            
        }
    })
</script>    
</body>
</html>

然后我们编写mounted声明周期的钩子函数，与methods同级，代码如下：

<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           
        },
        methods: {
            
        },
        mounted () {
            alert("vue挂载完成,发送请求到服务端")
        }
    })
</script>

浏览器打开，运行结果如下：我们发现，自动打印了这句话，因为页面加载完成，vue对象创建并且完成了挂在，此时自动触发mounted所绑定的钩子函数，然后自动执行，弹框。

1668867458156

5、前端工程化介绍

我们目前的前端开发中，当我们需要使用一些资源时，例如：vue.js，和axios.js文件，都是直接再工程中导入的，如下图所示：

1669291953746

但是上述开发模式存在如下问题：

  • 每次开发都是从零开始，比较麻烦
  • 多个页面中的组件共用性不好
  • js、图片等资源没有规范化的存储目录，没有统一的标准，不方便维护

所以现在企业开发中更加讲究前端工程化方式的开发，主要包括如下4个特点

  • 模块化：将js和css等，做成一个个可复用模块
  • 组件化：我们将UI组件，css样式，js行为封装成一个个的组件，便于管理
  • 规范化：我们提供一套标准的规范的目录接口和编码规范，所有开发人员遵循这套规范
  • 自动化：项目的构建，测试，部署全部都是自动完成

所以对于前端工程化，说白了，就是在企业级的前端项目开发中，把前端开发所需要的工具、技术、流程、经验进行规范化和标准化。从而提升开发效率，降低开发难度等等。接下来我们就需要学习vue的官方提供的脚手架帮我们完成前端的工程化。

我们的前端工程化是通过vue官方提供的脚手架Vue-cli来完成的，用于快速的生成一个Vue的项目模板。Vue-cli主要提供了如下功能：

  • 统一的目录结构
  • 本地调试
  • 热部署
  • 单元测试
  • 集成打包上线

接下来我们需要通过Vue-cli创建一个vue项目，然后再学习一下vue项目的目录结构。Vue-cli提供了如下2种方式创建vue项目:

  • 命令行：直接通过命令行方式创建vue项目

    vue create vue-project01

  • 图形化界面：通过命令先进入到图形化界面，然后再进行vue工程的创建

    vue ui

    图形化界面如下：

    1669294586147

5.1、创建vue项目

此处我们通过第二种图形化界面方式给大家演示。

首先，我们再桌面创建vue文件夹，然后双击进入文件夹，来到地址目录，输入cmd，然后进入到vue文件夹的cmd窗口界面，如下图所示：

1669294790640

然后进入如下界面：

1669294846601

然后再当前目录下，直接输入命令vue ui进入到vue的图形化界面，如下图所示：

1669294939067

然后我门选择创建按钮，在vue文件夹下创建项目，如下图所示：

1669295020228

然后来到如下界面，进行vue项目的创建

1669301661722

然后预设模板选择手动，如下图所示：

1669301737491

然后再功能页面开启路由功能，如下图所示：

1669301859936

然后再配置页面选择语言版本和语法检查规范，如下图所示：

1669301965095

然后创建项目，进入如下界面：

1669302091090

最后我们只需要等待片刻，即可进入到创建创建成功的界面，如下图所示：

1669302171975

到此，vue项目创建结束

5.2、vue目录结构

我们通过VS Code打开之前创建的vue文件夹，打开之后，呈现如下图所示页面：

1669302718419

vue项目的标准目录结构以及目录对应的解释如下图所示:

image-20240630154557555

5.3、运行vue项目

那么vue项目开发好了，我们应该怎么运行vue项目呢？主要提供了2种方式

  • 第一种方式：通过VS Code提供的图形化界面 ，如下图所示：（注意：NPM脚本窗口默认不显示，可以参考本节的最后调试出来）

    1669303687468

    点击之后，我们等待片刻，即可运行，在终端界面中，我们发现项目是运行在本地服务的8080端口，我们直接通过浏览器打开地址

    1669303846100

    最终浏览器打开后，呈现如下界面，表示项目运行成功

    1669304009602

    其实此时访问的是 src/App.vue这个根组件，此时我们打开这个组件，修改代码：添加内容Vue

    image-20240630154641866

5.4、vue项目开发流程

那么我们访问的首页是index.html，但是我们找到public/index.html文件，打开之后发现，里面没有什么代码，但是能够呈现内容丰富的首页：如下图所示：

1669308098856

我们自习观察发现，index.html的代码很简洁，但是浏览器所呈现的index.html内容却很丰富，代码和内容不匹配，所以vue是如何做到的呢？接下来我们学习一下vue项目的开发流程。

对于vue项目，index.html文件默认是引入了入口函数main.js文件，我们找到src/main.js文件，其代码如下：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

上述代码中，包括如下几个关键点：

  • import: 导入指定文件，并且重新起名。例如上述代码import App from './App.vue'导入当前目录下得App.vue并且起名为App
  • new Vue(): 创建vue对象
  • $mount(‘#app’);将vue对象创建的dom对象挂在到id=app的这个标签区域中，作用和之前学习的vue对象的le属性一致。
  • router: 路由，详细在后面的小节讲解
  • render: 主要使用视图的渲染的。

来到public/index.html中，我们删除div的id=app属性，打开浏览器，发现之前访问的首页一片空白，如下图所示，这样就证明了，我们main.js中通过代码挂在到index.html的id=app的标签区域的。

此时我们知道了vue创建的dom对象挂在到id=app的标签区域，但是我们还是没有解决最开始的问题：首页内容如何呈现的？这就涉及到render中的App了，如下图所示：

1669313364004

那么这个App对象怎么回事呢，我们打开App.vue,注意的是.vue结尾的都是vue组件。而vue的组件文件包含3个部分：

  • template: 模板部分，主要是HTML代码，用来展示页面主体结构的
  • script: js代码区域，主要是通过js代码来控制模板的数据来源和行为的
  • style: css样式部分，主要通过css样式控制模板的页面效果得

如下图所示就是一个vue组件的小案例：

1669313699186

此时我们可以打开App.vue，观察App.vue的代码，其中可以发现，App.vue组件的template部分内容，和我们浏览器访问的首页内容是一致的，如下图所示：

1669313894258

接下来我们可以简化模板部分内容，添加script部分的数据模型，删除css样式，完整代码如下：

<template>
  <div id="app">
    {{message}}
  </div>
</template>

<script>
export default {
  data(){
    return {
      "message":"hello world"
    }
  }
}
</script>
<style>

</style>
6、Vue组件库Element

Element：是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库，用于快速构建网页。

Element 提供了很多组件（组成网页的部件）供我们使用。例如 超链接、按钮、图片、表格等等。如下图所示就是我们开发的页面和ElementUI提供的效果对比：可以发现ElementUI提供的各式各样好看的按钮

1669357961971

ElementUI的学习方式和我们之前的学习方式不太一样，对于ElementUI，作为一个后台开发者，只需要学会如何从ElementUI的官网拷贝组件到我们自己的页面中，并且做一些修改即可。其官网地址：https://element.eleme.cn/#/zh-CN，我们主要学习的是ElementUI中提供的常用组件，掌握到ElementUI的学习技巧，然后自行学习。

6.1、快速入门

首先我们要掌握ElementUI的快速入门

首先，我们先要安装ElementUI的组件库，打开VS Code，停止之前的项目，然后在命令行输入如下命令：

npm install element-ui@2.15.3

具体操作如下图所示：

1669358653297

然后我们需要在main.js这个入口js文件中引入ElementUI的组件库，其代码如下：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

具体操作如图所示：

1669358935188

然后我们需要按照vue项目的开发规范，在src/views目录下创建一个vue组件文件，注意组件名称后缀是.vue，并且在组件文件中编写之前介绍过的基本组件语法，代码如下：

<template>

</template>

<script>
export default {

}
</script>

<style>

</style>

具体操作如图所示：

1669359450896

最后我们只需要去ElementUI的官网，找到组件库，然后找到按钮组件，抄写代码即可，具体操作如下图所示：

1669359839574

然后找到按钮的代码，如下图所示：

1669359904272

紧接着我们复制组件代码到我们的vue组件文件中，操作如下图所示：

1669360120385

最后，我们需要在默认访问的根组件src/App.vue中引入我们自定义的组件，具体操作步骤如下：

1669360320983

然后App.vue组件中的具体代码如下，代码是我们通过上述步骤引入element-view组件时自动生成的。

<template>
  <div id="app">
    <!-- {{message}} -->
    <element-view></element-view>
  </div>
</template>

<script>
import ElementView from './views/Element/ElementView.vue'
export default {
  components: { ElementView },
  data(){
    return {
      "message":"hello world"
    }
  }
}
</script>
<style>

</style>

然后运行我们的vue项目，浏览器直接访问，展示效果如下图所示：

image-20240630154851307

7、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功能，如下图所示：

1669387519004

路由基本信息配置好了，路由表已经被加载，此时我们还缺少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即可
  },
]
8、前端工程打包

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

1669389052906

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

1669389147027

小林学习编程
关注
专栏目录
利用Spring Boot后端与Vue前端技术构建现代化电商平台
Yaml4的博客
04-23 1310
目前现有的网上商城系统对于用户而言其购买商品流程仍然过于繁琐，对于而言其系统安全性并不能保障。同时整套系统所使用的技术相对较为落后，界面不能动态化展示。相比较于其它同类型网站而言不能体现技术先进性。Java是由SUN公司推出，该公司于2010年被oracle公司收购。Java本是印度尼西亚的一个叫做爪洼岛的英文名称，也因此得来java是一杯正冒着热气咖啡的标识。Java语言在移动互联网的大背景下具备了显著的优势和广阔的前景，它是面向对象的，分布式的，动态的，具有平台无关性、安全性、健壮性。
超详细的前后端实战项目（Spring系列加上vue3）前端篇（一）（一步步实现+源码）
2301_79969279的博客
05-23 3443
大家不要一开始写前端就直奔优美的”可跳转“页面，这边先整体规定一个向后端发请求的工具request.js//导入axios//定义前缀//来一个响应拦截器result=>{//如果不为0则表示失败alert(result.data.message||'出现错误')//异步的状态转化成失败的状态},err=>{alert('服务异常');//异步的状态转化成失败的状态。
Spring boot+vue前后端分离
最新发布
2301_76621359的博客
08-17 630
1、前端vue的搭建建立项目的过程略开启一个建立好的vue项目用npm run dev关闭一个vue项目可在终端操作:ctrl+c需要注意的几点1、在建立项目的时候、可以选择路由选项。后续就不需要再次安装路由。2、安装axios npm install --save axios vue-axios前端项目结构样式main.js、这个是整个项目的入口、要使用的在这里引入Vue.js在这里可以定义跳转到其他页面的连接配置的路由在这里配置各个页面跳转的路由组件1组件2。
后端开发学习Vue(一)
bsegebr的博客
03-06 2593
Vue的介绍 官网: https://cn.vuejs.org/ Vue是一个简单容易上手前端框架 例如:下面的代码可以快速构建一个表格: <template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"></el-table-column> <el-
Vue前端工程
Artist_sword的博客
04-01 1123
vue 前端部署 Element Ajax axios
Vue前端工程化
Mia的博客
04-28 351
模块化相关规范 传统开发模式的主要问题 命名冲突 文件依赖 通过模块化解决上述问题 模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块。 模块化开发的好处：方便代码的重用，从而提升开发效率，并且方便后期的维护。 前端模块化规范 AMD,CMD 服务器端模块化规范 大一统的模块化规范-ES6模块化 在ES6模块化规范诞生之前...
vue前端工程的搭建
an760998254的博客
03-28 831
vue前端工程的搭建 一、用vue-cli搭建前端工程 1、什么是vue-cli vue-cli 官方提供的一个脚手架,用于快速生成一个 vue 的项目模板; 2、搭建环境准备 安装node.js 官方网址： http://nodejs.cn/download/ node -v，npm -v 用于检测是否安装成功 安装淘宝镜像加速器： npm install cnpm -g 安装vue-cli cnpm install vue-cli -g #查看是否安装成功 vue list
前端vue-element 登录随机生成数字验证码_element ui 随机验证码(1)
2401_84447297的博客
04-27 300
基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
前端程序员需要了解的Vue知识
qq_45163356的博客
05-07 3977
前言：这一篇旨在教大家快速入门Vue2，每个知识点用案例解释 一：声明式渲染 vue是单页面应用，一个vue应用直接挂载到一个dom元素上，其余的都创建在vue的实例里面 文本插值{{}}，里面可以做字符串拼接，js逻辑运算 <h1>{{ data + 1 }}</h1> <h1>{{ data + '1' }}</h1> <h1>{{ `${data}1` }}</h1> <h1&gt
后端程序员学习vue
郝竹本
09-18 426
vue基本语法学习 一：概述 1. vue是什么？ 2. 基本的指令有哪些？ 3. 指令的修饰符有哪些？ 4. 什么是事件？ 5. 事件修饰符是什么？ 6. 如何自定义指令？ 7. 对象的生命周期是什么？ 8. 局部过滤器和全局过滤器是如何定义的？ 9. 局部组件和全局组件是如何定义的？ 10. 组件是如何值是如何传递的？ 11. 如何调用接口？ 12. 什么是路由？ 13. 开发中如何实现路由？ 14. 什么是模块化？ 15. webpack是什么？ 16. vue单文件组件如何实现？ 17. vue脚手
后端小白程序员的Vue学习笔记
5akura's Blog
06-19 878
文章目录写在前面Vue一、什么是 Vue二、相关技术栈前端后端关于前后端分离三、入门使用3.1、Hello,Vue3.2、Mustache 语法3.3、插值操作3.4、属性绑定 v-bind3.5、条件插值3.5.1、v-if、v-else、v-else-if3.5.2、v-show3.5.3、使用 key 来管理复用元素3.6、列表渲染 v-for3.6.1、遍历数组3.6.2、遍历对象3.6.3、v-for 添加 key3.6.4、数组更新检测3.7、绑定事件 v-on3.7.1、修饰符3.8、MVVM
后端人员学习vue-饿了么
08-01
第三篇-后端人员学习vue(项目实战) 教程地址：https://blog.csdn.net/m0_37499059/article/details/81328836
vue前端项目架构（vue）
03-29
此项目集成了vue，vue-cli，axios（进行了二次封装），element-ui，router
nice-router-taro:nice-router 第0适合后端程序员的前端小程序开发框架
05-02
第0适合后端程序员的前端小程序开发框架 nice-router 是一个前端低代码框架(低码)，可以使用JSON数据驱动页面渲染，可以极大节省页面开发工作量，极大提升开发前端界面的效率。(可手动定制页面) 多端统一开发体验 + ...
程序员求职-Vue面试题汇总.zip
07-04
Vue.js 是一款流行的...以上内容是Vue面试中常见的知识领域，深入理解和掌握这些知识点对于程序员求职至关重要。在实际面试中，根据具体职位需求，面试官还可能考察Vue的最佳实践、性能优化、错误排查等方面的能力。
前端到底怎么调用后端服务的？什么是Vue？怎么调用C#写的后端！
Read by heart
08-13 7143
前言 前端的概念很广，可以直观上理解为直接呈现给用户的网页部分，前端的实现涉及多种编程技术或语言，如HTML、CSS、JavaScript、Vue.js、ajax等，它们只需要一个浏览器即可运行。但是有时候前端网页需要的某些功能不好直接在前台（浏览器）中实现，这时候需要借助某种后端编程语言如Java、Python、PHP、C#等，可以在本地服务器上编写代码实现该功能，然后作为一种服务提交给前端进行调用。那么问题来了，前端究竟是怎么调用后端服务的呢？和我一起来一探究竟吧！ 正文 1. 工具准...
无论前端还是后端，程序员都应该要懂一点GIS知识
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
05-24 276
GIS 是地理信息系统的简称。ESRI 对GIS的解释：地理信息系统 (GIS) 是一个创建、管理、分析和绘制所有类型数据的系统。GIS 将数据连接到地图，将位置数据（事物所在位置）与所有类型的描述性信息（事物在该位置的情况）集成到一起。这可以为适用于自然科学和几乎所有行业的制图和分析提供基础。GIS 帮助用户了解模式、关系和地理环境。其优势包括改善沟通、提高效率以及更好地管理和决策。在科技飞速发展的今天，我们几乎每天都在跟位置信息打交道。
Vue
小陈学java
07-23 2001
前端体系，前后端分离 1、概述 Vue (读音/vju/, 类似于view)是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库(如: vue-router: 跳转，vue-resource: 通信，vuex:管理)或既有项目整合。 2、前端知识体系 想要成为真正的“互联网Java全栈工程师”还有很长的一段路要走，其中“我大前端”是绕不开的一门必修课。本阶段课程的主要目的就是带领我.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小林学习编程

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值