前端项目框架开发过程

已于 2022-11-13 09:11:14 修改
阅读量277 收藏 2
点赞数
分类专栏： 前端 文章标签： 前端框架
于 2022-11-13 09:03:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Joyechen1/article/details/127828120
版权
本文详细介绍了前端项目开发的步骤，从入口文件main.js开始，设置路由在index.js，然后根据路由跳转到对应的vue页面。在vue页面中引入api目录下的js文件，调用接口实现功能。api文件定义接口地址和参数，帮助页面获取后端数据。整个流程清晰地展示了前端开发的常规实践。
摘要由CSDN通过智能技术生成

前端项目框架开发过程

1. 前端入口main.js

main.js文件中的import router from ‘./router’ 会去到router/index文件下寻找路由

在这里插入图片描述
在这里插入图片描述

2. router路由入口index.js

对应关系：index.js中的meta:title 就是菜单栏名称
在这里插入图片描述

3. 路由到对应的页面

component: () => import(‘@/views/table/index’),中设置路由到views/table/index.vue页面

  • 此处省略了.vue后缀名
  • @可以理解成src目录

在这里插入图片描述
在这里插入图片描述

4. 在创建的vue页面引入js文件，调用方法实现功能

根据views中vue页面的import { getList } from '@/api/table’去api目录创建js文件，定义接口地址和参数。去让api目录下的js帮助vue页面从后端获取数据。

在这里插入图片描述

5. api目录下创建js文件，定义接口地址和参数

api/table.js定义接口地址和参数，帮助vue页面从后端获取数据
在这里插入图片描述

总结

  • 先写路由
  • 再写页面
  • 页面调用方法做显示
  • 最后定义方法从后端获取数据
