目录
- 01.创建项目
- 打包工具
- vite介绍
- 安装命令
- 启动项目
- 浏览效果
- 代码目录
- 打包
- 预览运行
- 插件使用
01.创建项目
打包工具
vite介绍
- Vite也是前端构建工具
- 相较于webpack,vite采用了不同的运行方式：
- 开发时，并不对代码打包，而是直接采用ESM的方式来，而是直接采用ESM的方式来运行项目
- 在项目部署时，在对项目进行打包
- 除了速度外，vite使用起来也更加方便
- 基本使用
- 安装开发依赖vite
- vite的源码目录就是项目根目录
- 开发命令：
- vite 启动开发服务器
- vite build打包代码
- vite preview 预览打包后代
安装命令
使用 NPM:
npm create vite@latest
使用 CNPM:
cnpm create vite@latest
使用 Yarn:
yarn create vite
使用 PNPM:
pnpm create vite
然后按照提示操作即可！
看到下面的提示代码创建成功
然后按下面的命令依次操作
√ Select a variant: » TypeScript
Scaffolding project in G:\site\view\vue-dome01...
Done. Now run:
cd vue-dome01
npm install
npm run dev启动项目
npm run dev 或者 yarn dev
$ npm run dev # 这里是编译运行，速度很快
> [email protected] dev
> vite
VITE v4.2.1 ready in 742 ms
➜ Local: http://127.0.0.1:5173/
➜ Network: use --host to expose
➜ press h to show help浏览效果
代码目录
打包
npm run build
$ npm run build
> [email protected] build
> vue-tsc && vite build
vite v4.2.1 building for production...
✓ 18 modules transformed.
dist/index.html 0.45 kB
dist/assets/vue-5532db34.svg 0.50 kB
dist/assets/index-c322ae43.css 1.30 kB │ gzip: 0.67 kB
dist/assets/index-2424b2d8.js 54.50 kB │ gzip: 21.98 kB
✓ built in 2.54s预览运行
注意先 npm run build 打包才能 预览运行
npm rum preview
$ npm run preview
> [email protected] preview
> vite preview
➜ Local: http://127.0.0.1:4173/
➜ Network: use --host to expose插件使用
安装插件
npm add -D @vitejs/plugin-legacy
vim vite.config.js
import legacy from '@vitejs/plugin-legacy'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [
legacy({
targets: ['defaults', 'not IE 11'],
}),
],
})