前端项目初始化搭建(二)

一、使用 Vite 创建 Vue 3 + TypeScript 项目

PS E:\web\cursor-project\web> npm create vite@latest yf-blog -- --template vue-ts> npx
> create-vite yf-blog --template vue-tsScaffolding project in E:\web\cursor-project\web\yf-blog...Done. Now run:cd yf-blognpm installnpm run devPS E:\web\cursor-project\web> cd yf-blog
PS E:\web\cursor-project\web\yf-blog> npm installadded 47 packages in 7s5 packages are looking for fundingrun `npm fund` for details
PS E:\web\cursor-project\web\yf-blog> npm run dev> yf-blog@0.0.0 dev
> viteVITE v6.0.3  ready in 594 ms➜  Local:   http://localhost:5173/➜  Network: use --host to expose➜  press h + enter to show help

在这里插入图片描述

二、安装生产必要依赖

PS E:\web\cursor-project\web\yf-blog> npm install vue-router@4 pinia element-plus @element-plus/icons-vue axios marked highlight.jsadded 16 packages in 4s9 packages are looking for fundingrun `npm fund` for details

三、安装开发依赖

PS E:\web\cursor-project\web\yf-blog> npm install -D sass sass-loader mockjs @types/mockjs vite-plugin-mock cross-env unplugin-auto-import unplugin-vue-componentsadded 87 packages in 8s26 packages are looking for fundingrun `npm fund` for details

四、配置别名

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// https://vite.dev/config/
export default defineConfig({resolve: {alias: {'@': path.resolve(__dirname, './src')}},plugins: [vue()],
})

在src下的vite-env.d.ts文件增加模块定义,否则别名引用会报错找不到模块

npm i @types/node --D
declare module "*.vue" {import type { DefineComponent } from "vue";const component: DefineComponent<typeof DefineComponent>;export default component;
}

在tsconfig.app.json添加

{"compilerOptions": {"paths": {"@": ["./src"]}},"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
}

五、依赖的功能和使用方法

1. vue-router@4

功能: Vue.js的官方路由管理器
安装: npm install vue-router@4

使用步骤:

1、新建src/router/index.ts

import { createRouter, createWebHistory } from 'vue-router'const router = createRouter({history: createWebHistory(),routes: [{path: '/',name: 'Home',component: () => import('@/views/Home.vue')},{path: '/article/:id',name: 'Article',component: () => import('@/views/Article.vue')}]
})export default router

2、main.ts引入router

import router from '@/router/index'
const app = createApp(App)
app.use(router)
app.mount('#app')

3、在组件中使用:

<script setup lang="ts">
const router = useRouter()
const route = useRoute()// 编程式导航
const goToArticle = (id: number) => {router.push(`/article/${id}`)
}// 获取路由参数
const articleId = route.params.id
</script>
2. element-plus

功能: 基于 Vue 3的UI组件库
安装: npm install element-plus

使用步骤:

1、main.ts引入 element-plus

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from '@/router/index'
import ElementPlus from 'element-plus'// 样式导入
import 'element-plus/dist/index.css'
// 创建应用实例
const app = createApp(App)app.use(router)
app.use(ElementPlus, {size: 'default',zIndex: 3000
})
app.mount('#app')

2、路由layout组件化处理

在这里插入图片描述

3、新建layout模块

在这里插入图片描述

3.1、src/layout/index.vue内容如下