一兴一熠
关注
专栏目录
前端Web框架的实现过程
weixin_42625143的博客
07-27 243
阅读目录 一、Web框架的本质： 我们可以这样理解：所有的Web应用本质上就是一个socket服务端，而用户的浏览器就是一个socket客户端。 这样我们就可以自己实现Web框架了。 半成品自定义web框架 -------------------------------------------------------------------- 注：如果你对python感兴趣，我这有个学习Py...
初学者学习前端开发的方法
IT与开发人员的地盘
05-25 241
很高兴知道您正在寻找最有趣和最严格的职业之一。 前端开发充满创造力和色彩。 许多框架和技术可用于前端开发。 选择理想的选择可能非常困难。 学习前端开发比其他有趣的事情容易。 许多技术可用于在线学习前端开发。 但是，您可以通过追求未来的需求技能来最大限度地提高市场销售能力！ 技能专长 科技中的一切都始于技能。 交互网页需要一些设计技巧。 许多人知道如何设计前端，但由于他们无与伦比的技能设置，有...
WEB前端开发流程总结
weixin_30364325的博客
01-12 462
作者声明：本博客中所写的文章，都是博主自学过程的笔记，参考了很多的学习资料，学习资料和笔记会注明出处，所有的内容都以交流学习为主。有不正确的地方，欢迎批评指正 WEB前端开发项目流程总结 1.新建项目文件夹 　　 　　文件夹结构要有层次，一般包括 　　src:用于存放源代码。 　　　　css:存放css代码　 　　　　　　index.css:用于存放设置主页的scss ...
我是如何开发了一个前端库 or 框架？
主要领域：前端开发
02-13 983
前端发展速度已经远远超出了我们的预计范围，前端基于 JS 的框架/库更是层出不穷。那么框架与库有什么区别呢？我又是如何开发了一个前端库/框架？
java——easyUI前端框架入门&如何自己去开发一个前端框架？（提供思路）
men_ma的博客
06-20 639
转载请标明出处：https://blog.csdn.net/men_ma/article/details/106847165. 本文出自 不怕报错 就怕不报错的小猿猿 的博客 easyUI前端框架入门比较流行的三种前端ui框架我们为什么要学习easyUI三级目录 比较流行的三种前端ui框架 我们为什么要学习easyUI 分析角度(层面) easyUI layui框架 bootstrap框架 金钱方面 不要钱 不要钱 要钱（首先会被排除） 界面效果 easyUI比bootst.
前端开发Pandora前端开发框架
06-05
这些工具能够帮助开发者在开发过程中及时发现和解决问题，提高开发效率。例如，Pandora Box是其内置的调试面板，可以实时展示应用的运行状态，帮助开发者定位问题。 ### 3. 插件体系 Pandora的插件体系是其核心...
WEB前端开发框架.zip
最新发布
06-20
【描述】"WEB前端开发框架.zipWEB前端开发框架.zipWEB前端开发框架.zipWEB前端开发框架.zip" 重复的描述可能意味着重点在于强调这是一个关于前端框架的资源包，它可能包含了框架的核心组件、示例项目、文档和配置...
前端开发框架介绍.pdf
05-28
这些框架通过提供可重用的组件、工具和设计模式，使得开发人员能够在开发过程中减少重复工作，快速搭建界面，并提供统一的代码结构。 ### 主流前端开发框架介绍 #### Bootstrap - **基本概念**：Bootstrap 是一个...
后台UI用H-ui前端框架开发的轻量级网站后台模版
01-03
在实际开发过程中，开发者可以根据项目需求对H-ui.admin_v3.1.3.1进行个性化定制，例如调整布局以适应移动设备，或者引入第三方插件来扩展功能。同时，要注意保持代码的整洁，遵循模块化原则，以便于后期维护。 4....
高阶前端框架开发(学习笔记)
jjsnc
06-04 523
高阶函数 function Vue(state) { // 用 Vue.js 编写前端页面 } function React(state) { // 用 React.js 编写前端页面 } function frontend(state, method) { // 框架无关的方法和思想 } frontEnd(data, Vue); frontEnd(data, React)...
如何编写一个前端框架之一－项目结构（译）
weixin_34008784的博客
04-16 829
本系列一共七章，Github 地址请查阅这里。原文地址请查阅这里。 虽然有一些通用的项目结构指南，但是没有适合所有项目的结构。有兴趣的童鞋可以看看来自Node Hero系列的 Nodejs 项目结构指南。 NX JavaScript 框架概览 NX 旨在成为一个开源社区驱动的工程，易于扩展和可伸缩性强。 它拥有现代客户端框架所期望的所有功能。 除了垫片，它没有外部依赖项。 它总共有将近 3000...
前端项目架构怎么搭
Java__EE小白成长之路
06-13 1452
​ 框架的选型需要考虑很多因素，如该技术能否可以满足业务需求、浏览器支持情况、框架自身是否成熟、团队成员对该技术（或框架）的掌握情况，是否有人可以全局把控、学习成本是否可以接受、该技术（框架）本身的稳定性，它的社区、维护者等；那这里强调的基础组件，一类是对这些UI控件的二次封装，比如下拉框、多选框等，第二类是公用的组件，比如头部、尾部、加载状态、为空状态等，这些在架构的过程中可以提前考虑下。​ 完善的MV*框架，包含模板，数据双向绑定，路由，模块化，服务，过滤器，依赖注入等所有功能。
掌握前端框架，打造高效的开发流程
Sun_blog
06-28 640
前端框架是一套提供了基础结构和功能的代码库，可以帮助开发者快速构建网页或应用程序。它们通常包含了一些常用的组件、样式和工具，可以大大减少开发者的工作量，提高开发效率。在src目录下创建一个data.js文件，定义任务的数据结构。id : 1 , title : '完成前端框架博客' , completed : false } , {id : 2 , title : '学习Vue.js' , completed : true } , {
每个前端开发者都可以开发一个属于自己的库或框架「Strve.js生态初步建成」
主要领域：前端开发
12-22 1769
前言 从3个月之前，就想自己开发一个库，从而提高一下自己的能力。庆幸的是在年前就开发出来了，并且生态也初步建成。这里提到的生态包括：Create Strve App、Strve Router以及其他辅助Strve.js开发的工具。 说实话，这段时间是挺难熬的，这也算是今年给自己一个礼物吧！ 我开发Strve.js的初衷是之前接触过JSX语法，一直觉的JSX语法非常酷，可以在JS中写HTML标签，于是就想开发一款类似JSX语法的库。刚开始也开发了一段时间，搭配Babel可以简单实现JSX语法。但是到后来觉得并
项目实训（一）前端框架的搭建
m0_46268374的博客
05-22 3150
一、搭建前端框架 首先选定使用的前端框架为Vue，先通过组件和导航路由确定了网页界面的大致框架 二、设计简单的页面 三、导入js和css样式框架，修改样式
前端工程化之：webpack1-7(入口和出口)
m0_60189088的博客
01-29 1421
出口：这里的出口是针对资源列表的文件名或路径的配置。出口通过 output 进行配置。 入口：入口真正配置的是 chunk。入口通过 entry 进行配置。
Vue前端框架的使用
wk3510的博客
09-19 1933
Vue的使用---什么是Vue? 如何使用Vue el挂载点 date属性 本地应用 v-text和v-html v-on v-show v-if v-bind v-for v-on补充 v-model
手把手教你写一个简易的微前端框架
分享我的编程经验和学习心得
02-27 1305
手把手教你写一个简易的微前端框架
前端项目框架的搭建（Vue.js+ElementUI骨灰级保姆教程）
m0_62565675的博客
12-04 5477
Vue.js+ElementUI(保姆教程)
前端框架开发技术项目
06-20
前端框架开发技术项目通常涉及使用现代JavaScript库或框架来构建用户界面和交互体验丰富的Web应用。这些项目可能包括： 1. 使用React.js：React是一个由Facebook开发的库，用于构建可复用的组件，常用于构建大型...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值