自己做的网站无法访问,证券官网首页,资源网站都是在哪找的,网站建设与管理模拟试卷一1. 前端开发引入
1.1 前端开发前置知识
通过之前的学习#xff0c;已经通过 SpringBoot 和一些三方技术完成了大事件项目的后端开发。接下来开始学习大事件项目的前端开发#xff0c;前端部分借助两个框架实现#xff1a;
Vue3#xff08;一个 JS 框架#xff09;基于 …1. 前端开发引入
1.1 前端开发前置知识
通过之前的学习已经通过 SpringBoot 和一些三方技术完成了大事件项目的后端开发。接下来开始学习大事件项目的前端开发前端部分借助两个框架实现
Vue3一个 JS 框架基于 Vue3 实现的页面组件库 Element-Plus
回忆 HTML、CSS、JS
HTML负责网页的结构标签: form/table/a/div/spanCSS负责网页的表现样式: color/font/background/width/heightJavaScript负责网页的行为交互效果
1.2 JS 导入导出机制
为了更好地学习 Vue3 相关知识点补充 JS 中一个有关模块化的知识点——导入导出。
使用 script 标签导入 JS 文件时会将 JS 文件中的全部内容都导入进来这样就会造成性能上的损失。 而 JS 提供的导入导出机制可以实现按需导入即需要什么就导入什么无需导入 JS 文件中的全部内容。下面介绍从 JS 中导入内容的三种方式
方式1
JS 文件中在定义函数的地方用 export 关键字完成导出HTML 文件中在 script 标签内用 import 关键字完成导入格式import {需要导入的内容} from JS文件的位置注意 script 标签的 type 属性值必须是 module 在 VSCode 中右键➡Open with Live Server 可以看到浏览器中的按钮点击后控制台输出文字 方式 2
方式 1 演示了 JS 导入导出最基本的使用这种方式在 JS 文件中的函数过多时就不太适用了需要在每个函数前面添加 export。因此JS 提供了批量导出的方式来简化在 JS 文件中通过 export 关键字来批量导出export{要导出的所有内容}JS 文件中的内容无需改动。 导入或导出时可以给函数起别名
从 JS 中导入函数后给函数起别名 从 JS 中导出函数时给函数起别名 方式 3
如果 JS 文件中导出的内容很多我们在 HTML 中将所需内容导入时是记不住名字的。为了解决该问题JS 还提出了默认导出的方式。要完成默认导出只需在导出时的 {} 前面加 default 关键字。有了默认导出如果在 HTML 中需要导入这种默认导出的内容就不需要写 {} 了而是给导出的内容随便起个名字如 messageMethods它就代表了 JS中所有的默认导出内容。接下来就可以利用 messageMethods. 来调用默认导出的函数 2. Vue 简介
Vue 是一款用于构建用户界面的渐进式的 JavaScript 框架。官方https://cn.vuejs.org/
举个例子购物网站上会展示各种各样的数据这些数据都不是写死的需要访问后台接口去获取这些数据假如我们现在通过 ajax 异步请求拿到了这些数据那这些数据如何才能展示到页面上呢此时就可以用 Vue 来处理。
Vue 提供了非常便捷的方式可以根据数据来渲染页面 Vue 提供的功能非常丰富官方提供的 Vue 核心包中包含了“声明式渲染”和“组件系统”两大功能基于这个核心包又以插件的形式提供了“客户端路由”、“状态管理”等功能当然还提供了专门构建 Vue 工程的构建工具。Vue 提供了这么多功能我们在开发时都要使用吗显然不是。我们可以只使用核心包提供的功能对项目进行局部改造也就是说我们的项目中只有部分功能使用 Vue。当然也可以整个工程全部使用 Vue 提供的功能不仅使用核心包提供的功能同时使用它的各种插件功能进行工程化开发。正是因为 Vue 既可以进行局部改造也可以进行整站开发所以被称为“渐进式框架”。
【附】 Vue 环境搭建https://blog.csdn.net/weixin_69553582/article/details/129584587
3. VSCode 使用
新建文件 在文件中写 html会有提示 选 html:5能够自动生成如下 html 标签
