位置: 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个适合安卓用户的浏览器,你用过吗(相见恨晚求下联)

  • 增值税税率调整文件
  • 发票替代票
  • 已经缴税的发票还能作废吗
  • 营业额和营业收入区别举例
  • 兼职工资如何发放给个人
  • 企业社会保险登记表
  • 小规模纳税人残保金
  • 制造费用月末不可能有余额
  • 本期实际抵减税额合计
  • 小规模纳税人小微企业免税销售额
  • 外商投资企业啥意思
  • 企业养老金计算公式举例说明
  • 其他应付款重分类到哪个科目
  • 收回过去已确认的坏账
  • 无偿代建政府公告
  • 增值税发票单位可以不填吗
  • 同业清算互联前置 骗局
  • 在建工程的工资计入哪里
  • 利润表季度报表
  • 税后利润是净利润还是利润总额
  • 银行回单箱费会扣吗
  • windows hello用不了怎么办
  • 电脑安装的软件桌面上没显示
  • window10最新20h2
  • 银行汇票银行不予受理的是
  • thinkphp表单提交
  • 最贵的耳机排名
  • 发票带折扣怎么开
  • 前端手撕代码
  • yolo s
  • laravel实战教程
  • 核销发生的坏账损失
  • mysql将查询结果存到另一个表
  • 小规模申请一般纳税人怎么申请
  • 企业会计准则子公司
  • 新会计准则有哪三个
  • 银行每月贷款额度有多少
  • 小规模纳税人免税政策2022
  • 吸收合并需要编制
  • 可供出售金融资产新准则叫什么
  • 暂估成本的账务处理分录
  • 一般情况下银行加权平均成本的变化主要取决于什么因素
  • 电费发票开据后如何入帐?
  • 企业设备维修
  • 作废的支票由谁保管
  • 补缴的增值税可以抵扣吗
  • 发票冲红的会计怎么处理
  • 公司员工支出
  • 办理国有土地使用证
  • 建筑公司可以收工程款发票吗
  • 企业年金管理费计入什么科目
  • 普通发票找不到了可以重开吗
  • 销售商品一批,销售价格为4520000
  • 错账的更正方法有哪些
  • sql server233错误
  • mysql 存储过程存放在哪里
  • 电脑更新win10系统软件
  • 如何删除windows media center
  • 如何给电脑重装系统win7系统
  • windows无法
  • Mac Chrome打开HTTPS证书错误问题解决方法
  • linux c命令
  • linux系统文件系统只读
  • 苹果mac最新的系统
  • 虚拟机远程控制局域网
  • win10h2版本
  • win7电脑启动
  • 校园网升级套餐
  • linux zen3
  • python编程模拟
  • unity如何操作
  • 在shell命令行方式下,一行只能
  • nodejs快速入门
  • 用shell写一个脚本,对文本中无序的一列数字排序
  • jquery获取文件大小
  • javascript的主要功能
  • 发票测试纸在哪里打印
  • 济宁税务大厅上班时间
  • 山东省国家税务局官网
  • 税务师事务所企业组织架构
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设