Vue3框架搭建:vue+vite+pina+typescript

从零开始搭建Vue3框架(一):项目初始化+Vite基础配置 前言 vue3.0更新了不短的时间,目前很多配套框架如elementui、echarts等主流UI框架都已经做了升级。 考虑到目前2.0的项目工程运行速度、开发效率都有了一定瓶颈,所以公司考虑优化技术架构,实现3.0版本升级。 升级肯定涉及到兼容性和技术栈的问题,至于两个版本的改动在项目搭建过程中,如果设计到的会适当说明。本文目的在于记录自己项目框架搭建的过程,也记录一下遇到的坑吧。 项目创建 Vue官方提供了两种方法: 通过vite,强烈推荐这种方法,毕竟升级的目的之一也是希望提高一下开发效率,vite 阅读详情

一、使用vue-create创建一个vue3项目

仓库地址:GitHub - buguniao5213/LuArch: Front-end architecture

官方地址:GitHub - vuejs/create-vue: 🛠️ The recommended way to start a Vite-powered Vue project

原始目录结构如下:

vue3-project/
├── public/            # 静态资源目录,构建过程中会被直接复制,无需经过编译处理
│   ├── favicon.ico    # 网站图标
├── src/
│   ├── assets/        # 静态资源目录,包含图片、字体等未经过编译的文件
│   ├── components/    # 组件目录(.vue文件)
│   │   └── ...        # 各类组件目录
│   ├── router/        # 路由配置目录
│   ├── stores/        # 状态管理目录,此处使用pinia
│   ├── views/         # 主要页面目录
│   ├── App.vue        # 根组件,应用入口,通常包含路由视图和其他全局共享组件
│   └── main.ts        # 入口脚本,用于初始化Vue实例、引入并配置路由、状态管理等核心模块
├── .eslintrc.cjs      # Eslint 配置文件,用于定义项目的代码风格规范和错误检查规则
├── .gitignore         # Git忽略文件
├── .prettierrc.json   # Prettier 配置
├── index.html         # 入口HTML文件
├── package-lock.json  # npm 包管理器中用于锁定项目依赖版本的文件
├── package.json       # npm 包配置文件,包括项目依赖、脚本命令、项目信息等元数据
├── README.md          # 项目文档和说明文件,介绍项目结构、启动方式及注意事项等
├── tsconfig.app.json  # TypeScript 设置,为前端应用配置的
├── tsconfig.json      # TypeScript 项目的核心配置文件
├── tsconfig.node.json # 针对 Node.js 应用程序进行更细粒度的 TypeScript 编译设置
├── tsconfig.vitest.json # TypeScript 设置,为 Vitest 测试框架配置的
├── vite.config.ts     # Vite配置文件
└── vitest.config.ts   # Vitest配置文件

二、框架开发目录:

1、axios封装

2、相关配置和说明,包括vite、eslint等

3、router封装(静态)

4、………………

5、………………

6、(先开发,后补充+链接)

Vue3.0+typescript+Vite+Pinia+Element-plus搭建vue3框架! / 此处的id很重要name: ''}),getters: {},},actions: {},// 登录// 调用接口,做逻辑处理})setup() {// $patch 修改 store 中的数据name: '名称被修改了,nameLength也改变了'})return {userStore,updateName},}) 阅读详情

相关推荐

前端项目创建:Vue 3 + TypeScript + Vite

创建项目:Vue 3 + TypeScript + Vite一、准备1.node版本2.查看vue-cli版本3.安装typescript二、安装三、完成 一、准备 1.node版本 要求:node版本 >=12.0.0 查看node版本 nvm list 切换node版本 nvm use <version> 2.查看vue-cli版本 vue --version 3.安装typescript npm install -g typescript // 查看版本 npm vie

MytLoy的博客 547

vue3框架搭建

目前预估是这些有部分还没用到就先不写了,等用到了再补充。

weixin_48022521的博客 2086

004、Vue3 + Vite + TypeScript + Element-Plus,第一个后台管理项目走向第4步:继续整合pina以及环境配置

/ ref变量 → state 属性// computed计算属性 → getters});// function函数 → actions});

浪淘沙jkp的专栏 875

vue3项目搭建

npm 也是 Node.js 的默认的包管理器。一旦 node 安装,npm 也会被默认安装。yarn 是 facebook 等公司在 npm v3 时推出的一个新的开源的包管理器,它的出现是为了弥补 npm 当时安装速度慢、依赖包版本不一致等问题。如果之前安装了2.0的脚手架,要先卸载掉,输入:npm uninstall vue-cli -g 进行全局卸载。输入项目名crm_vue3,选择框架vue,选择typeScript回车就搭建好了。选择安装依赖项时要使用的包管理器:(使用键盘上下箭头键)

