怎么搭建第一个 Vite 项目

简介: 怎么搭建第一个 Vite 项目

第一步:安装 node

Vite 需要 Node.js 版本 14.18+,这里我们使用 nvm 进行安装,可以参考我这篇文章:怎么使用 nvm 控制 nodejs 版本切换?

nvm install 14.18.0

使用 14.18.0

nvm use 14.18.0

可以使用 node -v,·npm -v· 查看版本

第二步:安装 yarn

npm install -g yarn

第三步:创建项目

我们使用下面命令创建项目,先命名,然后选择 vue 跟 ts 即可

yarn create vite

就能看到项目已经生成了。

第四步:启动服务

然后按照下面的顺序执行即可

cd decade-open-source
yarn
yarn dev

这样一个 vite 项目就搭建好了

目录
相关文章
|
JavaScript 前端开发 Cloud Native
Vue.js新手指南:从零开始建立你的第一个应用
Vue.js新手指南:从零开始建立你的第一个应用
74 0
|
2月前
|
JavaScript
使用npm,快速构建第一个vue项目
本文介绍了如何使用npm快速构建第一个Vue项目。步骤包括确保安装了Node.js并且配置了正确的环境变量,创建一个空文件夹并使用VSCode打开,通过VSCode的终端执行`npm init vue@latest`命令以初始化项目,选择默认配置即可。接着安装项目依赖并启动开发服务器,最后通过浏览器访问开发服务器提供的本地地址查看项目运行结果。文章还提供了相关代码和操作截图。
|
3月前
|
前端开发 Java C++
超简单使用Vite+Vue3构建共享开发和分模块打包的前端项目
使用Vite和Vue3构建支持共享组件和分模块独立打包的前端项目的方法。
432 0
超简单使用Vite+Vue3构建共享开发和分模块打包的前端项目
|
6月前
|
缓存 前端开发 JavaScript
Vite 打包优化:全面解析与实践
Vite 作为新一代前端构建工具,以其快速开发体验和高效打包能力著称。然而,在实际项目开发中,为了进一步提升性能和用户体验,我们仍需对 Vite 打包进行优化。本文将深入探讨 Vite 打包优化策略,涵盖代码拆分、资源压缩、缓存利用、构建配置等多个方面,并提供实践案例和最佳实践建议,帮助开发者充分释放 Vite 的潜力。
1634 1
|
11月前
|
资源调度 JavaScript Java
使用vue-cli搭建SPA项目->spa项目的构建,基于spa项目路由完成,基于spa项目完成嵌套路由
使用vue-cli搭建SPA项目->spa项目的构建,基于spa项目路由完成,基于spa项目完成嵌套路由
66 0
|
JavaScript
vue项目分环境进行打包
vue项目分环境进行打包
92 0
|
JavaScript 前端开发
vue-cli 工程目录结构详介绍
vue-cli 工程目录结构详介绍
118 0
|
JavaScript 前端开发 开发工具
从0搭建Vue3组件库:使用gulp自动化处理打包与发布
从0搭建Vue3组件库:使用gulp自动化处理打包与发布
574 0
|
JavaScript 算法 开发工具
HbuilderX创建第一个vue项目
HbuilderX创建第一个vue项目
177 0
|
前端开发 JavaScript 开发工具
从头开始搭建一个Nuxt3模板项目
Nuxt3在今年的4月分发布RC版本,到现在也已经大半年了,估计用不了多久正式版也就该发布了,也该是时候体验一下Nuxt3了。 这个项目模板已经包含了以下的内容 🎨 使用Tailwind作为CSS组件库,并安装daisyUI插件,关于daisyUI可以参考:daisyUI快速上手; 💪 ESlint和Stylelint代码检验; 🐶 创建Git commit message规范校验; 🎉 天然支持Vue3、Typescript、Vite等; 🍍 集成Pinia作为状态管理; 🥤 集成vueuse作为Hooks库; 🎊文件式路由、componentsAPI自动导入、组件自动导入
3005 1
从头开始搭建一个Nuxt3模板项目