Vite2+Vue3学习笔记（一）：Vue3.0项目搭建及配置过程_vite vue3.0 img配置

前言

本人职场小白，公司让学习Vite和Vue3并搭建项目Demo，借这个机会自己尝试写写博客，主要目的是搭项目，所以原理性的知识没有过多阐述，写博客时也根据步骤复现了，对于新手直接跟着操作就可以把项目搭起来，少走了很多弯路，希望对大家有帮助。

文中参考链接都有附上，参考时可以看看，如果有任何错误或意见也欢迎大家指点。

项目码云Gitea地址

Vite-Demo: 使用vite2.0及vue3.0并集成Element Plus，开发后台管理系统demo。

一、使用Vite脚手架搭建项目Demo

Vite官网：开始 | Vite 官方中文文档

随着 Vue 3 一起推出的还有一个强大的新一代打包工具 Vite, 一个面向现代浏览器，基于原生模块系统 ESModule 实现了按需编译的 Web 开发构建工具，恰恰就解决了上述 Webpack 的痛点。

Vite 主要的优势有三点：

• 快速冷启动服务器
• 即时热模块更换（HMR）
• 真正的按需编译

1.初始化项目

1）安装

npm init @vitejs/app 项目名 --template vue

npm init @vitejs/app test-demo-1 --template vue 
1

• package.json

{
  "name": "test-demo-1",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": &
1
2
3
4
5