vite安装和使用

这篇具有很好参考价值的文章主要介绍了vite安装和使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

vite的使用

一 什么是vite

	1.Vite作为一个基于浏览器原生ESM的构建工具,它省略了开发环境的打包过程,利用浏览器去解析imports,
	在服务端按需编译返回。同时,在开发环境拥有速度快到惊人的模块热更新,且热更新的速度不会随着模块
	增多而变慢。因此,使用Vite进行开发,至少会比Webpack快10倍左右。
	2.相对于wenbpack,他启动的时间和热更新的速度更快,

二 搭建vite项目

	1.新建一个html的项目,我的路径是这样的

vite安装和使用
math.js里面

			export const sum = function(sum1,sum2){
			    return sum1+sum2
			}

main.js里面

			import {sum} from './js/math.js'
			console.log("人参果树上有"+sum(10,20)+"个果子")
		简单的引入引出 可以通过 vsCode  live server 这个插件进行运行到服务上
		运行后可以看到打印  
		vite安装和使用

	2.使用vite启动项目
		一 : npm init 初始化项目生成package.json文件
		二 : npm install vite -D 下载vite到package里面,这样就可以使用vite了
		三 : 直接npx vite命令就可以启动项目了,会生成一个http://127.0.0.1:5173/的服务

vite安装和使用
(1):构建完成后引入就不需要加后缀了
(2): 和webpack一样,引入node_modules里面的文件不需要赘述路径了,直接引入即可(router vue vuex loader…)
四 :vite可自动编译css和sass
创建css和sass文件,在main.js里面引入即可(不需要像weboack那样在webpack.config.js里面配置loader)
五 : vite编译vue
(1):加载vue需要下载依赖 下载包 npm i vue@next -D npm install @vitejs/plugin-vue -D npm i @vue/compiler-sfc -D
(2):创建vue文件(我这里创建了两个一个vue2一个vue3)
vite安装和使用
vite安装和使用
(3):创建vite.config.js 对vue文件进行转译,变成浏览器可以运行的文件(html,css,js,静态资源等)
vite安装和使用
六 : 使用npx vite就可以启动vue的服务了 npx build 对项目进行打包
七 : 如果想生成本地ip的服务不是localhost或者127.0.0.1 在vite.config.js里面配置host就可以了
八 : 到了这里还差一丝,vue是npm run 启动项目的不是npx文章来源地址https://www.toymoban.com/news/detail-497041.html

		 "scripts": {
                "dev": "vite",
                "serve": "npm run dev",
                "build": "vite build",
                "test": "echo \"Error: no test specified\" && exit 1"
            },

使用vite创建vue项目

    1.npm init vite@latest 
    2.yarn create vite
    3.pnpm create vite

vite优点

	 (1)运行不需要分析依赖,当浏览器需要那些模块时再按需加载模块,而webpack是将项目进行编译打包,
打包完后把项目放入开发服务器中然后启动开发服务器,请求服务器是直接给予打包结果。做到了真正的按需编译。
	(2) vite底层是go语言搭建,运行一纳秒为最低单位,运行速率更快
	(3)完全跳过了打包的概念,按需加载。全新的编译思路。

