Vue3全家桶和小兔鲜儿案例

在这里插入图片描述

查看node.js版本,需要是16.0以上版本

node -v

创建一个vue应用

npm init vue@latest

在这里插入图片描述

在windows窗口中进入vs code命令

code ./

在这里插入图片描述

创建项目后vs code打开安装依赖

npm install

安装好以后运行程序
在这里插入图片描述
打开页面
在这里插入图片描述
在这里插入图片描述

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

在这里插入图片描述
deep有性能损耗,尽量不开启deep
在这里插入图片描述
生命周期函数指组件从创建到销毁各个阶段实际成熟之后会自动执行的函数
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
setup语法糖下,局部组件无需注册,导入就可以直接使用
在这里插入图片描述
**模板引用的概念:**通过ref标识获取真实的dom对象或者组件实例对象
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
使用git克隆代码

git clone  http://git.itcast.cn/heimaqianduan/vue3-basic-project.git

在这里插入图片描述
在这里插入图片描述
新建文件
在这里插入图片描述
VS code打开文件,安装依赖

npm install

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
什么是别名路径联想提示
在编写代码的过程中,一旦 输入 @/ , VSCode会立刻 联想出src下的所有子目录和文件, 统一文件路径访问不容易出错
在这里插入图片描述
在这里插入图片描述
首先装包

npm install element-plus --save

按需导入
安装插件

npm install -D unplugin-vue-components unplugin-auto-import

定制Element主题
安装scss

npm i sass -D

准备定制化的样式文件
在这里插入图片描述

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

在这里插入图片描述
为什么要自动导入
在项目里一些组件共享的色值会以scss变量的方式统一放到一个名为 var.scss 的文件中,正常组件中使用,需要先导
入scss文件,再使用内部的变量,比较繁琐,自动导入可以免去手动导入的步骤,直接使用内部的变量
在这里插入图片描述
在这里插入图片描述
安装vueuse插件

npm i @vueuse/core

结论:俩个导航中的列表是完全一致的,但是要发送俩次网络请求,存在浪费。通过Pinia集中管理数据,再把数据给组件使用
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
基于逻辑函数拆分业务是指把同一个组件中独立的业务代码通过函数做封装处理,提升代码的可维护性
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
安装

npm i pinia-plugin-persistedstate

将插件添加到pinia实例上
在这里插入图片描述
Token作为用户标识,在很多个接口中都需要携带Token才可以正确获取数据,所以需要在接口调用时携带Token。另
外,为了统一控制采取请求拦截器携带的方案
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

记录Linux系统中vim同时开多个窗口编辑文件

在使用Linux进行文本编辑的时候,通常使用vim编辑器编辑文件,当然啦,vim也可以创建文件,如果只是一个一个创建,只需要vim创建即可,但是如何一次性打开多个窗口编辑呢? 目录 1、目标:…

Unity和Android的交互

Unity和Android的交互 一、前言二、Android导出jar/aar包到Unity2.1 版本说明2.2 拷贝Unity的classes.jar给Android工程2.2.1 classes.jar的位置2.2.2 Android Studio创建module2.2.3 拷贝classes.jar 到 Android工程并启用 2.3 编写Android工程代码2.3.1 创建 MainActivity2.…

springboot之mybatisPlus多表查询及分页查询

文章目录 一、多表查询二、mybatis-plus条件查询三、分页查询 一、多表查询 可能会用到的注解 这里的场景是,查询每个用户及其所有的订单。就是查询你的id号的同时,把你所有的历史订单信息都拉出来。 表结构这样 CREATE TABLE User ( id INT PRIMARY…

docker笔记(一):安装、常用命令

一、docker概述 1.1docker为什么会出现 各种环境配置十分繁琐,每一个机器都需要配置环境,难免出现各种问题。 发布一个项目jar需要配置(MySQL、redis、jdk、…),项目不能都带上环境安装打包: 传统&…

PostgrerSQL基本使用与数据备份

前言 上篇了解了 PostgrerSQL 数据库的部署PostgreSQL关系型数据库介绍与部署-CSDN博客,本篇将继续就其基本操作、备份与还原内容做相关介绍。 目录 一、数据库的操作 1. 本机登录 2. 开启远程登录 2.1 开放远程端口 2.2 编辑配置文件 2.3 修改配置密码 2.…

前端三剑客 —— JavaScript (第一天)

目录 回顾内容 1.弹性布局 2.网格布局 JavaScript 概述 发展 浏览器 什么是Javascript JavaScript 能干什么 JavaScript需要的环境 JavaScript初体验 基本数据 JS书写方式 行内JS 页面JS 外部JS 1)创建外部JS文件 2)编写页面 对话框 警…