<template><el-container class="common-layout"><el-aside class="aside"><Aside/></el-aside><el-container><el-header class="header"><Header/></el-header><el-main><router-view></router-view></el-main><el-footer class="footer">Footer</el-footer></el-container></el-container>
</template><script setup lang="ts">
import Aside from './components/aside.vue'
import Header from './components/header.vue'</script><style lang="scss" scoped>
.common-layout{width: 100%;height: 100vh;.aside{height: 100vh;width: 200px;background-color: #ccc;}.header{height: 50px;background-color: #c9c1c1;border-bottom: 1px solid #c9c6c6;}.footer{height: 50px;background-color: #c9c1c1;}
}</style>

3.2、aside.vue、header.vue、home.vue内容相似如下

<template><div class="home"><span>侧边/头部/博客首页</span></div>
</template><script setup lang="ts"></script><style lang="scss" scoped></style> 

最终页面效果如下

在这里插入图片描述

2. element-plus/icons-vue

未完待续。。。

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

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

相关文章

SQL最佳实践:避免使用COUNT=0

如果你遇到类似下面的 SQL 查询&#xff1a; SELECT * FROM customer c WHERE 0 (SELECT COUNT(*)FROM orders oWHERE o.customer_id c.customer_id);意味着有人没有遵循 SQL 最佳实践。该语句的作用是查找没有下过订单的客户&#xff0c;其中子查询使用了 COUNT 函数统计客…

多模态大模型(二)——用Transformer Encoder和Decoder的方法(BLIP、CoCa、BEiTv3)

文章目录 BLIP: Bootstrapping Language-Image Pre-training for Unified Vision-Language Understanding and Generation 理解、生成我都要&#xff0c;一个很有效的、根据图片生成caption的工具1. BLIP的研究动机2. BLIP的模型结构3. CapFilt Model4. BLIP的训练过程 CoCa: C…

【理想汽车中科院】基于模仿学习的端到端自动驾驶数据缩放规律

论文: https://arxiv.org/pdf/2412.02689 项目: https://github.com/ucaszyp/Driving-Scaling-Law 0. 摘要 端到端自动驾驶范式因其可扩展性而最近吸引了大量关注。然而&#xff0c;现有方法受到现实世界数据规模有限的制约&#xff0c;这阻碍了对端到端自动驾驶相关扩展规律…

【工具介绍】可以批量查看LableMe标注的图像文件信息~

在图像处理和计算机视觉领域&#xff0c;LabelMe是一个广泛使用的图像标注工具&#xff0c;它帮助我们对图像中的物体进行精确的标注。但是&#xff0c;当标注完成后&#xff0c;我们常常需要一个工具来批量查看这些标注信息。 今天&#xff0c;我要介绍的这款exe程序&#xf…

链式栈的实现及其应用

目录 一、链式栈结构模型 二、链式栈的实现 2.1创建 2.2压栈 2.3出栈 2.4判断栈是否为空 2.5查看栈顶 2.6释放栈 三、应用 链式栈实际上就是基于链表&#xff0c;压栈和弹栈可分别看作头插和头删&#xff0c;链表尾部就是栈底&#xff0c;头指针就是栈顶指针 一、链式…

day12 接口测试 ——入门→精通→实战(1)

【没有所谓的运气&#x1f36c;&#xff0c;只有绝对的努力✊】 目录 1、接口测试分类 1.1 内部接口&#xff1a; 1.2 外部接口&#xff1a; 2、目前接口架构设计 2.1、基于SOAP架构&#xff0c; 2.2、基于RPC架构&#xff0c; 2.3、基于RestFul架构&#xff0c; 2.3.1…

程序的调试

一名优秀的程序员也是一名出色的侦探&#xff0c;每一次调试都是尝试破案的过程 目录 前言 一、什么是调试&#xff1f; 二、调试 1.调试是什么 2.基本步骤 三、调试注意事项 1.怎么写出易于调试的代码 assert(断言) const 2.常见错误 总结 前言 主要是怎么调试&#xff0c;调…

FPGA实现GTP光口数据回环传输,基于Aurora 8b/10b编解码架构,提供2套工程源码和技术支持

目录 1、前言工程概述免责声明 2、相关方案推荐我已有的所有工程源码总目录----方便你快速找到自己喜欢的项目我这里已有的 GT 高速接口解决方案 3、工程详细设计方案工程设计原理框图用户数据发送模块基于GTP高速接口的数据回环传输架构GTP IP 简介GTP 基本结构GTP 发送和接收…

如何快速切换更新电脑网络的ip地址

1.ADSL拨号更换IP地址 这种更换 IP地址的方法其实就是我们平时使用的宽带拨号&#xff0c;每次拨号得到的IP地址都不同&#xff0c;但是这种方法无法使用于光纤宽带&#xff0c;并且使用这种方法更换的IP地址&#xff0c;一般只会变更最后一个号段&#xff0c;前三个号段的数字…

25.DDD数量关系

学习视频来源&#xff1a;DDD独家秘籍视频合集 https://space.bilibili.com/24690212/channel/collectiondetail?sid1940048&ctype0 文章目录 关系型数据库的数量关系领域模型的数量关系实现聚合数量关系聚合内聚合间具体说明代码 数量关系是本质吗&#xff1f;领域对象之…

每天40分玩转Django:Django视图和URL

Django视图和URL 一、课程概述 学习项目具体内容预计用时视图基础函数视图、类视图、视图装饰器90分钟URL配置URL模式、路由系统、命名URL60分钟请求处理请求对象、响应对象、中间件90分钟 二、视图基础 2.1 函数视图 # blog/views.py from django.shortcuts import render…

SAS - Subtractive Port

在SAS&#xff08;串行连接SCSI&#xff0c;Serial Attached SCSI&#xff09;协议中&#xff0c;subtractive port 是一种特殊类型的端口&#xff0c;主要用于设备间的路由功能。它的作用是在路径选择过程中充当默认路径&#xff0c;以处理未明确指定路径的请求。以下是它的定…

vue实现文件流形式的导出下载

文章目录 Vue 项目中下载返回的文件流操作步骤一、使用 Axios 请求文件流数据二、设置响应类型为 ‘blob’三、创建下载链接并触发下载四、在 Vue 组件中集成下载功能五、解释与实例说明1、使用 Axios 请求文件流数据&#xff1a;设置响应类型为 blob&#xff1a;创建下载链接并…

用Keytool和OpenSSL生成和签发数字证书

一)keytool生成私钥文件(.key)和签名请求文件(.csr),openssl签发数字证书 J2SDK在目录%JAVA_HOME%/bin提供了密钥库管理工具Keytool,用于管理密钥、证书和证书链。Keytool工具的命令在JavaSE6中已经改变,不过以前的命令仍然支持。Keytool也可以用来管理对称加密算法中…

