首页 > 其他分享 >vuejs3.0 从入门到精通——基于 Vite 搭建 Vue3 项目

vuejs3.0 从入门到精通——基于 Vite 搭建 Vue3 项目

时间:2023-11-02 10:14:14浏览次数:36  
标签:浏览器 JavaScript 使用 vuejs3.0 vite 模块 Vue3 Vite

基于 Vite 搭建 Vue3 项目

 一、为什么选 Vite

https://www.vitejs.net/

  在浏览器支持 ES 模块之前,JavaScript 并没有提供的原生机制让开发者以模块化的方式进行开发。这也正是我们对 “打包” 这个概念熟悉的原因:使用工具抓取、处理并将我们的源码模块串联成可以在浏览器中运行的文件。

  时过境迁,我们见证了诸如 webpack、Rollup 和 Parcel 等工具的变迁,它们极大地改善了前端开发者的开发体验。

  然而,当我们开始构建越来越大型的应用时,需要处理的 JavaScript 代码量也呈指数级增长。包含数千个模块的大型项目相当普遍。我们开始遇到性能瓶颈 —— 使用 JavaScript 开发的工具通常需要很长时间(甚至是几分钟!)才能启动开发服务器,即使使用 HMR,文件修改后的效果也需要几秒钟才能在浏览器中反映出来。如此循环往复,迟钝的反馈会极大地影响开发者的开发效率和幸福感。

  Vite 旨在利用生态系统中的新进展解决上述问题:浏览器开始原生支持 ES 模块,且越来越多 JavaScript 工具使用编译型语言编写。

  参考 Vite 官网给的回答:https://www.vitejs.net/guide/why.html,简单的来说见下图:

 

二、概览

https://www.vitejs.net/guide/

  Vite(法语意为 "快速的",发音/vit/,发音同 "veet")是一种新型前端构建工具,能够显著提升前端开发体验。它主要由两部分组成:

    • 一个开发服务器,它基于原生ES模块提供了丰富的内建功能,如速度快到惊人的模块热更新(HMR)。

    • 一套构建指令,它使用Rollup打包你的代码,并且它是预配置的,可输出用于生产环境的高度优化过的静态资源。

  Vite 意在提供开箱即用的配置,同时它的插件API和JavaScriptAPI带来了高度的可扩展性,并有完整的类型支持。

三、搭建第一个 Vite 项目

兼容性注意

Vite 需要 Node.js 版本 >= 12.0.0。

  使用 NPM:

npm init vite@latest

  使用 Yarn:

yarn create vite

  使用 PNPM:

pnpm create vite

  然后按照提示操作即可!

  你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如,要构建一个 Vite + Vue 项目,运行:

标签:浏览器,JavaScript,使用,vuejs3.0,vite,模块,Vue3,Vite
From: https://www.cnblogs.com/zuoyang/p/17804773.html

相关文章

  • vue3 compositon api 和 common下写业务逻辑的区别
    区别:Vue3的CompositionAPI是一种处理和组织Vue组件内部逻辑的方式。它可以让你更灵活地组织和复用你的代码。使用compositionAPI可以将组件的逻辑拆分为小的、独立的函数或模块,并使用setup函数进行组合和重用。这对于一些复杂的业务逻辑或需要高内聚、低耦合的逻辑非......
  • vuejs3.0 从入门到精通——初始化项目——路由
    路由 VueRouter是Vue.js官方的路由管理器,它和Vue.js深度集成,用于构建单页面应用。Vue.js单页面应用是基于路由和组件映射的,路由用于配置访问路径,将组件(components)映射到路由路径(routes)。一、路由模式 VueRouter常用的两种模式是hash模式和HTML5模式,对应的创建......
  • 二、搭建前后端分离的自动化测试平台的前端Vue3+Element-plus前端项目
    一、安装Node.js以及配置环境变量1、Node获取地址https://nodejs.org/en/download一直默认选项安装,安装好了之后,在环境变量中会自动配置Node的地址,可以在cmd中使用node-v/npm-v命令验证是否下载成功2、设置Node的配置内容(1)在安装目录下新建两个文件夹命名为node_cache,和no......
  • vue3实现input输入框只能输入中文
    简单记录下,方便以后复制<el-inputv-model="form.name"placeholder="使用人的姓名":maxlength="20":formatter="(value)=>value.replace(/[^\u4E00-\u9FA5]/g,'')"/>......
  • vite多入口
    创建多页面入口1.在根目录下创建demo1.htm1,demo2.htm1这两个文件2.在vite.config.js文件中配置入口3.在src下创建文件夹和文件,src/demo1/app.vue和src/demo1/main.jsdemo1.htm1<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"/>&l......
  • vue3 + vite 的Excel表格的导入导出
    一、安装XLSX插件yarnaddxlsx或者npmixlsx二、引入插件在你需要的页面或者在main.js中引入import*asXLSXfrom'xlsx'三、导出Excel3.1核心api①xlsx.utils.book_new() 新建工作簿② xlsx.uti......
  • 初看vue3源码
    因为工作的原因又回到了vue的领域,需要加深对vue和vue生态的了解也许平时比较多人手机看别人解析怎么看vue源码的,自己动手看vue源码的还是比较少,这次我想自己动手看看首先吧代码获取到本地跑起来vue仓库地址https://github.com/vuejs/vue开发环境搭建指南https://github.com/......
  • vue2和vue3的区别
    vue2和vue3都是前端JavaScript框架,基本概念和功能大部分都相同,它们的区别主要在语法、原理、生态以及打包四个方面.语法:Vue.js2使用基于Object.defineProperty的双向绑定来追踪变化,而Vue.js3采用Proxy来实现响应式变化追踪,这提高了性能并允许更广泛的响应式追踪。在Vue.js3......
  • Vue.js框架:vue3引入mockjs模拟数据调试
    一、引入依赖1、安装依赖包在终端中使用以下命令:npminstall@types/mockjs--save此处使用了@types进行引入,是因为在.ts文件引用包时,默认必须有类型声明,不能是any。有很多依赖包是用纯JS写的,没有类型声明。因此使用@types作为类型声明的集......
  • vite.config.js配置详解
    import{fileURLToPath,URL}from'node:url'import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue' exportdefaultdefineConfig({   //根路径,也就是项目的基础路径   base:'/',   //服务器配置   server:{       /......