前端项目初始化搭建(二)
一、使用 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
未完待续。。。
相关文章:

前端项目初始化搭建(二)
一、使用 Vite 创建 Vue 3 TypeScript 项目 PS E:\web\cursor-project\web> npm create vitelatest 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-…...
3D 目标检测:从萌芽到前沿的技术演进之路
亲爱的小伙伴们😘,在求知的漫漫旅途中,若你对深度学习的奥秘、JAVA 、PYTHON与SAP 的奇妙世界,亦或是读研论文的撰写攻略有所探寻🧐,那不妨给我一个小小的关注吧🥰。我会精心筹备,在…...

Apifox 产品更新|支持发布多个文档站、文档站支持 Algolia 搜索配置、从返回响应直接设置断言
看看本次 这次版本更新主要涵盖的重点内容,有没有你所关注的功能特性: 「发布文档」升级为「发布文档站」 支持发布多个文档站 文档站支持 Algolia 搜索配置 支持从返回响应直接设置断言 用户反馈优化 解决恢复退出 App 时未关闭的标签页可能导致内存…...

Linux内核结构及源码概述
参考:深入分析LINUX内核源码 深入分析Linux内核源码 (kerneltravel.net) Linux 是一个庞大、高效而复杂的操作系统,虽然它的开发起始于 Linus Torvalds 一个人,但随着时间的推移,越来越多的人加入了 Linux 的开发和对它的不断完善…...
《探索C++在3D重建中的算法与技术要点》
3D重建作为计算机视觉领域的重要技术,在诸多行业有着广泛应用,而C以其高效性和对底层硬件的良好控制,成为实现3D重建算法的常用语言。以下是利用C进行3D重建的一些常见算法和技术要点。 多视图立体视觉算法 多视图立体视觉是3D重建的基础算…...

【老白学 Java】数字格式化
数字格式化 文章来源:《Head First Java》修炼感悟。 很多时候需要对数字或日期进行格式化操作,来达到某些输出效果。Java 的 Formatter 类提供了很多扩展性功能用于字符串的格式化,只要调用 String 静态方法 format() ,传入参数…...
useCallback和forwardRef的联合使用
文章目录 一、useCallback二、forwardRef 总结了useCallback、forwardRef中的deps,以及操作子组建时会遇到数据流不同步的问题 一、useCallback useCallback可以缓存函数,这样避免组建更新导致的函数重建;useCallback在函数更新以后会在deps中…...
C# .NET CORE 开发问题汇总
1. error MSB4803: .NET Core 版本的 MSBuild 不支持“ResolveComReference”。请使用 .NET Framework 版本的 MSBuild。 引用了一个COM组件, 使用donet 命令时,提示不支持, 可以先将项目设置为x86以构建, 将COM引用添加到核心项目中,构建它,在obj\x86\…...
【C语言】拆数字组成最大数
相信你是最棒哒!!! 文章目录 题目描述 正确代码 法一注释版 简洁版 法二注释版 简洁版 题目描述 任意输入一个自然数,输出该自然数的各位数字组成的最大数。例如,输入 1593 ,则输出为 9531 。 输入描述 …...

【Git系列】根据提交打印邮箱
💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…...

Nginx在处理客户端请求的并发性发面是否依赖Linux的多线程原理
Nginx在处理客户端请求的并发性发面是否依赖Linux的多线程原理 Nginx 在处理客户端请求的并发性方面,并不依赖于 Linux 的多线程原理。 Nginx 的并发处理主要基于 事件驱动模型 和 异步非阻塞 I/O,而不是传统的多线程或多进程模型。 Nginx 的并发处理模…...

Python生成对抗神经网络GAN预测股票及LSTMs、ARIMA对比分析ETF金融时间序列可视化
全文链接:https://tecdat.cn/?p38528 本文聚焦于利用生成对抗网络(GANs)进行金融时间序列的概率预测。介绍了一种新颖的基于经济学驱动的生成器损失函数,使 GANs 更适用于分类任务并置于监督学习环境中,能给出价格回…...
深入了解C++中const的用法
文章目录 一、C中的const如何理解?二、C中的const与C语言中的const有何区别?三、const与指针、引用的结合使用 一、C中的const如何理解? 在C中,const是一个关键字,用来表示常量性,意在告诉编译器某些变量或…...
【Linux金典面试题(上)】41道Linux金典面试问题+详细解答,包含基本操作、系统维护、网络配置、脚本编程等问题。
大家好,我是摇光~,用大白话讲解所有你难懂的知识点 之前写了一篇关于 python 的面试题,感觉大家都很需要,所以打算出一个面试专栏。 【数据分析岗】Python金典面试题 这个专栏主要针对面试大数据岗位、数据分析岗位、数据运维等…...
利用Python实现多元回归预测汽车价格
引言: AI技术的热门使得大家对机器学习有了更多的关注,作为与AI技术息息相关的一门课程,从头了解基础的机器学习算法就显得十分有必要,如:梯度下降,线性回归等。 正文: 本文将讲解线性回归中多元回回归的案例 机器学习大致可以分为监督学习,非监督学习、半监督学习还…...
抓包软件fiddler和wireshark使用手册
fiddler官方文档 Fiddler 抓包教程1 Fiddler 抓包教程2 wireshark抓包学习 2添加链接描述 ip 过滤 ip.src_host ip.dst_host ip.addr mac 过滤 eth.src eth.dst eth.addr 端口过滤 tcp.port tcp.srcport tcp.dstport 协议类型过滤 arp dhcp 规则组合 and or...
初识三大 Observer
文章目录 ResizeObserver、MutationObserver和IntersectionObserver用MutationObserver实现图片懒加载MutationObserver 兼容性问题IntersectionObserver 应用MutationObserver和IntersectionObserver的区别IntersectionObserver 实例示例一:图片懒加载示例二&#…...

