【Vite的简单配置及使用】

最新推荐文章于 2024-06-01 15:46:07 发布
最新推荐文章于 2024-06-01 15:46:07 发布
阅读量102 收藏
点赞数
分类专栏： Vue3学习 文章标签： vue.js 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_56612338/article/details/134277087
版权

Vue3

vite创建Vue3项目

为什么选择Vite,可以参考vite的官网，里面解析很清晰。

npm init vue@latest

如果没有安装过vite，首先会提示你安装vite，直接y就可以安装了。

在这里插入图片描述

安装好之后，然后输入项目名称和包名称，下面vue3支持的东西可以暂时先不使用，需要时可以再添加…

在这里插入图片描述

按照提示

cd 项目名 （进入项目）

npm install （安装项目相关的依赖）

npm run dev (运行项目)

在这里插入图片描述

稍等片刻…

创建好项目后，我们可以用vscode打开，然后使用 npm run dev运行项目
在这里插入图片描述

成功页面(vite自带的一个小程序)
在这里插入图片描述

念故思旧
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
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+...
[vue] Vite的使用
前端
03-04 1788
[vue] Vite的使用环境package.json文件变更变更脚手架修改脚本命令index.html 文件htmlWebpackPlugin 替换为 vite-plugin-htmlWe're sorry but vue3.x-vite-ts doesn't work properly without JavaScript enabled. Please enable it to continue.vite.config.ts 文件变更vite-plugin-htmlYou are running th
在已有的React项目中引入Vite
菠萝萝的博客
02-06 1004
在已有的项目中添加vite，实现快速编译开发
vue3老项目如何引入vite
weixin_45563734的博客
12-22 861
vue3老项目如何引入vite
Vue3 + Vite 打包优化及配置
qq_30379395的博客
12-01 4248
本文如果有错误和不足之处，欢迎大家在评论区指出，多多提出您宝贵的意见！github地址。
使用vite创建vue项目和打开已创建的vue项目
baidu_40409033的博客
06-13 590
Vite 是一个 web 开发构建工具，由于其原生 ES 模块导入方式，可以实现闪电般的冷服务器启动。通过在终端中运行以下命令，可以使用 Vite 快速构建 Vue 项目 使用npm：创建好的一个项目在关闭后，再次打开的步骤 打开目标项目文件夹路径下的集中终端，输入指令即可。 `......
vite-plugin-handlebars:Vite对车把的支持
03-19
安装首先像安装其他任何软件包一样安装软件包yarn add -D vite-plugin-handlebars然后可以将其作为插件添加到您的Vite配置中： // vite.config.jsimport handlebars from 'vite-plugin-handlebars' ;export defaul
preact-vite-starter:具有Vite，TailwindCSS，Typescript和开发人员生产力工具Eslint + Prettier的Preact简单入门工具包
05-27
该项目使用Vite开辟了快速开发服务器 :high_voltage: 特征： :cyclone: :artist_palette: :high_voltage: :memo: 埃斯林特 :sparkles: 更漂亮 :trident_emblem: 打字稿 :cloud: 在Netlify上进行零配置配置 ...
vite-plugin-ssr-ssg:适用于SSR和SSG的Vite插件
03-25
适用于跨框架的简单命令 方便的设置脚本 自动页面生成 在SSR和CSR中预览 :dizzy: 快速开始 在您的项目中 yarn add -D vite-plugin-ssr-ssg yarn vite-ssrg init :shamrock: 支持 框架的支持状态如下。 React ...
vue3+vite+cesiumjs项目配置
07-21
包括一些简单的封装可以下载直接使用
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
JIngJaneIL的博客
05-28 1245
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
山花的博客
05-30 576
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
vue3 vue-draggable-next 实现拖拽穿梭框效果
最新发布
游九尘的博客
06-01 345
【代码】vue3 vue-draggable-next 实现拖拽穿梭框效果。
elemnt ui 时间选择器。 当前日期往前推6个月以前的的不可选择
IT13333的博客
05-28 362
【代码】elemnt ui 时间选择器。当前日期往前推6个月以前的的不可选择。
【Vue】v-if / v-show条件渲染指令
qq_39921135的博客
05-29 498
条件判断指令，用来辅助开发者按需控制 DOM 的显示与隐藏。表达式值为 true 显示， false 隐藏。作用： 控制元素显示隐藏（简单的显示隐藏）场景：频繁切换显示隐藏的场景。
【开源】渔具租赁系统 JAVA+Vue.js+SpringBoot+MySQL
as230627的博客
05-30 1169
Vue.js+SpringBoot前后端分离新手入门项目《渔具租赁系统》，包括渔具档案模块、渔具租赁模块、渔具归还模块、在线留言模块和部门角色菜单模块，项目编号T005。
对于vsc中的vue命令 vue.json
F2297468264的博客
05-31 460
打开vsc 然后在左下角有一个设置。将此代码粘贴 （我的不一定都适合）3.输入 vue.json回车。2.点击用户代码片段。
vue 笔记03
m0_47045804的博客
05-30 890
vue挂载以后把所有内容手抄一份就叫做虚拟dom 假设你要操作dom 等一下先不要操作真实dom, 先修改我这个手抄的虚拟的DOM 改完了么？如果我们需要一个变量 这个变量的值是根据data里面某个值或者某几个值的变化而变化的时候,那么我们就需要用到vue里面的computed计算属性。data里面定义的数据无法直接互相访问 因为加载到data的时候还没有产生当前的vue对象。return 返回的结果就是当前计算属性的值。回调函数的参数就是过滤原本的值return 返回过滤的新值。
vue iframe src规则
Ann_52547的博客
05-30 276
需要注意的是，为了安全起见，应尽量避免使用 JavaScript URL，尤其是在加载外部内容时，以防止恶意脚本的注入和执行。1、相对路径：相对于当前页面的路径。
vite如何配置呢
05-30
Vite是一个基于ES modules的前端构建工具，它借助ES modules的特性来实现了快速的开发和热重载，同时它的配置也非常简单。 以下是Vite的配置方法： 1. 安装Vite 在项目根目录下使用npm安装Vite： ``` npm install vite --save-dev ``` 2. 创建vite.config.js文件 在项目根目录下创建一个vite.config.js文件，用于配置Vite。 3. 配置Vite 在vite.config.js文件中配置Vite，例如： ``` import { defineConfig } from 'vite'; export default defineConfig({ // 配置开发服务器 server: { port: 3000, // 指定开发服务器的端口号 open: true // 是否自动打开浏览器 }, // 配置构建输出目录 build: { outDir: 'dist' // 指定构建输出目录 } }); ``` 在这个例子中，我们配置了开发服务器的端口号为3000，是否自动打开浏览器，以及构建输出目录为dist。 4. 运行Vite 在package.json文件中添加以下命令： ``` { "scripts": { "dev": "vite" // 运行Vite } } ``` 然后在终端中执行以下命令： ``` npm run dev ``` 这样就可以启动Vite了。 以上就是Vite的配置方法，Vite的配置非常简单，只需要按照自己的需求进行配置即可。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值