文章目录
2 vite 的基本使用
2.1 创建 vite 的项目
按照顺序执行如下的命令，即可基于 vite 创建 vue 3.x 的工程化项目：
npm init vite-app 项目名称
cd 项目名称
npm install
npm run dev
2.1.1 在对应的文件夹下打开命令窗口
2.1.2 运行 npm init vite-app 项目名称
2.1.3 运行 cd 项目名称
2.1.4 运行 npm install
2.1.5 运行
2.1.6 打开网站
2.2 梳理项目的结构
使用 vite 创建的项目结构如下：
其中：
在 src 这个项目源代码目录之下，包含了如下的文件和文件夹：
其中：
2.3 vite 项目的运行流程
在工程化的项目中，vue 要做的事情很单纯：通过 main.js 把 App.vue 渲染到 index.html 的指定区域中。
其中：
2.3.1 在 App.vue 中编写模板结构
清空 App.vue 的默认内容，并书写如下的模板结构：
<template>
<h1>App 组件</h1>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
</style>
2.3.2 在 index.html 中预留 el 区域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<!-- index.html 中预留 el 区域 -->
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
2.3.3 在 main.js 中进行渲染
按照 vue 3.x 的标准用法，把 App.vue 中的模板内容渲染到 index.html 页面的 el 区域中：
// 1.导入创建Vue单页面应用程序实例对象的函数
import { createApp } from 'vue'
// 2.导入对应需要渲染的App组件
import App from './App.vue'
// 3.创建单页面应用程序实例对象
const app = createApp(App)
// 4.调用mount()方法把App组件渲染到index.html中指定的el区域
app.mount( '#app' )
注意：
在Vue3可以有多个根节点，不用在最外包一层div。
