目录
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 # 这里是编译运行,速度很快
> [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,01,run,vue03,创建,vue,打包,vite,build
From: https://www.cnblogs.com/haima/p/17254114.html