【Vite基础】001使用Vite创建vue3项目

【Vite基础】001-使用 Vite 创建 vue3 项目

一、Vite 概述

1、什么是 vite

项目构建工具。

2、优势

vite

方便&＃xff0c;更快&＃xff0c;更好用&＃xff1b;

用了 esbuild 编译快。

其它

webpack 更全面&＃xff1b;

rollup 更专一&＃xff1b;

二、使用 vite 创建 vue3 项目

1、创建项目

命令

官网&＃xff1a;http://www.vitejs.net/guide/#scaffolding-your-first-vite-project

# 使用 npm
npm init vite&＃64;latest# 使用 yarn
yarn create vite# 使用 pnpm
pnpm create vite


2、步骤演示

第一步&＃xff1a;执行创建命令

命令

第一次可能会提示安装&＃xff0c;输入 y 即可&＃xff01;默认创建的是 vue3 项目&＃xff01;

npm init vite&＃64;latest


截图

第二步&＃xff1a;设置项目名

直接输入&＃xff0c;如 vite-vue3

第三步&＃xff1a;设置包名

默认和项目名一致&＃xff0c;我这里就不设置&＃xff0c;直接回车了&＃xff01;

第四步&＃xff1a;选择框架

按上下箭头键选择框架&＃xff01;

第五步&＃xff1a;选择语言

这里直接选 js 了&＃xff0c;后面会专门有一篇文章记录 ts &＃xff01;

第六步&＃xff1a;创建完成

第七步&＃xff1a;进入目录并安装依赖

第八步&＃xff1a;运行项目

npm run dev

第九步&＃xff1a;访问项目

http://127.0.0.1:5173/

第十步&＃xff1a;项目结构

三、说明

1、Vite 编译入口

一定是一个 html 文件&＃xff01;

// 加载 main.js



2、支持 JSX 写法

第一步&＃xff1a;安装 JSX 插件

使用 npm 可能会出问题&＃xff01;

yarn add &＃64;vitejs/plugin-vue-jsx


第二步&＃xff1a;修改 vite.config.js 文件

import { defineConfig } from &＃39;vite&＃39;
import vue from &＃39;&＃64;vitejs/plugin-vue&＃39;
// 导入 vueJsx
import vueJsx from &＃39;&＃64;vitejs/plugin-vue-jsx&＃39;// https://vitejs.dev/config/
export default defineConfig({// 调用 vueJsx()plugins: [vue(), vueJsx()],
})


第三步&＃xff1a;在 src 目录创建 App.jsx 文件

import { defineComponent } from "vue";export default defineComponent({setup() {return () &＃61;>

第四步&＃xff1a;删除 App.vue 文件

第五步&＃xff1a;修改 main.js 文件

import { createApp } from &＃39;vue&＃39;
import &＃39;./style.css&＃39;
// 去掉 .vue 使其指向 App.jsx
import App from &＃39;./App&＃39;createApp(App).mount(&＃39;#app&＃39;)


第六步&＃xff1a;运行访问