vite构建vue3.0项目

304 阅读1分钟

vite官网: vitejs.dev/

1. 什么是vite 新一代的前端构建工具

2. 优势

  • 开发环境中,不需要打包操作,可以快速冷启动
  • 轻量快速的热重载(HMR)
  • 按需编译,不用等待整个应用编译完成

3、传统构建 与 vite 构建对比 在这里插入图片描述 4、创建工程

// 创建工程
npm init vite-app project-name

// 进入项目目录
cd project-name

// 安装依赖
npm install 

// 运行
npm run dev

项目结构 在这里插入图片描述

在这里插入图片描述 main.js说明:

//引入  createApp 函数,不在是 Vue 的构造函数
import { createApp } from 'vue'
import App from './App.vue'

// 创建应用实例对象 app (类似于 Vue2 中的vm,但是比 vm 更轻)
const app = createApp(App)

// 挂载
app.mount('#app')