关键词：
一、环境搭建
首先，请确保已经安装了代码编辑器和浏览器，如果没有安装推荐安装VSCode和Chrome浏览器。
其次是安装 Node.js，如果你的系统中还没有安装 Node.js ，可以进入 Nodejs 官网下载相应的安装包进行手动安装；如果已经安装了 Node.js，你可以使用这个命令检查一下 Node.js 版本。
node -v
如果安装了多个版本的Node.js，推荐使用 nvm 工具切换 Node.js 版本。安装完 Nodejs 之后，包管理器npm也会被自动安装，你可以执行下面的命令来验证。
npm -v
当然，在现代的前端项目中，我非常不推荐使用 npm 作为项目的包管理器，甚至也不再推荐yarn(npm 的替代方案)，因为两者都存在比较严重的性能和安全问题，而这些问题在 pnpm 中得到了很好的解决。使用pnpm之前，需要先安装它，命令如下:
npm i -g pnpm
由于默认的镜像源在国外，包下载速度和稳定性都不太好，因此我建议你换成国内的镜像源，这样pnpm install命令的体验会好很多。
pnpm config set registry https://registry.npmmirror.com/
二、初始化项目
接下来，我们需要初始化一个Vite项目，可以在终端命令行中输入如下的命令来初始化Vite项目。
pnpm create vite
在执行完这个命令后，pnpm 首先会自动下载 create-vite 这个第三方包，然后执行这个包中的项目初始化逻辑。
首先，是输入项目名称，这里你可以输入vite-project，然后按下回车，进入选择前端框架的部分：
✔ Project name: vite-project
? Select a framework: › - Use arrow-keys. Return to submit.
vanilla // 无前端框架
vue // 基于 Vue
> react // 基于 React
preact // 基于 Preact（一款精简版的类 React 框架）
lit // 基于 lit（一款 Web Components 框架）
svelte // 基于 Svelte
Vite 内置了以上不同前端框架的脚手架模板，这里我们选择react框架，，紧接着选择react-ts完成命令交互。等待脚手架的模板生成完毕，接下来执行如下命令在本地启动项目：
// 进入项目目录
cd vite-project
// 安装依赖
pnpm install
// 启动项目
pnpm run dev
前端如何搭建ui组件库/封装插件(从零到有)(代码片段)
...件，其他项目直接将compents下的组件复制，粘贴到项目中使用，缺点是维护起来，改一个项目，其他项目也需要修改，所以，自己研究准备去封装一个组件库，前言日常在项目中我们经常直接根据npminstall/npmi去安装插件/组件库例... 查看详情
从零开始建站-后端项目搭建(代码片段)
...at+MySQL，Springboot是在Spring的基础上做了集成和配置简化，使用起来超级舒服。一、搭建Springboot框架1.框 查看详情
基于最新vite+vue3+vantui移动端应用项目搭建(代码片段)
...口，并表示自己”再也回不去webpack了“。这里记录下使用最新的Vite+vue3和有赞出品的Vant移动端UI库搭建移动端应用的过程。目录Vite的优点Vite项目创建集成VantUI移动端组件库 移动端rem适 查看详情
搭建vitest前端单元测试环境(代码片段)
...可以做到与Vite通用配置。也就是说，如果你在Vite中使用插件支持了JSX语法，做单元测试的时候就无需再配置一遍了，这点非常重要。并且Vite兼容了大部分Jest的使用方法，这样以往Jest的使用经验依然可以用在Vites... 查看详情
使用vite搭建vue3的项目(代码片段)
一、目标：使用vite搭建一个Vue3的项目，并启动成功。二、准备工作首先你要有Node.js、VSCode编辑器、Chrome浏览器关于下载的问题Node.js可以去官网下载链接：http://nodejs.cn/download/下载左边的长期支持版本就好，最新... 查看详情
使用vite和typescript带你从零打造一个属于自己的vue3组件库
...件库是如何被打造出来的吗?读完这篇文章你将学会:如何使用pnpm搭建出一个Monorepo环境如何使用vite搭建一个基本的Vue3脚手架项目如何开发调试一个自己的UI组件库如何使用vite打包并发布自己的UI组件库作为一个前端拥有一个属 查看详情
vue3从零开始搭建简单干净的后台管理系统(代码片段)
...页面框架，主要用到VUE3+Element-plus1.生成项目这里使用vite生成项目，理由就是vite比webpack编 查看详情
vue-用vue-cli从零开始搭建一个vue项目(代码片段)
...一个整体合理拆分为一个一个小块（组件），组件可重复使用；数据驱动是前端的未来发展方向，释放了对DOM的操作，让DOM随着数据的变化自然而然的变化（尤神原话），不必过多的关注DOM，只需要将数据组织好即可。本文用Vue... 查看详情
react17+vite+echarts实现疫情数据可视化「02快速搭建项目」(代码片段)
...ECharts实现疫情数据可视化「01项目介绍篇」文章目录快速搭建项目介绍ViteVite特点搭建第一个Vite项目项目结构介绍联系&期待下一篇快速搭建项目在上一篇React17+Vite+ECharts实现疫情数据可视化「01项目介绍篇」我们进行了... 查看详情
react17+vite+echarts实现疫情数据可视化「02快速搭建项目」(代码片段)
...ECharts实现疫情数据可视化「01项目介绍篇」文章目录快速搭建项目介绍ViteVite特点搭建第一个Vite项目项目结构介绍联系&期待下一篇快速搭建项目在上一篇React17+Vite+ECharts实现疫情数据可视化「01项目介绍篇」我们进行了... 查看详情
入门react17+vite+echarts实现疫情数据可视化「02快速搭建项目」(代码片段)
...ECharts实现疫情数据可视化「01项目介绍篇」文章目录快速搭建项目介绍ViteVite特点搭建第一个Vite项目项目结构介绍联系&期待下一篇快速搭建项目在上一篇【入门】React17+Vite+ECharts实现疫情数据可视化「01项目介绍篇」我... 查看详情
入门react17+vite+echarts实现疫情数据可视化「02快速搭建项目」(代码片段)
...ECharts实现疫情数据可视化「01项目介绍篇」文章目录快速搭建项目介绍ViteVite特点搭建第一个Vite项目项目结构介绍联系&期待下一篇快速搭建项目在上一篇【入门】React17+Vite+ECharts实现疫情数据可视化「01项目介绍篇」我... 查看详情
使用vite开发博客园皮肤(代码片段)
前置Vite是一种新型前端构建工具，能够显著提升前端开发体验。Vite十分适合awescnb的架构，最近，我将awescnb重构完成，现在可以更加愉快地构建博客园皮肤了。环境准备Node.js点击下载Git点击下载推荐vscode点击下载准备工作将awes... 查看详情
从零搭建移动h5开发项目实战(代码片段)
...页，简单的展示页。（支持浏览器的地方就能展示，就能使用）H5适合做产品最小原型，开发效率快（一份代码跑两个平台）H5适合还不成熟需要频繁迭代的产品移动开发之荡移动h5开发和桌面web开发有许多不同的地方，一个传统... 查看详情
从零搭建移动h5开发项目实战(代码片段)
...页，简单的展示页。（支持浏览器的地方就能展示，就能使用）H5适合做产品最小原型，开发效率快（一份代码跑两个平台）H5适合还不成熟需要频繁迭代的产品移动开发之荡移动h5开发和桌面web开发有许多不同的地方，一个传统... 查看详情
从零开始搭建一个react项目(代码片段)
如果只是想试试React，那么建议使用create-react-app来创建一个react项目。快速开始因为create-react-app和vue-cli不一样，create-react-app将webpack的相关配置直接封装好了，所以自定制化程度不高，所以考虑手动构建一个React项目代码下... 查看详情
使用vue脚手架(vue-cli)从零搭建一个vue项目(代码片段)
...odejs.org/en/）下载并安装node即可，安装node以后就可以正常使用npm命令全局安装vue-cli工具：npminstallvue-cli-g开始创建项目：找一个合适的位置，打开命令窗口，使用vue初始化基于webpack的新项目 vueinitwebpac 查看详情
从零开始使用vite+vue3+pinia+naiveui搭建简单后台管理系统
....config.js文件，引入组件然后在plugins内添加配置这里naiveui使用的是按需自动引入，具体可参考官方文档：按需引入（TreeShaking）-NaiveUI笔者添加了一些打包的配置，不需要可以忽略。配置完成后的样子：在src目录下新建plugins文件... 查看详情