使用 vite 搭建vue3.x项目

最新推荐文章于 2025-06-09 10:43:30 发布
最新推荐文章于 2025-06-09 10:43:30 发布
阅读量1.5k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： vue3.x 文章标签： vue npm vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_40133387/article/details/110958027
本文介绍使用Vite快速创建并运行Vue3项目的步骤：首先全局安装Vite，然后通过Vite创建项目，接着安装所需依赖，并启动项目进行开发。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1、安装vite

cnpm install -g create-vite-app

2、vite创建vue3.x项目

create-vite-app projectName

3、安装依赖运行项目

cd projectName

cnpm install

cnpm run dev

 

如何使用Vite构建Vue3项目
weixin_45994787的博客
05-06 2634
官方文档指路：Vite官网Vite（法语意为 "快速的"，发音/vit/，发音同 "veet"）是由Vue团队开发的打包工具，在使用Vue3进行项目开发时推荐使用Vite进行打包，其支持性要比传统打包工具更好。Vite相比于传统的Webpack相比具有更快的打包速度。Vite通过将应用分为依赖和源码两类，改进了开发服务器启动时间。Vite会瞬间开启一个服务，不会预先编译所有文件，而是等到浏览器需要用到某个文件时，Vite再去请求、编译并响应到客户端。
搭建你的项目脚手架 — vue3.x + typescript4.x + vite2.x + pinia2.x
weixin_43822185的博客
11-14 1320
搭建你的项目脚手架 — vue3.x + typescript4.x + vite2.x + pinia2.x
vite构建vue项目
m0_73420146的博客
07-03 1213
---------- 使用create-vue搭框架(可选router和pinia) ------------------------- 使用vite搭框架(没有router和pinia) -------------------------- 组件库element-plus ---------------------- 预处理器 Sass ---------------------- 配路由 ------------------------- 配代理 -------------
Vite 插件使用全攻略（含自动导入）
最新发布
Jinxiansen0211的博客
06-09 466
这篇文章详细介绍了Vite插件的使用方法和推荐配置。主要内容包括：1) 插件的作用，如自动导入、路径别名、Mock数据等；2) 7个常用插件的具体配置方法，包括自动导入API/组件、路径别名、Mock接口、压缩构建产物等；3) Vue项目的推荐插件组合；4) 强调插件对提升开发效率的重要性。文章提供了完整的代码示例，帮助开发者快速搭建现代化的Vite开发环境，适合Vue 3+Vite项目参考使用。
Vite创建Vue3项目以及Vue3相关基础知识
2201_75705263的博客
10-16 2575
Vite创建Vue3项目以及Vue3相关基础知识,ts,typeScript,mitt,pinia,
保姆级教你用Vite构建第一个Vue3项目
qwerwejgw的博客
02-18 5234
vite开箱即用，无需任何配置
手把手教你用Vite构建第一个Vue3项目
再小的帆也能远航，把分享变成一种习惯
09-04 1万+
今天就来说说怎么创建第一个Vue3项目。并安装Element Plus 及一些常用配置，最终实现一个简单增删改查页面
Vite-demo：使用vite工具，初始化vue3.x项目
02-13
在本文中，我们将深入探讨如何使用 Vite 初始化并运行一个 Vue 3.x 项目。首先，我们需要确保我们的计算机上已经安装了 Node.js 和 npm 或者 Yarn，因为它们是 Vite 集成开发环境（IDE）的基础。 1. **安装 Vite** ...
基于vite2.x + vue3.x + ant-design-vue3.x + typescript基础后台管理系统模板
07-08
【描述】：这个项目是一个现代的、高效的基础后台管理系统模板，它结合了最新的前端技术栈，包括vite2.x作为构建工具，vue3.x作为前端框架，ant-design-vue3.x用于UI组件，以及typescript提供静态类型检查和更强大的...
(源码)基于uniapp和Vue 3.x的项目工程化搭建.zip
03-18
# 基于uniapp和Vue 3.x的项目工程化搭建 ## 项目简介 本项目是一个基于uniapp和Vue 3.x的前端工程化搭建示例，旨在为开发者提供一个高效、规范的前端开发环境。项目集成了多种前端开发工具和技术，包括代码规范...
vite构建vue3项目
BREATH_YOUSELF的博客
06-25 259
---------- 使用create-vue搭框架(可选router和pinia) ------------------------- 使用vite搭框架(没有router和pinia) -------------------------- 组件库element-plus ---------------------- 预处理器 Sass ---------------------- 配路由 ------------------------- 配代理 -------------
vite 搭建vue3 TS项目初始框架
xhc6666的博客
01-07 2713
使用 vite 搭建 vue3 的项目模板，使用TS语法
【vue3】使用vite构建vue3项目
热门推荐
嗨，朋友你好！我是前端领域的工作者
03-30 3万+
使用vite构建vue3项目、vite介绍、vite对比webpack
vue3 + vite
WJLSH123的博客
04-26 7935
端口控制 + 跨域 在vite.config.js文件中 import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import path from 'path'; // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], base: "./",//打包路径 resolve: { alias: {
使用 Vite 创建 Vue 3 项目：从零开始的详细指南
01-13 5425
在现代前端开发中，构建快速、灵活的项目至关重要。Vue 3 作为一种流行的 JavaScript 框架，以其卓越的性能和易用性受到开发者青睐。而 Vite 则是一个新兴的构建工具，旨在提供更快的开发体验。本文将详细描述如何使用 Vite 创建 Vue 3 项目，并深入分析项目结构，助你快速上手。
vue3---vite的基本使用
厚积薄发.
08-15 4061
在工程化的项目中，vue 要做的事情很单纯：通过 main.js 把 App.vue 渲染到 index.html 的指定区域中。③ main.js 把 App.vue 渲染到了 index.html 所预留的区域中。assets 目录用来存放项目中所有的静态资源文件（css、fonts等）index.html 是 SPA 单页面应用程序中唯一的 HTML 页面。src 是项目的源代码目录（程序员写的所有代码都要放在此目录下）index.css 是项目的全局样式表文件。......
使用Vite构建Vue3组件库
咚の窝
07-13 7112
自从使用上vite和vue3后就爱不释手了，vite的秒级启动速度属实香，再加上vue3的CompositionAPI和setup语法糖的使用简便性，工作中新项目已经开始用这一套了。而且现在vite和vue3的第三方生态支持已经很好了（ps：可能还有些库不太兼容），所以打算借着这个机会再熟悉一下搭建与发布npm库的流程，之前基于vue-cli搭建过基于vue2的组件库vue-starry-sky，顺便也记录了一下搭建流程。所以打算升级一下这个库，使用vite和vue3来构建新的vue3-starry-sky
Vue3——Vite篇
警警的博客
09-24 4453
Vite是一款由Vue.js的作者尤雨溪开发的前端构建工具，专为现代前端项目而设计。它以其快速的冷启动、按需编译和热更新能力而受到广泛关注。以下是对Vite的详细解析：Vite的配置文件是Vite项目中的核心配置文件，通过该文件可以对项目的开发服务器、插件系统、打包配置等进行自定义。常见的配置项包括：Vite非常适合用于现代前端项目的开发，特别是在需要快速启动、热更新和良好开发体验的场景下。例如，在开发Vue、React等单页面应用（SPA）时，Vite能够显著提升开发效率，降低开发成本。Vite作为一款现
vue3使用vite创建项目【2分钟】
LuiChun
07-10 1914
命令讲解 【查看版本】 [dalaojun@localhost luichunvue]$ node -v v14.15.0 [dalaojun@localhost luichunvue]$ npm -v 7.19.1 [dalaojun@localhost luichunvue]$ vue -V @vue/cli 4.5.13 【升级vue】 cnpm update -g @vue/cli 【显示下面的是表示已经弃用，不用理会】 [dalaojun@localhost luichunvue]$ npm u
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值