语言模型(序列模型)

终于快要毕业了&#xff0c;乘着还在还在研究室&#xff0c;把最后一章sequence模型也学完吧。 Sequence Model 一&#xff1a;基础知识1&#xff1a;符号的定义2&#xff1a;词典(Vocabulary) 与编码(Encoding) 二&#xff1a;RNN(Recurrent Neural Networks) 循环神经网络1&…

RK3568(六)——led设备驱动(GPIO子系统)

修改设备树文件 先关闭心跳灯功能&#xff0c;也就是在图 10.4.1.2 中第 167 行添加 status 改为 disabled&#xff0c;也就是禁止 work 这个节点&#xff0c;那么禁止心跳灯功能。 我们后面需要禁止哪个功能&#xff0c;只需要将其 status 属性改为 disabled 就可以了。 gpi…

【自然语言处理与大模型】使用llama.cpp将HF格式大模型转换为GGUF格式

llama.cpp的主要目标是在本地和云端的各种硬件上以最小的设置和最先进的性能实现LLM推理。是一个专为大型语言模型&#xff08;LLM&#xff09;设计的高性能推理框架&#xff0c;完全使用C和C编写&#xff0c;没有外部依赖&#xff0c;这使得它可以很容易地被移植到不同的操作系…

npm : 无法加载文件 D:\nodejs\npm.ps1

问题描述 npm run serve 启动一个Vue项目&#xff0c;报错如下&#xff1a; npm : 无法加载文件 D:\nodejs\npm.ps1&#xff0c;因为在此系统上禁止运行脚本。有关详细信息&#xff0c;请参阅 https:/go.microsoft.com/fwlink/? LinkID135170 中的 about_Execution_Policies。…

【算法】EWMA指数加权移动平均绘制平滑曲线

EWMA&#xff08;Exponentially Weighted Moving Average&#xff0c;指数加权移动平均&#xff09;是一种常用的时间序列平滑技术&#xff0c;特别适用于对过去数据给予不同的权重。以下是对EWMA算法的详细介绍&#xff1a; 一、核心思想 EWMA算法的核心思想是通过指数衰减来…

UAC2.0 speaker——带反馈端点的 USB speaker(16bit 单声道)

UAC2.0 speaker 系列文章 UAC2.0 speaker——单声道 USB speaker(16bit) UAC2.0 speaker——类特殊请求 UAC2.0 speaker——音量控制 UAC2.0 speaker——多采样率支持 UAC2.0 speaker——24/32bit 支持 UAC2.0 speaker——speaker 数据传输 UAC2.0 speaker——同时支持 16bi…