使用Vite从零搭建前端项目的详细过程

目录
  • 一、环境搭建
  • 二、初始化项目

一、环境搭建

首先，请确保已经安装了代码编辑器和浏览器，如果没有安装推荐安装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

到此这篇关于使用Vite从零搭建前端项目的文章就介绍到这了,更多相关Vite搭建前端项目内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue3+script setup+ts+Vite+Volar搭建项目

    Vue3+script setup+ts+Vite+Volar搭建项目

    目录 使用 Vite 创建 vue + ts 项目 Vue 3 的三种语法 Option API Composition API script setup(Composition API 的语法糖) 安装 Volar 结尾 好久没有写了,最近看到Vue3.2 发布了,害,又要开始卷了么. 其实我自己本身还没有使用过Vue3 做过实际的项目开发,然鹅又出新东西了--, 新时代农民工真的是左手工作,右手游戏,还要用jio去学习呢. 什么? 你说谈对象? xswl,我特么一个农民工也配谈对象? 不卷不

  • 如何使用vite搭建vue3项目详解

    目录 一:npm构建 二:更改http://localhost:3000/到8080与Network路由访问 三:配置vite别名(npm install @types/node --save-dev) 四 :路由(npm install vue-router@4) 五:vuex(npm install vuex@next --save) 六:Eslint(可选)(npm install --save-dev eslint eslint-plugin-vue) 七:less/sass(可选)(n

  • vite构建项目并支持微前端

    目录 基础配置 支持微前端构建 其他说明 1. 老旧浏览器的支持 2. 关于 TypeScript 的说明 3. 对接 CDN 4. 构建出错 4.1 找不到包 4.2 请求超时 4.3 导入模块出错 小结 得益于 esbuild 的超高性能,vite 在诞生之初就备受关注,且一直保持着活跃的开发迭代.截至目前,vite 已经迭代到了 2.7.10 版本,各方面也基本具备了在生产使用的条件.这段时间,我在项目中尝试了使用 vite 进行打包构建,本文就是这次构建的过程记录. 基础配置 首先使用v

  • vite+vue3.0+ts+element-plus快速搭建项目的实现

    vite+vue3.0+ts+element-plus快速搭建项目的实现

    vite 出了 2.x 版本,抱着学一学的心态决定出个简单的项目,结合 element-plus,以及将会成为每位前端必会的 typescript,实现了如下内容. vite是一个由原生 ESM 驱动的 Web 开发构建工具.在开发环境下基于浏览器原生 ES imports 开发,在生产环境下基于 Rollup 打包. vite 作用 快速的冷启动:不需要等待打包操作: 即时的热模块更新:替换性能和模块数量的解耦让更新飞起: 真正的按需编译:不再等待整个应用编译完成,这是一个巨大的改变. 使用的

  • vite的搭建与使用的详细步骤

    vite的搭建与使用的详细步骤

    目录 1.安装: 2.在vite项目中使用TypeScript 3.vite项目使用less sass scss 4.vite打包 5.下面就来创建一个标准的项目 实际开发中编写的代码往往是不能被浏览器直接识别的,比如ES6,TypeScript,Vue文件等.所以此时我们必须通过构建工具来对代码进行转换,编译,类似的工具有webpack,rollup,parcel.但是随着项目越来越大,需要处理的javascript呈指数级增长,模块越来越多.构建工具需要很长时间才能开启服务器,HMR也需要几

  • 使用Vite从零搭建前端项目的详细过程

    使用Vite从零搭建前端项目的详细过程

    目录 一.环境搭建 二.初始化项目 一.环境搭建 首先,请确保已经安装了代码编辑器和浏览器,如果没有安装推荐安装VSCode和Chrome浏览器. 其次是安装 Node.js,如果你的系统中还没有安装 Node.js ,可以进入 Nodejs 官网下载相应的安装包进行手动安装:如果已经安装了 Node.js,你可以使用这个命令检查一下 Node.js 版本. node -v 如果安装了多个版本的Node.js,推荐使用 nvm 工具切换 Node.js 版本.安装完 Nodejs 之后,包管理器

  • 使用Vite+Vue3+TypeScript 搭建开发脚手架的详细过程

    目录 Vite前端开发与构建工具 Vue3 与 Vue2区别 TypeScript 使用Vite创建脚手架 1.创建项目文件夹 2.选择Vue 3.选择TypeScript 4.完成后可以看到项目文件夹(my-vue-app) 配置文件引用别名 alias 修改 vite.config.ts 文件配置(此时:会报错 path 未定义,接下来定义path) 定义path,修改tsconfig.json 安装css处理器插件scss 配置全局scss样式(在src/assets 下创建style 文

  • 使用vue-cli搭建SPA项目的详细过程

    目录 一.vue-cli构建SPA项目及SPA项目结构介绍 1.1利用vue-cli构建SPA 1.2spa的访问过程: 1.3如何安装vue-cli命令 二.SPA完成路由的开发 步骤 三.嵌套路由 一.vue-cli构建SPA项目及SPA项目结构介绍 vue-cli是vue.js的脚手架,用于自动生成vue.js+webpack的项目模板,创建命令如下: vue init webpack xxx 注:xxx 为自己创建项目的名称:必须先安装vue,vue-cli,webpack,node等一

  • docker+Nginx部署前端项目的详细过程记录

    目录 相关配置安装 创建配置文件 项目打包与部署 一个相关报错: 总结 相关配置安装 安装Docker yum install docker 启动服务 start docker systemctl start docker Docker中拉取nginx镜像 docker pull nginx 创建配置文件 我们需要在根目录下创建Dockerfile文件和default.conf文件. 其中default.conf文件的名称是什么无所谓,只要在配置文件中注意使用相同名称即可. Dokcerfile

  • 详解vite+ts快速搭建vue3项目以及介绍相关特性

    vite 尤大在 Vue 3.0 beta 直播中推荐了 vite 的工具,强调:针对Vue单页面组件的无打包开发服务器,可以直接在浏览器运行请求的 vue 文件 很新颖,这篇博客用它来搭建一个 vue3 的项目试试 Vite 是面向现代浏览器,基于原生模块系统 ESModule 实现了按需编译的 Web 开发构建工具.在生产环境下基于 Rollup 打包 快速冷启动服务器 即时热模块更换(HMR) 真正的按需编译 node >= 10.16.0 搭建 使用 vite 搭建项目 npm init

  • 使用IDEA搭建一个简单的SpringBoot项目超详细过程

    使用IDEA搭建一个简单的SpringBoot项目超详细过程

    一.创建项目 1.File->new->project: 2.选择"Spring Initializr",点击next:(jdk1.8默认即可) 3.完善项目信息,组名可不做修改,项目名可做修改:最终建的项目名为:test,src->main->java下包名会是:com->example->test:点击next: 4.Web下勾选Spring Web Start,(网上创建springboot项目多是勾选Web选项,而较高版本的Springboo

  • Springboot入门案例及部署项目的详细过程

    Springboot入门案例及部署项目的详细过程

    今天闲来无事就来学习一下SpringBoot框架,顺手搭了一个入门小案例. Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置.通过这种方式,Spring Boot致力于在蓬勃发展的快速应用开发领域(rapid application development)成为领导者. 这篇入门案例使用的是Springboot1.5.9,可能最新的已经更简单了,创建的

  • postgresql数据库安装部署搭建主从节点的详细过程(业务库)

    postgresql数据库安装部署搭建主从节点的详细过程(业务库)

    操作系统 64位CentOS 7 数据库搭建 一 业务数据库搭建 1. 安装 yum源(服务器可访问互联网时用) yum install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-7-x86_64/pgdg-redhat-repo-latest.noarch.rpm 2. 安装客户端 yum install postgresql11 –y 3. 安装服务端 yum install postgresql11-serve

  • vue2.x+webpack快速搭建前端项目框架详解

    vue2.x+webpack快速搭建前端项目框架详解

    一.本文将分享如何快速搭起基于webpack+vue的前端项目框架,利用vue的自己的脚手架工具vue-cli搭建起基本的环境配置,再通过npm包管理工具引入相应的依赖来完善项目的各种依赖框架.下面是具体实操. 二.基本命令操作. 1.在开发之前需要首先安装node.js,直接百度搜索或者在其中文官网也可以下载http://nodejs.cn/download/ 在装完node之后npm包管理工具也自动的安装好,安装完之后,在命令行输入node -v或者npm -v,出现版本号说明安装成功.如下

  • 详解nodejs解压版安装和配置(带有搭建前端项目脚手架)

    nodejs 安装 我先前用了nvm,觉得nvm挺厉害可以随时更换nodejs版本,但是研究了下,可能自己功力不够还是什么,并不好用,中间还出现了错误:所以最后还是卸载了: 本文图文并茂的一步一步的来,旨在好用简洁: 1]第一步:下载nodejs 中文官网: https://nodejs.org/zh-cn/download/ 如下图是最新的版本,不用怕这是最新的直接下载就可以了,选择windows版本,LTS是长期支持版本,箭头所示下载64位压缩版:个人觉得压缩版本就够了:(可能安装版的功能更

随机推荐