前端实验(一)单页面应用的创建

实验目的

  • 掌握使用vite创建vue3单页面程序命令
  • 熟悉所创建程序的组织结构
  • 熟悉单页面程序运行原理
  • 能够编写简单的单页面程序

实验内容

  • 创建一个名为vue-demo的单页面程序
  • 编写简单的单页面程序页面
  • 运行单页面程序

实验步骤

  1. 使用vite创建单页面程序
    创建项目名为目录vue-demo的目录(注意:项目的路径名不要出现中文),以管理身份打开命令命令行窗口。
    在命令行窗口,执行创建命令:npm init vite@latest,按照提示输入项目名称、选择vue和脚本语言,出现下图界面代表项目创建成功。
    在这里插入图片描述
    在命令行窗口,执行cd 项目名称,npm install 和npm run dev 运行程序,就可以看到vite创建的工程项目运行如下图所示。
    在这里插入图片描述

  2. 分析项目结构
    进入工程目录后,vite自动生成项目的结构及说明如下图所示。
    在这里插入图片描述
    其中,src目录用于存放源代码,是开发人员主要工作目录。
    在src目录中有assets、components两个文件夹,assets目录用于存放全局使用的样式、图片等文件,如:logo、js,css,img,fonts等;components目录用于存放全局使用的组件。
    在src目录中还包括app.vue和main.js两个文件。其中app.vue是项目的根组件,相当于网站的首页,该组件的实例将挂载到index.html页面中,在根组件中使用路由完成页面的展示与跳转,其代码结构如下所示

<template>  <div id="app">  <img src="./assets/logo.png">  <router-view />  </div>  
</template>  <script>  export default {  name: 'App'  }  
</script>

代码中1-6行是使用模板标签和vue模板语言完成的视图文件,第4行是前端路由标签;8-12行是JavaScript代码块,默认导出根组件app对象。
Main.js文件是应用入口函数,类似c语言的main函数,主要任务是引入全局使用的插件、组件、模块库、样式等,将根组件挂载到页面的某一个dom结点上。在项目启动时,首先加载此文件,创建根组件实例,其代码如下所示。

//引入组件或js插件或文件
import { createApp } from 'vue'    //引入createApp函数,用于创建vue实例
import App from './App'    //引入根结点组件,定义其名称为“App”
import router from './router'  //引入路由
import { createPinia } from 'pinia'  //引入状态管理组件函数const app = createApp(App)  //创建vue实例/* app.use(组件)语句,在此定义后,可以在这个vue项目任意地方使用该组件*/
app.use(router)
app.use(createPinia())
app.mount('#app')

在index.html中有一个id为app的div元素,这个div就是vue根组件的挂载点。一般情况下,除在这里修改页面的标题外,很少在这里面编写代码。

  1. 编写简单的单页面应用程序
    在新建的项目中,编写一个vue的欢迎页面。打开app.vue文件,在此文件中编写欢迎信息,示例代码如下所示。