Eclipse MAT(Memory Analyzer Tool) 使用手册
参考:JAVA内存泄露使用MAT(Memory Analyzer Tool)快速定位代码 Eclipse MAT 1.15.0提示JDK版本最低需要使用17版本的,如果不想安装可以下载ZIP包,或者使用较低版本的MAT。 为了避免下载的17版本JDK和本地环境干扰,可以直接在MAT配…...

TongWe7.0-东方通TongWeb控制台无法访问 排查
**问题描述:**无法访问TongWeb的控制台 逐项排查: 1、控制台访问地址是否正确:http://IP:9060/console #IP是服务器的实际IP地址 2、确认TongWeb进程是否存在,执行命令:ps -ef|grep tongweb 3、确认TongWeb服务启动…...

Ariba Procurement: Administration_Master data
采购主数据集成Procurement Master Data Integration 注意:并非所有元素都是必需的,数据元素的名称可能根据ERP的不同,有所不同。 Types of Master Data Accounting 在SAP Ariba中的各种会计元素字段中,填充有效值选择列表。建…...
CMake控制VS2022项目文件分组
我们可以通过 CMake 控制源文件的组织结构,使它们在 VS 解决方案资源管理器中以“组”(Filter)的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总(共4种) 方法描述是否推荐…...

Springboot社区养老保险系统小程序
一、前言 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,社区养老保险系统小程序被用户普遍使用,为方…...
Angular微前端架构:Module Federation + ngx-build-plus (Webpack)
以下是一个完整的 Angular 微前端示例,其中使用的是 Module Federation 和 npx-build-plus 实现了主应用(Shell)与子应用(Remote)的集成。 🛠️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...
怎么让Comfyui导出的图像不包含工作流信息,
为了数据安全,让Comfyui导出的图像不包含工作流信息,导出的图像就不会拖到comfyui中加载出来工作流。 ComfyUI的目录下node.py 直接移除 pnginfo(推荐) 在 save_images 方法中,删除或注释掉所有与 metadata …...
tomcat入门
1 tomcat 是什么 apache开发的web服务器可以为java web程序提供运行环境tomcat是一款高效,稳定,易于使用的web服务器tomcathttp服务器Servlet服务器 2 tomcat 目录介绍 -bin #存放tomcat的脚本 -conf #存放tomcat的配置文件 ---catalina.policy #to…...
深度剖析 DeepSeek 开源模型部署与应用:策略、权衡与未来走向
在人工智能技术呈指数级发展的当下,大模型已然成为推动各行业变革的核心驱动力。DeepSeek 开源模型以其卓越的性能和灵活的开源特性,吸引了众多企业与开发者的目光。如何高效且合理地部署与运用 DeepSeek 模型,成为释放其巨大潜力的关键所在&…...
Java求职者面试指南:Spring、Spring Boot、Spring MVC与MyBatis技术解析
Java求职者面试指南:Spring、Spring Boot、Spring MVC与MyBatis技术解析 一、第一轮基础概念问题 1. Spring框架的核心容器是什么?它的作用是什么? Spring框架的核心容器是IoC(控制反转)容器。它的主要作用是管理对…...

【threejs】每天一个小案例讲解:创建基本的3D场景
代码仓 GitHub - TiffanyHoo/three_practices: Learning three.js together! 可自行clone,无需安装依赖,直接liver-server运行/直接打开chapter01中的html文件 运行效果图 知识要点 核心三要素 场景(Scene) 使用 THREE.Scene(…...

生产管理系统开发:专业软件开发公司的实践与思考
生产管理系统开发的关键点 在当前制造业智能化升级的转型背景下,生产管理系统开发正逐步成为企业优化生产流程的重要技术手段。不同行业、不同规模的企业在推进生产管理数字化转型过程中,面临的挑战存在显著差异。本文结合具体实践案例,分析…...

暴雨新专利解决服务器噪音与性能悖论
6月1日,我国首部数据中心绿色化评价方面国家标准《绿色数据中心评价》正式实施,为我国数据中心的绿色低碳建设提供了明确指引。《评价》首次将噪音控制纳入国家级绿色评价体系,要求从设计隔声结构到运维定期监测实现闭环管控,加速…...