到了这里,关于vite安装和使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vite是什么

    vite —— 一个由 vue 作者尤雨溪开发的 web 开发工具 Vite由两个主要部分组成 dev server:利用浏览器的ESM能力来提供源文件,具有丰富的内置功能并具有高效的HMR 生产构建:生产环境利用Rollup来构建代码,提供指令用来优化构建过程 Vite作为一个基于浏览器原生ESM的构建工具,

    2024年02月22日
    浏览(10)
  • Vue3+Vite+Pinia+Naive项目搭建之二:scss 的安装和使用

    前言 如果对 vue3 的语法不熟悉的,可以移步 Vue3.0 基础入门,快速入门。 github 开源库:Vue3-Vite-Pinia-Naive-Js gitee   开源库:Vue3-Vite-Pinia-Naive-Js 1. 安装依赖  2. 新增 src/assets/style/reset.scss 页面样式初始化 3. 新增 src/assets/style/common.scss 共用样式 4. 新增 src/assets/style/utils.scss 工

    2024年02月12日
    浏览(21)
  • Vite和Webpack的区别是什么

    一.区别 构建速度: Vite 使用原生 ES 模块进行开发,不需要像 Webpack 那样在编译时将所有代码转换为 JS 进行打包,因此它的构建速度通常比 Webpack 快。1. Webpack 需要打包所有的模块到一个或多个文件中,这个过程会更慢 开发体验: Vite 提供了一个快速的开发体验,支持热更新

    2024年01月25日
    浏览(11)
  • 创建一个vite+vue3项目详细教程

    一、首先打开本地磁盘,找到一个存放路径  这里 我选择将新建项目放置在E盘的demo-vitedemo路径下 二、在该路径处打开命令行cmd  三、在打开的命令行中输入创建命令  注意在搭建之前要安装node.js环境依赖,并且确认你的版本 Vite 需要Node.js版本 14.18+,16+。然而,有些模板需

    2024年02月15日
    浏览(23)
  • Vite为什么比Webpack快得多?

    在前端开发中,构建工具扮演着至关重要的角色,而Vite和Webpack无疑是两个备受关注的工具。然而,众多开发者纷纷赞誉Vite的速度之快,本文将深入探讨Vite相较于Webpack为何更快的原因,揭示其背后的奥秘。 依赖解析的差异 Vite和Webpack在依赖解析上采用了不同的策略。Webpac

    2024年04月10日
    浏览(13)
  • 前端 vite+vue3——写一个随机抽奖组件

    大家好,我是yma16,本文分享关于前端 vite+vue3——写一个抽奖随机组件。 vue3系列相关文章: 前端vue2、vue3去掉url路由“ # ”号——nginx配置 csdn新星计划vue3+ts+antd赛道——利用inscode搭建vue3(ts)+antd前端模板 认识vite_vue3 初始化项目到打包 python_selenuim获取csdn新星赛道选手所在城

    2024年02月08日
    浏览(13)
  • vue3 项目搭建教程(基于create-vue,vite,Vite + Vue)

    目录 一、搭建vue3 项目前提条件 二、通过create-vue搭建vue3 项目 三、搭建一个 Vite 项目 四、构建一个 Vite + Vue 项目 五、打开Vue 项目管理器 六、Vite + Vue 项目目录结构 七、Vite.config.ts配置 前提条件 熟悉命令行 已安装 16.0 或更高版本的 Node.js 同时按window+R键,输入cmd,打开命令提

    2024年01月21日
    浏览(20)
  • 创建基于vite的vue项目

    目录 一、环境 安装Node.js 安装yarn工具 二、创建项目 三、项目目录梳理 项目初始目录结构 项目加载过程 四、集成UI组件库vant 配置按需加载Vant 使用组件 引入函数组件的样式 五、集成UI组件库NutUI 配置按需加载NutUI 使用组件 六、常见错误 Node.js环境可以使在系统上运行js代码

    2024年02月06日
    浏览(11)
  • Vue3+Vite+Pinia+Naive后台管理系统搭建之四:Naive UI 组件库的安装和使用

    前言 如果对 vue3 的语法不熟悉的,可以移步 Vue3.0 基础入门Vue3.0 基础入门快速入门。 UI 组件请参考官网:Naive Ui 官网 为什么选择 naive ui 不继续用 element ui,因为尤大大推荐,可以尝试下,而且 naive ui 更贴近 vue3 的语法,当然易上手还是element ui 好一点。 github 开源库:Vue

    2024年02月07日
    浏览(17)
  • Mock和Vite-plugin-Mock的区别是什么?

    我不知道大家和我是否有一样的疑问,之前Mock.js用的挺好,为啥又出现了一个vite-plugin-mock,而且这个插件还依赖于Mock.js.那么他的优势到底是什么呢?如果你也有这样的疑问,本文最后会给出答案解开这个谜底 我之前已经百度了好久发现讨论这个问题的人好少,只有一俩个人

    2024年02月10日
    浏览(10)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包