【踩坑日记】因不同系统换行符不同导致的文本读取结果不同的问题

文章目录 1 问题现象描述2 解决过程(点击直接跳到解决方法)3 原因解释4 如何避免踩坑4.1 格式转换4.2 格式查看 1 问题现象描述 起因是群友问了这么一个问题 确实很奇怪,按理说第二个printf不会完全不输出,于是想到,…

C++数据结构与算法——回溯算法组合问题

C第二阶段——数据结构和算法,之前学过一点点数据结构,当时是基于Python来学习的,现在基于C查漏补缺,尤其是树的部分。这一部分计划一个月,主要利用代码随想录来学习,刷题使用力扣网站,不定时更…

SD-WAN如何解决更有性价比地跨境网络问题

云桥通SD-WAN利用智能路由和负载均衡技术,优化数据传输路径,提高网络性能和可靠性。这意味着数据在跨国传输时可以更快到达目的地,减少延迟和丢包率。跨境SD-WAN提高了网络连接速度和质量,使用户能够更快地访问跨国业务所需的资源…

索引的概念

索引的概念    1.索引是一种可选的与表相关的数据库对象,用于提高数据的查询效率。    2.索引是一种有序的数据结构。    3.如果一个表没有创建索引,则对该表进行查询时需要进行全表扫描;如果创建了索引,则在有条件查询时…

应用性能分析工具CPU Profiler

简介 本文档介绍应用性能分析工具CPU Profiler的使用方法,该工具为开发者提供性能采样分析手段,可在不插桩情况下获取调用栈上各层函数的执行时间,并展示在时间轴上。 开发者可通过该工具查看TS/JS代码及NAPI代码执行过程中的时序及耗时情况…

福州装修答疑 | 飘窗能不能砸掉?福州中宅装饰,福州装修

装修中的飘窗是一种常见的装饰元素,它不仅可以增加室内的采光和通风效果,还能为居室增添一份雅致和温馨。然而,很多业主在装修中都会遇到一个共同的问题:装修中的飘窗到底能不能砸?什么情况下可以砸?什么情…

IO流【带有缓冲区的字节输入、输出流;字符输入、输出流 转换流】

day35 学习注意事项 按照流的发展历史去学习注意流与流之间的继承关系举一反三 IO流 继day36 字节流继承图 字节流 应用场景:操作二进制数据(音频、视频、图片) abstract class InputStream – 字节输入流的基类(抽象类&#xff0…

基于R、Python的Copula变量相关性分析及AI大模型应用

在工程、水文和金融等各学科的研究中,总是会遇到很多变量,研究这些相互纠缠的变量间的相关关系是各学科的研究的重点。虽然皮尔逊相关、秩相关等相关系数提供了变量间相关关系的粗略结果,但这些系数都存在着无法克服的困难。例如,…

Anaconda环境命令样例

启动命令行Anaconda Powershell Prompt 查看环境列表 (base) PS C:\Users\Administrator> conda env list # conda environments: # base * G:\ProgramData\anaconda3 MoneyprinterTurbo G:\ProgramData\anaconda3\envs\MoneyprinterTurbo pytorc…

C++ 标准库类型stackqueue

C/C总述:Study C/C-CSDN博客 栈与队列详解(数据结构):栈与队列_禊月初三-CSDN博客 stack(栈) stack的常用函数 函数说明功能说明stack()构造空栈push(T& val)将元素val压入栈中size()返回栈中元素个…

数据结构之二叉树由浅入深最终章!

题外话 我说清明节想放松一下没更新大家信吗? 博客毕竟是文字不是视频,大家如果有不明白的地方,可以使用数形结合的方式,画图一边通过图片,一边通过对照代码进行推导一下,有什么问题都可以私信我或者写在评论区 正题 第一题 寻找二叉树中p,q最近公共祖先 第一题思路 先…

【C++】红黑树讲解及实现

前言: AVL树与红黑树相似,都是一种平衡二叉搜索树,但是AVL树的平衡要求太严格,如果要对AVL树做一些结构修改的操作性能会非常低下,比如:插入时要维护其绝对平衡,旋转的次数比较多,更…

【Claude 3】This organization has been disabled.此组织已被禁用。(Claude无法对话的原因和解决办法)

Claude对话提示 This organization has been disabled.此组织已被禁用。 This organization has been disabled.此组织已被禁用。 This organization has been disabled.此组织已被禁用。 问题截图 问题原因 出现该页面,表示您的账户已经无法使用,可能…

顺序表相关习题

🌈 个人主页:白子寰 🔥 分类专栏:python从入门到精通,魔法指针,进阶C,C语言,C语言题集,C语言实现游戏👈 希望得到您的订阅和支持~ 💡 坚持创作博文…