目录

01.创建项目

打包工具

vite介绍

  • Vite也是前端构建工具
  • 相较于webpack,vite采用了不同的运行方式：
    • 开发时，并不对代码打包，而是直接采用ESM的方式来，而是直接采用ESM的方式来运行项目
    • 在项目部署时，在对项目进行打包
  • 除了速度外，vite使用起来也更加方便
  • 基本使用
    1. 安装开发依赖vite
    2. vite的源码目录就是项目根目录
    3. 开发命令：
      1. vite 启动开发服务器
      2. vite build打包代码
      3. 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 # 这里是编译运行，速度很快
> vue-dome01@0.0.0 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

浏览效果

image

代码目录

image

打包

npm run build

$ npm run build

> vue-dome01@0.0.0 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

> vue-dome01@0.0.0 preview
> vite preview

  ➜  Local:   http://127.0.0.1:4173/
  ➜  Network: use --host to expose

插件使用

文档：
https://cn.vitejs.dev/guide/using-plugins.html

安装插件

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'],
    }),
  ],
})