【vite】使用vite进行vue3项目构建

已于 2023-04-13 11:09:59 修改
阅读量538 收藏
点赞数
分类专栏： vite vue 文章标签： vue.js javascript
于 2023-04-13 11:03:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43287787/article/details/130125039
版权
vue 同时被 2 个专栏收录
4 篇文章 0 订阅
订阅专栏
vite
1 篇文章 0 订阅
订阅专栏

首先安装npm，yarn或pnpm任选其一即可，我选择的是pnpm

pnpm相比npm更快而且更稳定，npm在下载一些包的时候容易因为网络错误而失败。所有使用npm安装包的命令都可以替换成pnpm,同时pnpm run dev 等价npm run dev
注意:pnpm搭配node16以上的版本最佳。

使用pnpm安装vite

pnpm create vite@4.2.0 文件名

 按鼠标上下键选择框架，我选择的是vue

选择类型js 还是ts, 我选择的是 js

 然后根据提示的Now run中内容进行命令操作：

输入 cd lampmanage-ui-yh

 进入项目文件夹后，执行pnpm install，进行node_modules依赖包安装

 执行pnpm run dev ，即可启动项目

火锅加可乐de前端之路
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用vite 搭建vue 3的项目
weixin_52984349的博客
11-30 3909
使用vite 搭建vue 3的项目
Vite项目启动都做了什么？
梅花寺
01-16 2220
主要了解了下关于 vite 启动过程中，文件处理、热更新的执行过程，源代码中有很多细节处理，有兴趣可以去深入研究一下，在此过程中，了解了一些 npm 包及其作用，如cacpicocolorschokidar等，以及http缓存的应用，还有发现源码中会有很多map、set数据结构的使用，包括数据增、删、改、是否存在等，带着问题继续探索。为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。
【Vue学习笔记3】使用Vite开启一个Vue3工程项目
刘春明的博客
05-05 4680
Vite是一个web开发构建工具。Vite 的竞品是 Webpack，而且按照现在的趋势看，使用率超过 Webpack 也是早晚的事。Vite 主要提升的是开发的体验，Webpack启动调试环境需要 3 分钟都很常见，Vite大大缩短了这个时间。
vite简单的使用教程
luaond的博客
05-05 2231
Vue是一种流行的JavaScript框架，它使得开发者可以更方便地构建可复用组件和构建可扩展的应用程序。在Vue中，数据是通过props和$emit等机制进行传递的。除了这些基本的传值方式，Vue还提供了许多高级的传值方法，本文将介绍其中6种常用的方法，并提供相应的例子。
vite构建包本地启动
最新发布
Java小白白的博客
05-10 379
在本地启动 Vite 前端项目并进行开发服务器部署需要安装一些 npm 包。这是用于在开发过程中实时预览项目的服务器。目录启动一个静态文件服务器，通常在。这会启动一个开发服务器，通常在。替换为你实际的项目目录。
vite基础知识与冷启动
weixin_61006262的博客
07-14 796
vite 是一个基于 Vue3 单文件组件的非打包开发服务器快速的冷启动，不需要等待打包操作；即时的热模块更新，替换性能和模块数量的解耦让更新飞起；真正的按需编译，不再等待整个应用编译完成，这是一个巨大的改变。并且vite也成功地革了webpack的命，让webpack开发者直接喊大哥：尤神放弃webpack那么vite是如何做到这些的呢？
Vite基本使用
m0_66711291的博客
05-28 9747
文章目录什么是vite创建项目1. 输入2. 安装vite3. 配置项目的基本信息4. 预览效果配置项目配置项配置vue.config.jsvue-routervuexaxiosless 什么是vite vite是vue官方推出的一个打包工具，打包速度比webpack要快得多，具体为什么快我看不懂。 总之就是一个打包工具，也可以代替脚手架来创建项目 创建项目 按照下面的命令可以创建出一个项目 1. 输入 npm init vite@latest 或者 npm create vite@latest 2
vite编译启动Vue3项目
qq_35175478的博客
06-13 1854
当您看到控制台输出 “Server running at:” 时，您的 Vite 服务器就已经成功启动了。首先，确保您已经安装了最新版本的 Node.js。您现在已经成功地在 Vite 中编译和启动了您的 Vue 3 项目！然后，打开终端并进入您的 Vue 3 项目目录。
vite+vue3使用模块化批量发布Mockjs接口
03-29
"vite+vue3使用模块化批量发布Mockjs接口"这个主题涵盖了如何在Vite搭建的环境中，结合Vue3和Mockjs来实现接口的模块化和批量处理。这将帮助开发者在实际API未准备好或者不便于调试时，快速模拟后端数据，提高开发...
vue3+vite+qiankun+monorepo框架
08-03
vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+...
vite2 + vue3构建多页应用-源码demo
10-15
本项目“vite2 + vue3构建多页应用-源码demo”将深入探讨如何使用这两者来搭建一个多页面应用程序。 **Vite2 的特性** 1. **热模块替换（Hot Module Replacement, HMR）**: Vite2 支持开箱即用的HMR，无需额外配置...
使用vite从头搭建一个vue3项目
04-18
在项目根目录下，使用`vite create my-vue3-app`创建项目，然后通过`cd my-vue3-app`进入项目，运行`npm install`安装依赖。接着，启动开发服务器`npm run dev`，在浏览器中访问指定地址即可看到项目运行。开发过程...
vite-vue3-template:Vite + Vue3项目模板
03-18
Vite + Vue3 项目模板是现代前端开发中的一个高效构建工具，它结合了Vue 3框架的最新特性与Vite的快速开发优势。Vite是由Vue.js的作者尤雨溪开发的一款新型构建工具，旨在解决传统Webpack在开发阶段的性能瓶颈。Vue ...
手把手教你用Vite构建第一个Vue3项目
再小的帆也能远航，把分享变成一种习惯
09-04 2851
今天就来说说怎么创建第一个Vue3项目。并安装Element Plus 及一些常用配置，最终实现一个简单增删改查页面
【vue3】使用vite构建vue3项目
热门推荐
嗨，朋友你好！我是前端领域的工作者
03-30 2万+
使用vite构建vue3项目、vite介绍、vite对比webpack
（01）vite 从启动服务器开始
秋来九月八
11-21 592
Vite（发音为"veet"）是一种现代化的前端构建工具，旨在提供快速的开发体验。它由尤雨溪（Vue.js 的创始人）团队开发并维护。Vite主要用于构建基于现代 JavaScript 框架（如Vue.js、React、以及Svelte等）的应用程序。与传统的前端构建工具不同，Vite采用了一种基于ESM（ECMAScript模块）的开发服务器，利用浏览器原生支持的模块导入方式，实现了快速的冷启动和开发服务器启动的速度。
基于 vite 创建 Vue3 项目，新增的目录文件分析，启动项目
weixin_49931650的博客
01-02 600
基于 vite 创建 Vue3 项目，新增的目录文件分析，最后npm run dev启动项目
利用Vite或者webpack创建Vue项目，并启动Vue项目
杜晓帅~的博客
09-04 6234
一篇文章带你了解如何使用Vite或者webpack打包Vue项目，并成功启动
vite项目修改node_modules
m0_47333020的博客
03-07 647
在使用某个依赖的时候遇到了bug，提交issue后不想一直等待到作者更新版本，所以寻求临时自己解决。在node_modules里找到需要修改的依赖，修改想要修改的代码。然后在node_modules里找到.vite文件夹，将其全部删除。再npm run dev启动，刷新页面看看修改是否生效。
使用vite构建vue3 项目
08-26
您好！使用Vite构建Vue 3项目非常简单。下面是一个简单的步骤指南： 1. 首先，确保您已经安装了最新版本的Node.js。您可以在终端中运行`node --version`来检查您当前的Node.js版本。 2. 安装Vite脚手架工具。在终端中运行以下命令： ``` npm install -g create-vite ``` 3. 创建一个新的Vue 3项目。在终端中进入您的项目目录，并运行以下命令： ``` create-vite my-vue3-project --template vue ``` 这将创建一个名为`my-vue3-project`的新文件夹，并在其中生成Vue 3项目的初始代码。 4. 进入项目目录。在终端中运行以下命令： ``` cd my-vue3-project ``` 5. 安装项目依赖。运行以下命令： ``` npm install ``` 6. 启动开发服务器。运行以下命令： ``` npm run dev ``` 这将启动开发服务器，并在浏览器中打开一个新标签页，显示您的Vue 3应用程序。 现在，您可以开始开发您的Vue 3项目了！希望对您有所帮助！如果您有任何其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值