<template>   //模板语言<div id="app">  <h1>{{msg}}</h1>  </div>  
</template>  <script>  export default {  name: 'helloWorld',  data() {  return {     //vue组件中的数据msg: '欢迎学习vue单页面开发'  }  }  }  
</script>  <style scoped="scoped">   //定义该组件的样式#app {  font-family: 'Avenir', Helvetica, Arial, sans-serif;  -Webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;  text-align: center;  color: #2c3e50;  margin-top: 60px;  }  
</style>  

代码中第1-5行是视图层代码,展示人机交互界面,第3行使用模板语言将data中的数据渲染到模板中;第7-16行是视图模型层部分,处理相关业务逻辑。第18-27行是样式部分内容。输入命令:npm run dev运行程序,运行结果如下图所示。
在这里插入图片描述

  1. 程序进阶
    通常app.vue是单页面程序中的根组件,职责是与外壳页面建立联系和页面导航,不承担具体的业务功能,业务功能通常写在子组件中。编写一个名为HelloWorld的组件,它是App.vue的子组件,根据输入的姓名,展示“欢迎学习vue,winkle”,代码如下所示
<template>  <div>  <h1>{{ msg }},{{userName.toUpperCase()}}!</h1>  <label>姓名:<input type="text" v-model="userName" placeholder="请输入用户姓名" /></label>  </div>  
</template>  <script>  
export default {  name: 'HelloWorld',  data () {  return {  msg: '欢迎学习Vue',  userName: 'winkle'  }  }  
}  
</script>  <style scoped>  h1{  font-weight: normal;  }  
</style>

修改app.vue文件中模板文件,引入组件HelloWorld,代码如下所示。

<template>  <div id="app">  <hello-world></hello-world>  </div>  
</template>     
<script>
import HelloWorld from '@/view/helloWorld'   export default {  name: 'App',components: {  HelloWorld: HelloWorld  } 
}
</script>

打开命令行窗口,进入项目所在的目录,输入npm run dev,进入编译状态,编译完成后显示应用输出地址,如图6-8所示:
在这里插入图片描述
复制终端输出的路径在浏览器打开,即可查看运行的Web程序。运行结果如下图所示
在这里插入图片描述
Vue是通过构造vue实例方式渲染成浏览器可识别html页面,渲染方式还是使用视图模板引擎,其工作原理与在网页中使用vue工作原理是相同的。
单页面应用入口处使用接口函数createApp(app)创建vue的实例对象,函数中参数app就是项目的根组件,其他vue文件均作为该根组件的子组件,通过模块引入使用完成调用,最终形成一棵组件树。
每个组件可以看成一个页面片段,运行在外壳页面内部,所谓的页面跳转实际是页面片段跳转,是把一个页面片段删除或者隐藏,加载另一个页面片段并显示出来。这是片段之间的模拟跳转,并没有离开壳页面。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/177609.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于nodejs+vue啄木鸟便民维修网站设计与实现

目 录 摘 要 I ABSTRACT II 目 录 II 第1章 绪论 1 1.1背景及意义 1 1.2 国内外研究概况 1 1.3 研究的内容 1 第2章 相关技术 3 2.1 nodejs简介 4 2.2 express框架介绍 6 2.4 MySQL数据库 4 第3章 系统分析 5 3.1 需求分析 5 3.2 系统可行性分析 5 3.2.1技术可行性&#xff1a;…

Spring-创建非懒加载的单例Bean源码

补充&#xff1a;关于扫描的逻辑 /*** Scan the class path for candidate components.* param basePackage the package to check for annotated classes* return a corresponding Set of autodetected bean definitions*/ public Set<BeanDefinition> findCandidateCo…

HarmonyOS(二)—— 初识ArkTS开发语言(中)之ArkTS的由来和演进

前言 在上一篇文章HarmonyOS&#xff08;二&#xff09;—— 初识ArkTS开发语言&#xff08;上&#xff09;之TypeScript入门&#xff0c;我初识了TypeScript相关知识点&#xff0c;也知道ArkTS是华为基于TypeScript发展演化而来。 从最初的基础的逻辑交互能力&#xff0c;到…

SSE(SeverSideEvent)服务端推送技术

SSE应用场景1&#xff1a; ChatGPT的打字效果&#xff1a; 可以看到ChatGPT的输出是逐字输出的打字效果&#xff0c;这里应用到了SSE&#xff08;SeverSideEvent&#xff09;服务端推送的技术。一个SSE服务的Chrome开发工具化network截图 &#xff1a; SSE原理 HTTP 服务器…

java反射API

反射 什么是Java的动态机制什么是反射机制什么是Class类Class提供了诸多的get方法 反射机制实例化对象Class提供了一个方法 Constructor类指定构造器实例化对象 Method类获取一个类中的所有方法Class类提供了对应的方法 获取本类自定义的所有方法Class类提供了对应的方法 获取表…

RabbitMQ 运维 扩展

1、集群管理与配置 1.1、集群搭建 关于Rabbitmq 集群的搭建&#xff0c;详见以下文章。简单说来就是将多个单机rabbitmq服务&#xff0c;通过给到一致的密钥&#xff08;.erlang.cookie&#xff09;并且开放rabbitmq服务的 25672 端口&#xff0c;允许多节点间进行互相通讯&am…

基于单片机设计的太阳能跟踪器

一、前言 随着对可再生能源的需求不断增长&#xff0c;太阳能作为一种清洁、可持续的能源形式&#xff0c;受到越来越多的关注和应用。太阳能光板通常固定在一个固定的角度上&#xff0c;这限制了它们对太阳光的接收效率。为了充分利用太阳能资源&#xff0c;提高太阳能光板的…

【ChatGPT从瀑布模式到水母模式】如何赋能软件研发全流程?

【文末送书】今天推荐一本强大工具书《ChatGPT 驱动软件开发&#xff1a;AI 在软件研发全流程中的革新与实践》&#xff0c;本文将从其亮点与结构出发&#xff0c;详细阐发其对于运维、项目经理、程序员等的重要性与益处。 文章目录 导语内容作者简介专家推荐读者对象直播预告文…

怎样解决“缺失msvcp110.dll”错误,msvcp110.dll的修复教程

在计算机使用过程中&#xff0c;我们可能会遇到一些系统错误提示&#xff0c;比如“msvcp110.dll文件丢失”。这是因为msvcp110.dll是Microsoft Visual C 2012的一个动态链接库文件&#xff0c;如果这个文件丢失或者损坏&#xff0c;就可能导致某些程序无法正常运行。那么&…

(四)docker:为mysql和java jar运行环境创建同一网络,容器互联

看了很多资料&#xff0c;说做互联的一个原因是容器内ip不固定&#xff0c;关掉重启后如果有别的容器启动&#xff0c;之前的ip会被占用&#xff0c;所以做互联创建一个网络&#xff0c;让几个容器处于同一个网络&#xff0c;就可以互联还不受关闭再启动ip会改变的影响&#xf…

C++标准模板(STL)- 类型支持 (类型属性,is_volatile,is_trivial,is_const)

类型特性 类型特性定义一个编译时基于模板的结构&#xff0c;以查询或修改类型的属性。 试图特化定义于 <type_traits> 头文件的模板导致未定义行为&#xff0c;除了 std::common_type 可依照其所描述特化。 定义于<type_traits>头文件的模板可以用不完整类型实例…

0基础学习PyFlink——个数滚动窗口(Tumbling Count Windows)

大纲 Tumbling Count WindowsmapreduceWindow Size为2Window Size为3Window Size为4Window Size为5Window Size为6 完整代码参考资料 之前的案例中&#xff0c;我们的Source都是确定内容的数据。而Flink是可以处理流式&#xff08;Streaming&#xff09;数据的&#xff0c;就是…

零信任网络:一种全新的网络安全架构

随着网络技术的不断发展&#xff0c;网络安全问题日益凸显。传统的网络安全策略往往基于信任和验证&#xff0c;但这种信任策略存在一定的局限性。为了解决这一问题&#xff0c;零信任网络作为一种全新的网络安全架构&#xff0c;逐渐受到人们的关注。本文将对零信任网络的概念…

qt 系列(二)---qt designer通过设置控件样式表进行背景颜色设置

1. 前言 一般Layouts不可以进行改变样式表&#xff0c;当我们想修改背景样式表&#xff0c;同时又不改变其他控件的颜色时&#xff0c;可以选择List View 控件改变背景颜色。 2. 设置背景 &#xff08;1&#xff09;配置 .qrc 文件 新建mypicture.qrc文件&#xff0c;记事本打…

虚拟机部署与发布J2EE项目(Linux版本)

&#x1f3ac; 艳艳耶✌️&#xff1a;个人主页 &#x1f525; 个人专栏 &#xff1a;《Spring与Mybatis集成整合》《Vue.js使用》 ⛺️ 越努力 &#xff0c;越幸运。 1.jdk安装配置 打开虚拟机 Centos 登入账号&#xff0c;并且使用MobaXterm进行连接 1.1. 传入资源 连接…

Linux启动故障排错

Linux启动过程 开机流程、模块管理-CSDN博客 Grub三个阶段 1st stage&#xff1a;执行Grub主程序。Grub安装在MBR。由于MBR太小&#xff0c;所以与配置文件分开放1.5 stage&#xff1a;识别不同的文件系统2nd stage&#xff1a;加载Grub配置文件 /boot/grub2/grub.cfg。配置…

RISC-V IDE MRS无感远程协助模块详解

RISC-V IDE MRS无感远程协助模块详解 一、说明 1.1 概述 针对RISC-V/ARM等内核MCU的嵌入式集成开发环境MRS(MounRiver Studio)从V1.90版本开始内置无感远程协助模块&#xff08;Sensorless Remote Assistant Module&#xff0c;以下简称SRA模块&#xff09;。SRA模块是一款支…

《研发效能(DevOps)工程师》课程简介(一)丨IDCF

为贯彻落实《关于深化人才发展体制机制改革的意见》&#xff0c;推动实施人才强国战略&#xff0c;促进专业技术人员提升职业素养、补充新知识新技能&#xff0c;实现人力资源深度开发&#xff0c;推动经济社会全面发展&#xff0c;根据《中华人民共和国劳动法》有关规定&#…

AI技术发展:防范AI诈骗,守护数字安全

随着AI技术的迅猛发展&#xff0c;人工智能赋予了计算机更多的能力&#xff0c;包括自然语言处理、图像生成、声音合成等。这些领域的突破为人们提供了全新的体验和便捷&#xff0c;但同时也催生了一些潜在的安全风险&#xff0c;其中最突出的就是AI诈骗。本文将探讨如何防范AI…

入栏需看——管理类联考——英语——知识+记忆篇——导航页

文章目录 Section I Use of English——完型填空Section II Reading ComprehensionPart A——阅读理解 A 节&#xff08;Part A&#xff09;&#xff08;四篇&#xff09;Part B——阅读理解 B 节&#xff08;Part B&#xff09;&#xff08;只有一篇&#xff09;Part C——翻译…