vue3前端项目笔记_01_概述

最新推荐文章于 2025-12-17 21:27:18 发布
原创 最新推荐文章于 2025-12-17 21:27:18 发布 · 277 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #笔记 #vue.js

本文详述了一个使用Vue3、TypeScript和相关生态技术构建的前端项目，包括遵循企业级编码规范，搭建后台管理系统，实现菜单和按钮的权限控制，设计数据大屏，应用SVG矢量图，以及添加主题颜色切换和暗黑模式功能。技术栈涉及Vite、vue-router、Pinia、element-plus、Axios和Echarts。

vue3项目+TypeScript前端项目

收获

1.企业级的编码规范
2.从零开始，封装后台管理系统
3.菜单权限与按钮权限
4.数据大屏
5.svg矢量图在项目中的应用
6.主题颜色切换与暗黑模式的切换

技术选型

Vue3 + 组合式API
Vite 构建工具
TypeScript
vue-router
Pinia 状态管理
element-plus
Axios 网络交互
Echarts
在这里插入图片描述

Vue3笔记_01setup与常用的Composition API(组合式API)
qq_43260366的博客
11-27 1309
传送门组件中所用到的：数据、方法，均要配置在setup中(不需要在data、methods中进行配置了)setup() {// [1]定义数据(原来在data中,现在在setup中配置) let 变量名 = 值 // [2]声明方法(原来在methods中声明，现在在setup中声明) 方法名 function() {//... } ... // 返回值 return ... }setup函数有两种返回值：若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用（重点关注！）
尚硅谷Vue3入门到实战vue3+TypeScript笔记（自主复习）
IIIIIAN
05-28 1244
修改名字
尚硅谷vue3学习笔记
2302_77862232的博客
01-07 3115
setup`是`Vue3`中一个新的配置项，值是一个函数，它是 `Composition API` ，组件中所用到的：数据、方法、计算属性、监视......等等，均配置在`setup`中。特点如下：- `setup`函数返回的对象中的内容，可直接在模板中使用。- `setup`中访问`this`是`undefined`。- `setup`函数会在`beforeCreate`之前调用，它是“领先”所有钩子执行的。姓名：{{ name }}
vue_shop项目笔记
doudou76的博客
02-12 935
Vue全家桶-项目实战 文章目录Vue全家桶-项目实战1.项目概述1.1 电商项目基本业务概述1.2 电商后台管理系统的功能1.3电商后台管理系统的开发模式(前后端分离)1.4电商后台管理系统的技术选型2.项目初始化2.1 前端项目初始化步骤2.2 后台项目的环境安装配置3. 登录/退出功能3.1 登录概述3.2 登录 — token 原理分析3.3 登录功能实现1. 登录页面的布局2.实现登录功...
【Web应用】Vue 项目前端项目文件夹和文件介绍
杰西笔记
05-13 1586
本文由JosieBook撰写，详细介绍了Vue项目中的文件夹和文件结构及其作用。文章首先概述了项目中的主要文件夹，如.idea（IDE配置）、bin（可执行文件）、build（构建工具生成的文件）、node_modules（项目依赖）、public（静态资源）和src（源代码）。接着，文章解释了关键文件的作用，如.editorconfig（代码风格配置）、.env系列文件（环境变量配置）、.eslintignore（ESLint忽略规则）和.eslintrc.js（ESLint规则配置）。通过这些介绍，读者
Vue3学习笔记01：使用NPM方法安装Vue3
热门推荐
howard2005的专栏
04-16 1万+
本次实战完成了基于Vue.js的前端项目搭建。首先，为解决国内网络环境问题，配置了淘宝NPM镜像（cnpm）以提升依赖下载速度。随后，使用cnpm安装Vue CLI并初始化创建Vue项目，完成项目依赖安装与开发服务器启动，成功在浏览器中访问应用。此外，还尝试了现代构建工具Vite，通过npm init vite-app快速搭建Vue3项目，体验了其极速启动和高效热更新的开发优势。整个过程涵盖了环境优化、项目初始化、依赖管理与服务运行，掌握了两种主流的Vue项目搭建方式，为后续前端开发奠定了实践基础。
Vue 3 学习笔记
qq_46735055的博客
05-23 3780
禹神最新Vue3教程学习笔记
前端Vue笔记
2301_79756105的博客
08-07 757
- 看官网快速入门教程 -->1.引入文件2.echarts.init（）初始化echart实例3.setOption（）设置配置项（在官网示例中找到饼图，复制配置项对象代码到setOption()的（）里）4.数据处理看“快速上手”-数据处理-动态的异步数据教程即在axios获取数据以后，再重新调用mycharts.setOption()my-tag标签组件封装、my-table表格组件封装原理：hash路由底层是基于a标签 锚链接跳转实现的。
前端进阶_狂神Vue笔记_前端核心分析_前端发展史_前后分离的演变史
yigerendegeming的博客
10-09 578
Vue笔记 想要成为真正的“互联网Java全栈工程师”还有很长的一段路要走，其中前端是绕不开的一门必修课。本阶段课程的主要目的就是带领Java后台程序员认识前端、了解前端、掌握前端，为实现成为“互联网Java全栈工程师”再向前迈进一步。 一、前端核心分析 1.1、概述 Soc原则：关注点分离原则 Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。 HTML + CSS + JS : 视图 ： 给用户看，刷新后台给的数据 网络通信 ： axios 页面跳转 ： vue-router 状态管理：vue
黑马苍穹外卖项目笔记01_项目概述、环境搭建
m0_71484388的博客
10-26 1918
需求分析→设计→编码→测试→上线运维项目经理：对整个项目负责，任务分配、把控进度产品经理：进行需求调研，输出需求调研文档、产品原型等UI设计师：根据产品原型输出界面效果图架构师：项目整体架构设计、技术选型等开发工程师：代码实现测试工程师：编写测试用例，输出测试报告运维工程师：软件环境搭建、项目上线开发环境(development)：开发人员在开发阶段使用的环境，一般外部用户无法访问测试环境(testing)：专门给测试人员使用的环境，用于测试项目，一般外部用户无法访问生产环境(production)：即线上
vue3快速上手笔记(尚硅谷)
weixin_41844140的博客
05-29 1781
修改名字
尚硅谷_Vue全家桶_基于VUE_vue；尚硅谷_vue_
10-04
【Vue.js概述】 Vue.js，简称Vue，是一个用于构建用户界面的渐进式框架，它在JavaScript社区中广受欢迎，因为它既易于上手，又能处理复杂的前端应用。Vue的核心库专注于视图层，易于与其他库或已有的项目集成。它的...
前端基础篇-前端工程化 Vue 项目开发流程（环境准备、Element 组件库、Vue 路由、项目打包部署）_vue element 开发(1)
2401_84411557的博客
05-01 610
Element 是饿了么团队研发的，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。组成：组成网页的部件，例如 超链接、按钮、图片、表格、表单、分页条等等。组件 | Element基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。
商城后台管理系统 02 添加规格参数-动态表单
weixin_52943021的博客
12-15 260
Boolean。
商城后台管理系统 03 规格参数配置
weixin_52943021的博客
12-15 206
【代码】商城后台管理系统 03 规格参数配置。
Harmony OS Web 组件：如何在新窗口中打开网页（实战分享）
Yihong1833100198的博客
12-17 689
摘要：本文分享了Harmony OS Web组件实现新窗口打开网页的实战经验。通过multiWindowAccess()设置允许新窗口，结合onWindowNew回调捕获并处理网页中的新窗口请求（如target="_blank"链接或window.open调用）。文章提供了典型应用场景（如区分内外链处理）、完整代码示例和常见问题解决方案，帮助开发者实现更智能的网页打开策略，提升应用体验。
12.17 脚本网页 创意导航
2503_93413701的博客
12-17 331
分享一下短小，好看的导航。
【短链接项目笔记】Day1 用户模块
最新发布
m0_54394021的博客
12-17 739
短链接（Short Link）是指将一个原始的长 URL（Uniform Resource Locator）通过特定的算法或服务转化为一个更短、易于记忆的 URL。短链接通常只包含几个字符，而原始的长 URL 可能会非常长。短链接的原理非常简单，通过一个原始链接生成个相对短的链接，然后通过访问短链接跳转到原始链接。
大模型通义千问3-VL-Plus - QVQ 视觉推理模型
weixin_66243333的博客
12-14 827
本文介绍了视觉推理模型及其实现方法。该模型适用于需要逻辑分析的视觉任务（如数学题解答、图表分析等），特点是先输出思考过程再给出最终答案。文章详细展示了基于QVQ模型的后端实现，包括请求实体、服务接口、实现类和控制器代码，支持流式返回推理过程。测试结果表明该方案能有效拆分思考过程和最终回复，适用于复杂视觉分析场景，相比普通视觉模型更具可解释性。
Vue Web前端技术笔记整理
资源摘要信息:"Web前端笔记.zip" 知识点概述： 1. Vue.js框架概述： Vue.js（通常简称为Vue）是一个轻量级的、渐进式的JavaScript框架，主要用于构建用户界面和单页应用程序（SPA）。Vue的设计哲学是采用自底向上...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值