- 综合排序
- 最热优先
- 最新优先
- 来自专栏前端小兵成长营
Vite - 搭建 React 项目
前言 日常放鸽，火钳刘明 这是一个基于 vite 搭建的 React 的项目，开发体验非常棒。 创建一个 Vite 项目 yarn create @vitejs/app ? 那么恭喜你，你可以正常开发 React 项目了。 完结撒花 “如果不行的话，直接看 vite 官网，它比我写的详细 ” ---- 改造工程 但上述只是一个基础的 React demo，在实际开发项目中，是远远不够的，需要额外做一些项目配置 目录约定 根据日常的开发习惯 依赖主入口 ├── .env // 环境变量配置 ├── vite.config.ts // vite 配置选型，具体可以查看官网 ” 上述是针对项目做了一些业务开发上的配置与约定，各位同学可以根据自己团队中的规定与喜好行修改。 其他配置 这里主要是关于 vite.config.ts 的配置，对项目整体做一些附加配置。
1.6K20发布于 2021-04-09 - 来自专栏腾讯新闻前端团队
wp2vite ~ 让webpack项目支持vite
[image.png] 在前段时间对wp2vite做了一次重构的更新，把之前的分情况处理改为了流式的处理; 第一版的wp2vite是先对项目进行判断，react项目走react的流程，vue的项目走vue 的流程； 第二版的wp2vite是流式，一条线完成，不分项目，这样的好处是逻辑更加清晰、代码复用性更强； wp2vite 第一版时仅对react项目进行了良好的支持，vue项目支持力度非常低；第二版在支持 react项目的基础上，对vue项目的支持力度更加友好， 同时因为是流式的渲染，即使不是react项目和vue项目，wp2vite也会为你的项目转为vite提供支持。 /webpack.config.js // 传递配置文件 wp2vite -v // 查看版本 待wp2vite命令执行完后，进行安装依赖和启动项目 // 安装依赖 npm install // 启动项目 当然如果转换过后的项目还有一些配置或者可以用脚本去实现的事情去做，你也可以参与贡献 ，我们也非常欢迎 如果你的项目是webpack，同时开发过程中启动慢、热加载慢，可以安装wp2vite尝试转成vite
1.4K131发布于 2021-08-18 - 来自专栏bug收集
使用vite 快速创建项目
bug收集：专门解决与收集bug的网站 网址：www.bugshouji.com 01 vite 介绍 vite: 下一代前端开发与构建工具。 02 vite 的使用 兼容性注意 Vite 需要 Node.js 版本 >= 12.0.0。 手动选择模板 1、npm init vite@latest 安装vite最新版 如果是第一次安装，会提示你安装对应的packages 选择 y 然后输入项目名字 vite-demo 然后选择框架 vue 或 react 默认就是vue3，不支持vue2 然后选择是否使用ts 2、进入项目，安装依赖再运行 cd vite-demo npm i npm run dev 直接选择模板创建 1、创建react项目 npm init vite@latest myreact --template react 2、进入项目，安装依赖再运行 cd myreact npm
59830编辑于 2022-12-14 - 来自专栏前端实验室
体验Vite快速构建项目
那么vite到底好在哪里,如何使用呢? 接下来由大师兄带你一起走进vite世界。 一. Vite简介 Vite是一种新型前端构建工具,能够显著提升前端开发体验。 项目搭建 1.环境准备 Vite需要Node.js版本 >=12.0.0 查看Node版本,如低于12.0.0 请升级 ➜ node -v ➜ v16.1.0 2.创建项目 # 使用npm ➜ npm init @vitejs/a # 安装依赖 ➜ npm install # 启动项目 ➜ npm run dev 浏览器输入地址后我们可以看到服务已启动 3.Vite配置文件修改 图中对比通过 vue-cli创建的项目,我们可以发现index.html在项目最外层而不是在public文件夹内。 这是有意而为之的:在开发期间Vite 是一个服务器，而index.html是该 Vite 项目的入口文件。 <!
80510编辑于 2022-12-02 - 来自专栏代码编写世界
nginx部署发布Vite项目
1 引言 在之前的文章《Ubuntu云服务器上部署发布Vite项目》中笔者使用了Vite提供的预览服务(npm run preview)来在云服务器上发布Web应用。 除此之外，笔者还有一些其他的需求： 前后端分离的项目，需要将后端的服务转发到前端服务IP相同的端口（443端口）。 子域名的项目，需要将服务转发到主域名服务IP相同的端口（443端口）。 不过上述两个问题后面在讨论，本篇就详细记录一下部署发布单个Vite项目的问题。 2 详述 2.1 操作 首先，还是需要先安装nginx： sudo apt install nginx 然后，准备Vite项目，需要确保项目已经通过npm run build构建好，并且生成了静态文件目录 2.3 优化 上述HTTPS服务的配置，经过笔者的实际测试，性能比不上Vite提供的预览服务(npm run preview)。
43210编辑于 2025-07-22 - 来自专栏技术综合
Vue 2.7 + Vite项目搭建
Vue 2.7 + Vite vue2.7 + vue-router3 + pinia 示例代码: https://github.com/klren0312/vite_vue2.7 示例页面: https ://klren0312.github.io/vite_vue2.7/ 用到的vite插件 @vitejs/plugin-vue2 vite的vue2.7插件 @vitejs/plugin-legacy : https://github.com/vuejs/vue/blob/main/CHANGELOG.md#vue-cli--webpack 使用官方的@vitejs/plugin-vue2插件 vite 创建vue项目后, 把插件替换下就行了 3. vue-router安装 vue2应该只支持vue-router3版本 4. pinia安装 按官方文档引入即可: https://pinia.vuejs.org 使用方法(element-ui为例): import Components from 'unplugin-vue-components/vite' import { ElementUiResolver
2.2K31编辑于 2022-07-08 如何使用 vite 创建项目
1、Vite简介 官方文档指路：Vite官网 Vite（法语意为 "快速的"，发音 /vit/，发音同 "veet"）是由Vue团队开发的打包工具，在使用Vue3进行项目开发时推荐使用Vite 项目文件越多，耗时越长。 vue-cli即vue脚手架是基于Webpack封装的，目前已处于维护模式。Vue官方推荐使用Vite来创建项目。 npm create vite@latest 2.1.1输入项目名称及其他要求 在Project name后面输入项目名称，默认为vite-project。 这里推荐使用第二种方式，可以在创建项目时就配置好TypeScript 和测试支持之类的可选功能 3. 设置项目 运行命令后，按提示操作： 项目名称：输入项目名称，如 my-vite-project。 安装依赖 进入项目目录并安装依赖： bash 复制 cd my-vite-project npm install 5.
2.4K10编辑于 2025-02-24- 来自专栏编程代码学习
基于Vite构建Vue项目
基于Vite搭建Vue项目(Vite 需要 Node.js 版本 14.18+，16+) npm create vite@latest 指定项目名称和模板创建 查看 npm 安装版本 npm -v 根据安装的 npm 的版本运行对应的代码 # npm 6.x npm create vite@latest my-vue-app --template vue # npm 7+, extra double-dash is needed: npm create vite@latest my-vue-app -- --template vue
32930编辑于 2023-06-06 - 来自专栏JavaPark
搭建 Vue + Vite 入门项目
文章目录 前言 webpack、Rollup、Vite 的区别 搭建 Vite 项目 总结 前言 虽然市面上有很多的打包工具，例如 webpack、Rollup 以及 Parcel 等。 经过查阅资料，这里简单给出下 webpack、Rollup 以及 Vite 的区别，先说一个总结论： webpack 更适合打包项目，Rollup 更适合打包库，而 Vite 基于 Rollup，实现了热更新的同时也十分适合打包项目 热更新，实现按需编译，不像 webpack 需全部重新编译并更新 搭建 Vite 项目 说完上边的内容之后，接下来就来看看，如何大家我们的第一个 Vite 项目。 如果我们只是要构建一个 Vite 项目，那么简单地使用以下命令即可。 如果一切正常，那么应该就会出现以下的界面了，至此我们的第一个 Vite + Vue 项目就搭建成功了！
68110编辑于 2022-06-08 - 来自专栏前端实验室
体验Vite快速构建项目
Vite简介 Vite是一种新型前端构建工具,能够显著提升前端开发体验。 在日常开发中,一般使用Webpack对项目进行构建编译,最后打包成Bundle文件。 项目搭建 1.环境准备 Vite需要Node.js版本 >=12.0.0 查看Node版本,如低于12.0.0 请升级 ➜ node -v ➜ v16.1.0 2.创建项目 # 使用npm ➜ npm init @vitejs/a # 安装依赖 ➜ npm install # 启动项目 ➜ npm run dev 浏览器输入地址后我们可以看到服务已启动 3.Vite配置文件修改 图中对比通过vue-cli 创建的项目,我们可以发现index.html在项目最外层而不是在public文件夹内。 这是有意而为之的:在开发期间Vite 是一个服务器，而index.html是该 Vite 项目的入口文件。 <!
1K00发布于 2021-11-06 - 来自专栏睡不着所以学编程
阅读源码 -【vite项目架构】
记录阅读源码的知识点-项目架构 为了省事,我们可以在项目架构时就把一切都准备好,虽然配置起来有点烦人,但是这样写项目的时候真的很方便很丝滑。 配置 // vite.config.ts import Components from 'unplugin-vue-components/vite' export default defineConfig unplugin-auto-import/vite"; import Components from "unplugin-vue-components/vite"; import { ElementPlusResolver 设置变量和vue-cli是不一样的,在vue-cli中必须以VUE_APP_开头,在vite中,必须以VITE_APP_开头 我们之前在使用vue-cli的时候可以用process.env获取环境变量, 注意 Vite 默认是不加载 .env 文件的，因为这些文件需要在执行完 Vite 配置后才能确定加载哪一个，举个例子，root 和 envDir 选项会影响加载行为。
86510编辑于 2023-08-22 【vite】搭建完整项目流程、项目配置
参考文章：vite搭建完整项目 完整项目源码 觉得创建太麻烦就直接从github克隆吧，https://github.com/fruge365/vite-common 项目技术栈： Vue3 + Vite + Js + Pinia + Navie UI 项目地址： 一、创建项目 1.选择一个你常用的命令进行安装 npm create vite@latest yarn create vite pnpm create vite bunx create-vite tips：使用vite创建项目需要查看自己电脑的node版本是都满足下图 2.打开 vsCode 点击终端，新建终端，也可以使用快捷键 )，在文件夹下新建main.scss文件 3.在vite.config.js文件中添加配置 import { defineConfig } from 'vite' import vue from ' 参考文章： 【Vite】配置文件详解 Vite的常见配置选项详细说明 也可以参考官方配置链接：Vite 官方中文文档
1.3K10编辑于 2025-12-15- 来自专栏技术社区
Vite实战：Vite快速搭建Vue3.0项目
Holle，大家好，最近发现Vue3.0版本都正式发布，然后去学习了一下，发现确实有很多和Vue2.0不一样的东西，下面呢，是Vue3.0推出的一个快速创建项目的管理工具——Vite！ 全局安装 npm install -g create-vite-app 进入想要创建项目的目录下新建 create-vite-app yourProjectName 进入新建的项目下安装相关依赖并运行 到这步项目就创建完成了，有没有发现创建项目特别快，比webpack快很多，当然啦，项目里后期需要什么东西需要自己在下载才能用。
52320编辑于 2022-06-16 - 来自专栏全栈开发工程师
【Vite基础】001-使用 Vite 创建 vue3 项目
【Vite基础】001-使用 Vite 创建 vue3 项目 一、Vite 概述 1、什么是 vite 项目构建工具。 2、优势 vite 方便，更快，更好用； 用了 esbuild 编译快。 其它 webpack 更全面； rollup 更专一； 二、使用 vite 创建 vue3 项目 1、创建项目 命令 官网：http://www.vitejs.net/guide/#scaffolding-your-first-vite-project 默认创建的是 vue3 项目！ npm init vite@latest 截图 第二步：设置项目名 直接输入，如 vite-vue3 第三步：设置包名 默认和项目名一致，我这里就不设置，直接回车了！ 第六步：创建完成 第七步：进入目录并安装依赖 第八步：运行项目 npm run dev 第九步：访问项目 http://127.0.0.1:5173/ 第十步：项目结构 三、说明 1、Vite
2.3K10编辑于 2025-01-06 - 来自专栏前端开发
Vite 项目中如何去集成 Sass
首先安装 pnpm add sass -D pnpm add sass-loader -D 样式方面我们首先是会想到要给项目进行默认样式的重置，此时我们应当去使用一个比较稳定的npm 包的样式重置代码： 通过查看文档：原来是需要这样来配置，如下就是集成 scss 全局变量的方法 先定义这么一个文件 vite.config.ts import { defineConfig } from 'vite ' import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' // 引入 svg 图标所需要的插件 import vue from '@vitejs /src/styles/variable/index.scss";' } } } }) 重新启动项目，现在就可以使用了：比如项目的主题色 宽高 层级… 都可以在这里定义了
49700编辑于 2024-05-24 - 来自专栏前端开发
Vite 项目中如何去集成 Mock 环境 （插件：vite-plugin-mock）
我们看到官网来进行 Mock 环境的集成： 传送门 安装插件 pnpm install -D vite-plugin-mock mockjs 配置 vite.config.ts import { defineConfig } from 'vite' import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' // 引入 svg 图标所需要的插件 import ; // https://vitejs.dev/config/ // command 区分项目所处的环境 export default defineConfig(({ command }) => { symbolId: 'icon-[dir]-[name]' }), viteMockServe({ enable: command === 'serve' // 保证项目开发阶段可以使用 /src/styles/variable/index.scss";' } } } } }) 之后在项目根目录创建 mock 文件夹，去创建我们需要的 Mock 数据和对应的接口
2.2K01编辑于 2024-05-24 - 来自专栏向治洪
使用Vite从零搭建前端项目
pnpm config set registry https://registry.npmmirror.com/ 二、初始化项目 接下来，我们需要初始化一个Vite项目，可以在终端命令行中输入如下的命令来初始化 Vite项目。 pnpm create vite 在执行完这个命令后，pnpm 首先会自动下载 create-vite 这个第三方包，然后执行这个包中的项目初始化逻辑。 首先，是输入项目名称，这里你可以输入vite-project，然后按下回车，进入选择前端框架的部分： ✔ Project name: vite-project ? 等待脚手架的模板生成完毕，接下来执行如下命令在本地启动项目： // 进入项目目录 cd vite-project // 安装依赖 pnpm install // 启动项目 pnpm run dev
85710编辑于 2022-08-11 - 来自专栏前端导学
使用vite+vue3搭建项目
npm i create-vite-app -g create-vite-app vue3demo cd vue3demo npm i npm run dev 查看vue-router最新版本 npm /assets/logo.png" /> <HelloWorld msg="Hello Vue 3.0 + <em>Vite</em>" /> <router-view></router-view> </template /assets/logo.png" /> <HelloWorld msg="Hello Vue 3.0 + <em>Vite</em>" /> name: {{$store.state.name}} < 安装sass npm i sass -D 安装完了之后 不需要额外配置，可以直接使用 源码地址 https://github.com/lilugirl/vite-vue3-boilerplate/tree
1.2K30发布于 2020-12-08 - 来自专栏前端开发随笔
Vue3+Vite上手搭建项目
构建命令 npm init vite-app <project-name> cd <project-name> npm install npm run dev 打包上线 先在文件夹根目录创建vite.config.js
1.1K20发布于 2020-12-21 - 来自专栏路过君BLOG from CSDN
vue3+vite项目中启用pwa
步骤 添加依赖 npm i vite-pwa-plugin -D 修改配置 vite.config.ts import {defineConfig} from 'vite' import vue from '@vitejs/plugin-vue' import {VitePWA} from 'vite-plugin-pwa' // https://vitejs.dev/config/ export default // 至少配置一个图标 icons: [{ // 注意如果应用不是部署在站点根目录则需要相对路径，图片文件放在项目 } }) ], base: './' }) 生成应用图标 https://realfavicongenerator.net/ 插件官方文档 https://vite-pwa-org.netlify.app
1.6K20编辑于 2023-04-21
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号