weixin_43506403的博客 4354

TypeScript+Vue3+Vite+VueRouter+Pinia的项目搭建

TypeScript+Vue3+Vite+VueRouter+Pinia的项目搭建

wangweiruning的博客 977

构建现代Web应用:使用Vue3、Vite、TypeScript和Pinia

htmltable {th, td {th {pre {简介:本文详细介绍了基于Vue 3、Vite、TypeScript、Pinia和Element Plus构建的基础系统架构,强调其在现代Web开发中的重要性和优势。架构组件包括Vue 3的性能优化和新特性、Vite的快速构建体验、TypeScript的类型安全、Pinia的高效状态管理,以及Element Plus的丰富UI组件。

weixin_35899324的博客 1182

vue系列(二)——vue3基础项目(集成框架)搭建

目录一、新建项目二、集成路由三、安装配置axios(网络请求库)四、使用vuex(暂无)五、结尾打开编辑器新建项目,填写项目名称,点击创建,之后等待项目加载完成就可以了。我的Hbuilder X 版本是3.4.14新建的项目目录下面是vue项目加载页面的形式,单页渲染,所有的内容展示都是在index.html页面上进行渲染,而App.vue是index.html里面最外层的组件容器、包含全局的js代码css样式。所有的页面的渲染是在App.vue容器里面进行文件main.js:入口js文件,所有全局文件的引

xxfen_的博客 6395

如何手动打包Linux(麒麟系统)的Qt程序

Qt在windows上有自带的windeployqt来帮助打包程序,但是对于linux系统来说Qt并没有自带对应的打包程序。尽管存在开源的linuxdeployqt打包程序,但是在使用的过程中会出现很多问题,对于arm架构的系统来说需要编译并修改源码等等。确定你程序所需要的插件,然后将你使用的Qt版本对应的插件复制到plugins里边。你可以根据各个库后面的路径来找到对应的库,并将它们全部复制到之前创建的lib目录下。复制你的可执行程序到bin目录下(将 your_executable。

qq_45903233的博客 3605

手把手教你搭建vue3项目

使用VUE3开发很久了,但一直没进行总结和记录,忙里偷闲整理搭建一套VUE3项目,正好记录一下,按照我的教程让你开启vue3之旅吧!

weixin_43618130的博客 5万+

深入解析CRC-16校验算法及其Verilog硬件实现

本文深入解析了CRC-16校验算法的原理及其在Verilog中的硬件实现方法。从基础的模2除法到串行和并行实现方案,详细介绍了LFSR结构、状态转移分析以及工业应用中的优化技巧。通过实际案例和性能对比,帮助开发者理解如何选择适合的CRC实现方案,确保数据传输的可靠性。

yolo5detector的博客 322

迪文屏【0】——从零搭建工程:图片显示、文本变量配置与串口数据交互实战

本文以迪文屏T5L系列为例,详细介绍了从零搭建HMI工程的完整流程。内容涵盖硬件软件准备、DGUS工程创建、背景图片显示、文本变量配置,并重点演示了如何通过串口指令实时修改屏幕数据变量,实现动态交互。旨在帮助开发者快速掌握迪文屏开发的核心步骤与数据交互方法。

alpha的博客 349

Vue:Vue3-TypeScript-Pinia-Vite-pnpm / 基础项目 / 20240807

‌这个工具特别适用于前端开发,‌因为它能够过滤出Git代码暂存区的文件,‌只对这些文件进行lint检查,‌避免了全量文件的检查,‌从而提高了性能并减少了误操作的可能性。这个功能特别有用,当你需要基于文件系统的结构来动态地加载多个模块时,比如在一个 Vue、React 或其他前端框架的应用中,你可能需要导入一个目录下所有的组件或模块。:UnoCSS通过仅传递实际使用的样式属性,减小生成的CSS文件的体积,从而优化页面的加载速度,并减少不必要的网络传输和运行时的样式计算。

snow的博客 3384

PX4飞控 vs 大疆A3:开源与闭源方案在无人机硬件架构中的实战对比

本文深入对比了PX4飞控与大疆A3在无人机硬件架构上的差异,分析了开源与闭源方案在工业级无人机开发中的优劣势。通过详细的硬件配置、传感器兼容性、扩展能力及性能测试数据,为开发者提供选型指南,特别适合需要自定义算法和复杂功能集成的项目。

a3b4c5的博客 888

vite+vue3+typescript+pinia 项目搭建

vite+vue3+typescript+pinia 项目搭建( 附demo)

yadang2的博客 3041

虚拟机ubuntu22.04.3中安装vitis2024.1注意事项

虚拟机ubuntu安装vitis2024.1

qq_52033578的博客 2495

基于YOLOv11的无人机目标检测系统:实现drone、bird、aircraft多类别识别

采用改进的YOLOv11网络结构,平衡检测精度和速度融合VisDrone和UAVDT数据集,增强模型泛化能力设计多尺度特征融合模块,提升小目标检测性能开发直观的UI界面,便于实际部署和应用。

YOLO 322

搭建一个基于Vue3+Vite+TypeScript的项目

最近准备搭建工作室的官方网站,在这里记录一下项目搭建的过程。

volit的博客 2942

软考高级-系统架构设计师 知识点整理 (一篇就够了 建议收藏)

软考高级-系统架构设计师知识点整理---十万字总结,助你通过高级

片言可决讼,半纸能缚龙 7343

Vue 3 + Typescript + Vite

Vue 3 + Typescript + Vite (摸鱼试试新的好玩的,仅框架搭建) 项目地址 升级 node 版本到最新稳定版(Vite 构建工具 Node.js 版本>= 12.0.0) 个人使用的第二种,需要的时候自己切换版本 方法一:nvm install stable使用 nvm 安装最新稳定版 Node.js 方法二: github 搜索 Kenshin/gnvm,下载 gnvm.exe 放在 nodejs 文件夹(找不到就 cmd 命令行窗口输入where node会出现 no

一一 691

银河麒麟硬盘健康检测:smartctl/badblocks实战与坏盘预判

xfs_repair检查。S.M.A.R.T检测。

信创运维工程师 · 银河麒麟 & 容器实战 | 金融生产环境迁移·等保加固 | 142篇原创·17万+阅读 859

华为的C语言编程规范.pdf

华为技术有限公司内部技术规范。本规范制定了编写C语言程序的基本原则、规则和建议。从代码的清晰、简洁、可测试、安全、程序效率、可移植各个方面对C语言编程作出了具体指导。

vite vue3.2 typescript pina 开发初始化步骤

安装 Node.js 和 Vite:在终端中运行 npm install -g vite。 创建项目文件夹并进入:在终端中运行 mkdir my-project && cd my-project。 初始化项目:在终端中运行 vite init。选择 Vue3.x + TypeScript 选项。 安装依赖:在终端中运行 npm install。 安装 Pina:在终端中运...

weixin_35752122的博客 413

OV9734 DATASHEET,完整规格书

OV9734完整规格书,包括电气参数,尺寸规格,寄存器配置表等

vue3(vite+typeScript+pina)使用记录

vue3(vite+typeScript+pina)

zhaokai621的博客 1096

efm32 入门.pdf

本PDF共计22页,介绍的是操作驱动API,下载与否自己斟酌。

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

搭建vue3.2+vite+ts+pinia项目

搭建vite+vue3.2+ts+pinia 项目

小菜张的博客 4555

uniapp+vue3+vite+pnpm+pina+uView+typeScript+tsx

pnpm 跟 npm 和 yarn 的差距就是把原来每个项目安装 modules 放到统一的文件夹中,通过符号链接(软连接)和硬链接,注意项目要和 pnpm 统一存依赖的 modules 同盘,不然就等于丢失了 pnpm 的优势。根据官网提示完成安装:https://uiadmin.net/uview-plus/components/install.html。2、Vue3/Vite版要求 node 版本^14.18.0 || >=16.0.0。1、一定要选择和pnpm存依赖包相同的盘符安装创建项目。

u012881935的博客 2479

vite-vue3-elementPlus-vueRouter4-Pinia搭建项目

一个项目的代码编写,需要经过需求-技术选型-项目搭建-业务功能实现,这次的重点在于项目的搭建,在经历了一年的前端工作,对于项目的搭建并不是很熟悉,是部门的前端前辈去搭建的,在公司参与了好几个项目的研发,每个项目,或者说是每个人的项目架构都不太一样,

weixin_45791692的博客 1097

Vite2 + Vue3 + TypeScript + Pinia 搭建一套企业级的开发脚手架

Vite2 + Vue3 + TypeScript + Pinia 搭建一套企业级的开发脚手架

小周sri的码农 1081
上一篇: 组件库设计与实践
下一篇: Vue3框架搭建2:axios+typescript封装
黎明初时
博客等级 码龄13年 47粉丝 53原创
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值