第0讲：创建一个Vite工程

已于 2024-06-19 22:41:08 修改
阅读量209 收藏
点赞数 2
分类专栏： pixi.js 文章标签： Pixi
于 2024-06-16 13:47:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xeon_cc/article/details/139719432
版权

打开cmd窗口。

npm create vite@latest

然后输入项目名，这里起名为gamelets（很多小游戏的意思）

接下来选择框架为： Vanilla （表示不使用框架，原生JS）
选择语言为：TypeScript

最后提示：

Done. Now run:

cd gamelets
npm install
npm run dev

Xeon_CC
关注
专栏目录
vite搭建完整项目
H524268015wsw的博客
06-05 1万+
（4）cd + 项目名称 进入 npm install初始化，简写（npm i） 最后 npm run dev。（2）在src/assets文件夹下新建，scss文件夹(文件名称随意)，在文件夹下新建main.scss文件。（1）点击链接进入，选择使用安装命令。（2）输入命令后，回车，输入项目名称，昵称随意，我这里用的是 viteprojects，回车。（1）点击上方网址，进入vite官网，选择一个命令安装方式。（3）在vite.config.js文件中添加配置。（1）在项目终端中输入面的命令。
手把手教你用Vite构建第一个Vue3项目
再小的帆也能远航，把分享变成一种习惯
09-04 6257
今天就来说说怎么创建第一个Vue3项目。并安装Element Plus 及一些常用配置，最终实现一个简单增删改查页面
vue3第一章基础：创建Vue3.0工程，包括使用vue-cli 创建、使用 vite 创建
刘大猫
07-13 493
vue3基础：创建Vue3.0工程，包括使用vue-cli 创建、使用 vite 创建
【VUE基础】VUE3第一节—vite创建vue3工程
TT小子的博客
07-03 1272
Vite项目中，index.html是项目的入口文件，在项目最外层。加载index.html后，Vite解析指向的JavaScript。Vue3**中是通过 **createApp函数创建一个应用实例。
怎么搭建第一个 Vite 项目
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
03-19 334
我们使用下面命令创建项目，先命名，然后选择 vue 跟 ts 即可。这样一个 vite 项目就搭建好了。，·npm -v· 查看版本。然后按照下面的顺序执行即可。就能看到项目已经生成了。
《从零开始学习Vite》 第一章：搭建前端项目
vettel的博客
05-22 1009
我会给大家系统梳理 Vite 知识，认识构建工具本身的价值，学会 Vite 基本的功能使用，让你能够独立搭建一个相对完整的脚手架项目。
《从零开始学习Vite》 第二章：接入 CSS 工程化方案
vettel的博客
05-24 1024
CSS 方案是前端工程化必不可缺的，在最原始的开发阶段都是手写原生的 CSS，但原生 CSS 存在浏览器兼容问题、开发体验差、样式污染、打包产物体积过大等诸多问题，因此社区出现了不少 CSS 工程化解决方案，有CSS 预处理器、CSS Modules、PostCSS 、CSS in JS 和 CSS 原子化框架，下面我们将在 Vite 中落地这些 CSS 工程化方案。
Vue技术栈-Vite最新版创建一个Vue3项目
记录开发和安全学习过程中的点点滴滴
08-11 1054
在构建大型应用时，JavaScript代码量的急剧增加往往导致开发工具性能下降，在开发服务器启动时间延长至数分钟，以及即使启用模块热替换技术，代码更改后的更新效果在浏览器中的反映也需要数秒。这种缓慢的反馈循环严重降低了开发效率，并对开发者的工作满意度产生了负面影响。快速创建项目：使用脚手架可以快速搭建项目基本框架，避免从零开始搭建项目的重复劳动和繁琐操作，从而节省时间和精力。统一的工程化规范：前端脚手架可以预设项目目录结构、代码规范、git提交规范等统一的工程化规范，让不同开发者在同一个项目上编写出风格一致
(Vue) 创建Vue3工程 (vite / vue-cli)
cuber-lotus的博客
02-20 1771
文章目录vite 创建Vue3工程vite介绍创建流程初始化项目安装依赖包启动工程vue-cli 创建Vue3工程进入手动创建选择所需功能选择2.x 还是3.x询问配置创建完毕运行查看END 从2022年2月7日起vue3成为了默认版本，而创建vue3与vue2是否又有什么异同点呢？ 本文将用vite和vue-cli两种方式带你创建vue3工程 vite 创建Vue3工程 vite介绍 Vite中文网 vite是尤雨溪团队专门打造的前端开发与构建工具。也是自vue3发布以来尤雨溪一直强力推荐的工具~~
Vite系列(二)：我基于Vite搞了一个项目模板
qq_43313205的博客
09-25 1295
Vite系列(二)：我基于Vite搞了一个项目模板 - 因卓诶-爱分享爱原创Blog​www.yinzhuoei.com/index.php/archives/570/vue3-vite2-ts-template托管地址: github-vue3-vite2-ts-template[x] 使用最新版本的 vite 和 vue3[x] antdv 真正意义上的按需加载组件以及组件css[x] git 提交前的 lint-stage+husky 校验和美化代码（prettier）, 多人协作风格统一[x] 开发
如何用vite 创建一个包含pinina，sass，修改图片保存路径的vue3.0工程
04-26
下面是使用vite创建一个包含pinina，sass，修改图片保存路径的vue3.0工程的步骤： 第一步：安装vite和vue-cli 在终端中运行以下命令，安装vite和vue-cli： ``` npm install -g vite @vue/cli ``` 第二步：创建...
从零搭建一个Vite-react脚手架(附源码)
petertanjinjie的博客
07-30 868
写在开头（边听歌边看效果更佳）在之前，已经很多朋友已经升级到了vite,但是大部分都是vue的项目，那么今天我们把之前webpack的react项目升级到vite!为此，为了让大家少踩坑，...
Vite + Vue3 实现前端项目工程化
前端知识分享喵
05-10 882
Vue3 发布至今，周边的生态、技术方案已足够成熟，个人认为新项目是时候切换到 Vite + Vue3 了。今天就给大家操作一下这种技术方案实现前端工程化。
前端：一篇彻底搞懂Vite/Webpack(比较/区别)
GIS摆渡人
04-29 4274
文章目录一.Webpack1. Webpack的HMR2. webpack-dev-server的热更新：3. 原理二.Vite1. Vite2的HMR2. esbuild3.Vite原理: 一.Webpack 1. Webpack的HMR 第一次冷启动慢的原因： 在之前的浏览器中没有模块化的设计，所以期望把所有源代码编译进一个 js 文件中提供给浏览器使用，所以在开发中当我们运行启动命令的时候，webpack 总是需要从入口文件去索引整个项目的文件，编译成一个或多个单独的 js 文件，即使采用了代码拆分，
汽车车轮钢圈加工机_三维3D设计图纸.zip
10-05
汽车车轮钢圈加工机_三维3D设计图纸.zip
问题汇总_C语言、数据结构.docx
最新发布
10-05
问题汇总_C语言、数据结构.docx
河北中医药大学在辽宁2020-2024各专业最低录取分数及位次表.pdf
10-05
那些年，与你同分同位次的同学都去了哪里？全国各大学在辽宁2020-2024年各专业最低录取分数及录取位次数据，高考志愿必备参考数据
基于Java语言的CP-RPC框架设计源码
10-05
该项目为基于Java语言的CP-RPC框架设计源码，总计包含202个文件，其中Java源文件71个，XML配置文件46个，Java类文件38个，属性文件7个，Kotlin模块定义4个，Idea项目文件3个，Protobuf定义文件2个，Git忽略规则文件1个。
快速创建一个vite项目
09-08
要快速创建一个Vite项目，你可以按照以下步骤进行操作： 1. 打开终端，输入以下命令来创建一个Vite项目： ``` npx create-vite@latest ``` 2. 终端会提示你输入项目名称，默认是`my-vite-project`，你可以根据需要修改项目名称。 3. 接下来，选择你要使用的前端框架。Vite支持多种框架，比如Vue、React、Preact等，你可以根据自己的需求选择合适的框架。 4. 选择语言类型，Vite支持TypeScript和JavaScript两种语言类型，你可以根据自己的喜好选择。 5. 创建完成后，进入项目目录，执行以下命令安装项目依赖： ``` cd my-vite-project npm install ``` 6. 安装完成后，可以通过以下命令启动项目： ``` npm run dev ``` 7. 项目启动后，你可以在浏览器中访问`http://localhost:3000`来查看运行结果。 通过以上步骤，你就可以快速创建一个Vite项目并开始开发了。请注意，Vite相对于其他构建工具（比如Webpack）具有更快的启动速度和热更新速度，尤其适用于小型项目和启动体量较大的项目。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值