1. 创建 vite 项目
按照顺序执行如下命令，即可基于 vite 创建 vue 3.x 的工程化项目：
npm init vite-app 项目名称
cd 项目名称
npm install
npm run dev
生成网页效果如下：
2. 梳理项目结构
| 文件(夹) | 描述 |
|---|---|
| node_modules | 第三方依赖包 |
| public | 公共的静态资源目录 |
| src | 项目的源代码目录 |
| index.html | SPA 单页面应用程序中唯一的 HTML 页面 |
| gitgnore | Git 的忽略文件 |
| package.json | 包管理配置文件 |
在 src 项目源文件目录下，又包含了如下文件(夹)：
| 文件(夹） | 描述 |
|---|---|
| assets | 静态资源文件（如 css、fonts） |
| components | 存放自定义组件 |
| App.vue | 项目根组件 |
| index.css | 全局样式表 |
| main.js | 项目打包入口文件 |
3. vite 项目的运行流程
在工程化项目中，vue 要做的事情很单纯：通过 main.js 把 App.vue 渲染到 index.html 的指定区域中。
>> 要渲染的 App.vue
<template>
<h1>APP 根组件</h1>
</template>
>> 指定的 index.html 区域
<!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>
<div id="app"></div> <!--这里即为 el 区域-->
<script type="module" src="/src/main.js"></script>
</body>
</html>
>> 通过 main.js 进行渲染
// 1. 按需导入 createApp 函数
import { createApp } from 'vue'
// 2. 导入带渲染的 App.vue
import App from './App.vue'
// 3. 调用 createApp 函数，创建 SPA 应用实例
const app = createApp(App)
// 4. 调用 mount 方法将 App 组件模板结构渲染到指定 el 区域
app.mount('#app')
1113
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
