位置: IT常识 - 正文

【vue3】使用vite构建vue3项目(vue vif)

编辑:rootadmin
【vue3】使用vite构建vue3项目

推荐整理分享【vue3】使用vite构建vue3项目(vue vif),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue3怎么用,vue3 vite,vue3怎么用,vue vite教程,vue3 vite,vue vite,vue3 vite,vue vite,内容如对您有帮助,希望把文章链接给更多的朋友!

==>😉博主:初映CY的前说(前端领域) ,📒本文核心:使用vite构建vue3项目

【前言】 当我们选择了vue3作为我们项目的开发,就更加的推荐使用vite来对我们的项目进行打包。很简单——这也是开发vue的团队开发的工具,因此支持性肯定比传统的打包工具好,下面我们就来使用vite来开发一个vue3项目。

目录一、vite介绍二、vite对比webpack三、使用vite构建项目1.运行创建项目命令2.输入项目名称,默认是 vite-project3.选择前端框架4.选择项目类型5.创建完毕6.相关插件安装7.编写 Vue 应用一、vite介绍

Vite(法语意为 “快速的”,发音 /vit/,发音同 “veet”) 是一种新型前端构建工具,能够显著提升前端开发体验(热更新、打包构建速度更快)。

二、vite对比webpack

1.Webpack:将所有的模块提前编译、打包进 bundle 中,不管这个模块是否被用到,随着项目越来越大,打包启动的速度自然越来越慢。

2.Vite:瞬间开启一个服务,并不会先编译所有文件,当浏览器用到某个文件时,Vite 服务会收到请求然后编译后响应到客户端。

3.使用webpack打包模式 使用webpack打包会将我们所有的文件都进行一个打包处理,因此当项目文件越来越多的时候,打包编译的事件也会变长

4.使用vite打包模式 vite的打包模式是先开启服务,再根据我们的请求进行一个相应的打包编译。因此打包速度特别快,类似于实现了按需导入,不需要使用的文件不进行导入。 好了基础概念学完了,我们来看看我们怎么使用vite来来开发我们的vue3项目吧!👇

三、使用vite构建项目

【学习指南】学习某一项技能的最好办法是?没错就是看官方文档,官方文档指南:vite官网

1.运行创建项目命令# 使用 npmnpm create vite@latest# 使用 yarnyarn create vite# 使用 pnpmpnpm create vite

注意点:Vite 需要 Node.js 版本 >= 12.0.0。在cmd窗口输入

node -v【vue3】使用vite构建vue3项目(vue vif)

即可查询到我们当前的一个node的版本。

2.输入项目名称,默认是 vite-project

3.选择前端框架

4.选择项目类型

5.创建完毕

