【Vite基础】001-使用 Vite 创建 vue3 项目
[toc]
一、Vite 概述
1、什么是 vite
项目构建工具。
2、优势
vite
方便，更快，更好用；
用了 esbuild 编译快。
其它
webpack 更全面；
rollup 更专一；
二、使用 vite 创建 vue3 项目
1、创建项目
命令
# 使用 npm
npm init vite@latest
# 使用 yarn
yarn create vite
# 使用 pnpm
pnpm create vite
2、步骤演示
第一步：执行创建命令
命令
第一次可能会提示安装，输入 y 即可！默认创建的是 vue3 项目！
npm init vite@latest
截图
第二步：设置项目名
直接输入，如 vite-vue3
第三步：设置包名
默认和项目名一致，我这里就不设置，直接回车了！
第四步：选择框架
按上下箭头键选择框架！
第五步：选择语言
这里直接选 js 了，后面会专门有一篇文章记录 ts ！
第六步：创建完成
第七步：进入目录并安装依赖
第八步：运行项目
npm run dev
第九步：访问项目
第十步：项目结构
三、说明
1、Vite 编译入口
一定是一个 html 文件！
// 加载 main.js
<script type="module" src="/src/main.js"></script>
2、支持 JSX 写法
第一步：安装 JSX 插件
使用 npm 可能会出问题！
yarn add @vitejs/plugin-vue-jsx
第二步：修改 vite.config.js 文件
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 导入 vueJsx
import vueJsx from '@vitejs/plugin-vue-jsx'
// https://vitejs.dev/config/
export default defineConfig({
// 调用 vueJsx()
plugins: [vue(), vueJsx()],
})
第三步：在 src 目录创建 App.jsx 文件
import { defineComponent } from "vue";
export default defineComponent({
setup() {
return () => <div>Hello JSX !</div>;
}
});
第四步：删除 App.vue 文件
第五步：修改 main.js 文件
import { createApp } from 'vue'
import './style.css'
// 去掉 .vue 使其指向 App.jsx
import App from './App'
createApp(App).mount('#app')
