vite安装和使用 |
您所在的位置：网站首页 › vite官网一键安装需要的插件 › vite安装和使用 |
vite安装和使用
|
vite的使用
一 什么是vite
1.Vite作为一个基于浏览器原生ESM的构建工具，它省略了开发环境的打包过程，利用浏览器去解析imports，
在服务端按需编译返回。同时，在开发环境拥有速度快到惊人的模块热更新，且热更新的速度不会随着模块
增多而变慢。因此，使用Vite进行开发，至少会比Webpack快10倍左右。
2.相对于wenbpack，他启动的时间和热更新的速度更快，
二 搭建vite项目
1.新建一个html的项目，我的路径是这样的
main.js里面 import {sum} from './js/math.js' console.log("人参果树上有"+sum(10,20)+"个果子") 简单的引入引出 可以通过 vsCode live server 这个插件进行运行到服务上 运行后可以看到打印  2.使用vite启动项目 一 ： npm init 初始化项目生成package.json文件 二 ： npm install vite -D 下载vite到package里面,这样就可以使用vite了 三 ： 直接npx vite命令就可以启动项目了，会生成一个http://127.0.0.1:5173/的服务
|
math.js里面
（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） 
（3）：创建vite.config.js 对vue文件进行转译，变成浏览器可以运行的文件（html,css,js,静态资源等） 
六 ： 使用npx vite就可以启动vue的服务了 npx build 对项目进行打包 七 ： 如果想生成本地ip的服务不是localhost或者127.0.0.1 在vite.config.js里面配置host就可以了 八 ： 到了这里还差一丝，vue是npm run 启动项目的不是npx【本文地址】
今日新闻 |
推荐新闻 |