接下来的话,仅需要按照上述出现的三条指令即可完成我们项目的运行 ![依次写入命令](https://www.yuucn.com/wp-content/uploads/2023/05/1684740395-d055d560e568723.png 根据cmd的提示,我们依次写下

cd vue3-studynpm installnpm run dev

随后复制local后面生成的当前地址粘贴到在浏览器中打开就可以完成我们使用vite创建一个vue3的项目喽!通常出现了这三条指令之后我们可以直接进我们的vscode执行这些命令也可以实现vue3项目的一个启动 至此,一个vue3的项目成功的被你创建出来喽!~

6.相关插件安装1.禁用 Vetur 插件,安装 Volar 插件。2.VSCode 代码片段插件:Vue VSCode Snippets,使用见文档。3.Vue3 的 Chrome 调试插件也变了,下载链接,注意安装后需要把之前的 Vue2 Devtools 关闭掉。7.编写 Vue 应用1.清空 src 里面的所有内容。2.在 src/main.js 中按需导入 createApp 函数。3.定义 App.vue 根组件,导入到 main.js。4.使用 createApp 函数基于 App.vue 根组件创建应用实例。5.挂载至 index.html 的 #app 容器

main.js

import { createApp} from 'vue'import App from './App.vue'const app = createApp(App)app.mount('#app')

App.vue

<template> <div>我是根组件,Hello</div></template><script> export default { name: 'App', }</script>

index.html

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <link rel="icon" href="/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Vite App</title></head><body> <!-- 容器,由 Vue 创建实例来渲染 --> <div id="app"></div> <!-- Webpack 导入的是打包后的代码 --> <!-- Vite 直接基于 ESM 加载源文件 --> <script type="module" src="/src/main.js"></script></body></html>

最后在根文件下执行即可执行我们的项目(博主使用的npm)

npm run dev

随后页面出现一个地址,点击进去即可将我们的vue3项目跑起来 页面第一行将会出现:我是根组件,Hello

至此本文结束,愿你有所收获! 期待大家的关注与支持! 你的肯定是我更新的最大动力!!!

本文链接地址:https://www.jiuchutong.com/zhishi/293780.html 转载请保留说明!

上一篇:vue脚手架(vue-cli)详细安装过程(vue脚手架和vue的区别)

下一篇:相见恨晚,这6个适合安卓用户的浏览器,你用过吗(相见恨晚求下联)

  • vivo x6s A输入法设置在哪里(vivox9输入法)

    vivo x6s A输入法设置在哪里(vivox9输入法)

  • 华为nova5i在哪里下载东西(华为nova5i在哪里插卡)

    华为nova5i在哪里下载东西(华为nova5i在哪里插卡)

  • miui11怎么关闭底下搜索栏(小米怎么去掉底部)

    miui11怎么关闭底下搜索栏(小米怎么去掉底部)

  • 微信运动几点就开始第二天的计步(微信运动几点就不记步数了)

    微信运动几点就开始第二天的计步(微信运动几点就不记步数了)

  • 暴风影音为什么连不上网(暴风影音为什么找不到3d)

    暴风影音为什么连不上网(暴风影音为什么找不到3d)

  • 微信投诉失败,对方会收到提示吗(微信投诉失败对方会受限制吗)

    微信投诉失败,对方会收到提示吗(微信投诉失败对方会受限制吗)

  • 呼叫转移返回自动关闭(呼叫转移返回自动关闭怎么回事)

    呼叫转移返回自动关闭(呼叫转移返回自动关闭怎么回事)

  • 无线网光信号灯不亮怎么回事(无线网光信号灯不亮正常吗)

    无线网光信号灯不亮怎么回事(无线网光信号灯不亮正常吗)

  • vivo手机收音机在哪里(vivo手机收音机功能在哪里)

    vivo手机收音机在哪里(vivo手机收音机功能在哪里)

  • 抖音实名制怎么解绑(抖音实名制怎么解绑后多久能绑定另一个抖音号码)

    抖音实名制怎么解绑(抖音实名制怎么解绑后多久能绑定另一个抖音号码)

  • 快手评论为何自动消失(快手上面的评论为什么会莫名其妙的消失)

    快手评论为何自动消失(快手上面的评论为什么会莫名其妙的消失)

  • list set map区别(list,map,set区别)

    list set map区别(list,map,set区别)

  • 华为手机怎么添加桌面插件(华为手机怎么添加桌面天气和时间)

    华为手机怎么添加桌面插件(华为手机怎么添加桌面天气和时间)

  • 微信群邀请链接多久失效(微信群邀请链接怎么弄)

    微信群邀请链接多久失效(微信群邀请链接怎么弄)

  • 华为刘海屏怎么隐藏(华为刘海屏怎么打开)

    华为刘海屏怎么隐藏(华为刘海屏怎么打开)

  • 华为mate30有几个摄像头(华为mate30有几个版本的区别)

    华为mate30有几个摄像头(华为mate30有几个版本的区别)

  • 京东评价为啥京豆收回(京东评价为啥京豆不能用)

    京东评价为啥京豆收回(京东评价为啥京豆不能用)

  • 手机分辨率越高越好吗(手机分辨率越高越费电吗)

    手机分辨率越高越好吗(手机分辨率越高越费电吗)

  • 计算机主机通常包括(通常计算机的主机)

    计算机主机通常包括(通常计算机的主机)

  • 户户通反复重启升级(户户通反复启动)

    户户通反复重启升级(户户通反复启动)

  • 扫一扫怎么改成前置(扫一扫直接变成文字)

    扫一扫怎么改成前置(扫一扫直接变成文字)

  • WPS表格怎么合并单元格(wps表格怎么合并行和列)

    WPS表格怎么合并单元格(wps表格怎么合并行和列)

  • QQ音乐分享记录如何查询(qq音乐的分享给好友的记录在哪里看)

    QQ音乐分享记录如何查询(qq音乐的分享给好友的记录在哪里看)

  • qq不常用联系人在哪里(qq不常用联系人在哪里找)

    qq不常用联系人在哪里(qq不常用联系人在哪里找)

  • 下载适用于Android 的 Windows子系统时收到错误代码 0x800700B7怎么办?(androirc下载)

    下载适用于Android 的 Windows子系统时收到错误代码 0x800700B7怎么办?(androirc下载)

  • Java Web 开发详解(java web开发实例大全)

    Java Web 开发详解(java web开发实例大全)

  • phpcms后台上传不了图片怎么办(php无法上传文件)

    phpcms后台上传不了图片怎么办(php无法上传文件)

  • 资产负债表其他流动资产计算公式
  • 小微自开专票申报时怎么填写
  • 发票第一联需要盖章嘛
  • 税务局代开的进项票需要认证吗
  • 增值税税控系统专用设备
  • 普通发票申请表怎么填写
  • 贸易公司的印花税税率是多少
  • 房地产企业停止经营后未抵减完的预缴增值税可以退吗
  • 哪些依据属于会计凭证
  • 生产企业出口货物可享受免税并退税
  • 手工帐怎么登记
  • 公司投资控股其他公司如何做账务处理
  • 红字抵扣怎么开
  • 管理费用现金流量表中属于
  • 接受股权转让要交什么税
  • 另一个公司代付公司的水电费
  • 专用发票红冲后可以退税吗?
  • 医疗机构交企业所得税吗
  • 净利润亏损怎么结转
  • 印花税计算公式例子
  • 客运服务费怎么开票
  • 股权转让成本法和权益法
  • 清算时公司亏损预交所得税能退吗
  • 内插法计算内部收益率公式
  • 其他资本公积核算内容
  • 利润表的以前年度损益调整影响利润总额吗
  • 不良资产购买流程
  • 包装物租金怎么计算增值税
  • mac如何修改照片的尺寸大小
  • 谷歌第球
  • 销售折让负数会计分录
  • 上月抵扣的发票怎么开
  • php教程100
  • vue移动和pc两套代码
  • 购入增值税税控系统专用设备
  • 增值税的类型主要有哪些
  • 开具增值税专用发票和普通发票的区别
  • 有限责任公司股东对公司债务承担
  • 微服务架构java框架
  • 马卡雷纳大教堂
  • php中session使用
  • 会计分录怎么分借方和贷方
  • 旅行社差额征税税率是多少
  • 玩转ChatGPT:中科院ChatGPT Academic项目部署与测评
  • 前端试题大全及答案
  • 出口抵减内销产品应纳税额怎么结转
  • 中标费用入什么科目
  • 当月勾选认证可以在下月抵扣吗
  • 月中入职算一个月吗
  • 企业实收资本与实缴资本
  • 什么是叫资产负债表项目
  • 每月工资不一样怎么算误工费呢
  • 房地产开发公司注册条件
  • 什么情况下固定资产进项税不能抵扣
  • 增值税减免税款计入什么科目
  • 进口产品内销如何交税
  • 非同一控制下企业合并,企业合并成本包括
  • 劳务费打到私人账户
  • 服务咨询类合同
  • 生育津贴与员工有关吗
  • mysql指定查询
  • windows中任务栏
  • ubuntu16设置启动项
  • centos opencl
  • winxp回收站在哪里
  • mac怎么设置开机默认windows
  • linux学习思路
  • centos安装详细
  • centos6.6
  • windows打开
  • w10系统如何
  • centos ohmyzsh
  • 超级硬盘数据恢复软件v2.7
  • ssh,scp自动登陆的实现方法
  • javascript命名空间
  • javascript Math.random()随机数函数
  • 怎么查询企业的联系方式
  • 朝阳区地方税务局电话
  • 营改增之前和之后
  • 耕地占用税减免支持项目发展
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设