# 创建后台入口文件
## 1。创建 admin 目录
### （1）执行命令
mkdir resources\js\admin
### （2）说明
创建后台 Vue 应用的根目录，用于存放所有后台相关代码。
## 2。创建 main.js
### （1）文件路径
`resources\js\admin\main.js`
### （2）遇到的问题
**问题描述**：使用 `template` 选项时页面空白，Vue 无法渲染。
```javascript
// 错误的写法（页面空白）
import { createApp } from 'vue';
const app = createApp({
template: '<div>后台建设中...</div>'
});
app.mount('#app');
```
**原因分析**：Vite + `@vitejs/plugin-vue` 默认导入的是 Vue 的**运行时版本**，不包含编译器，因此 `template` 字符串无法被编译。
| 版本 | 包含编译器 | 支持 `template` | 支持 `render` |
|------|-----------|----------------|---------------|
| 完整版 | ✅ | ✅ | ✅ |
| 运行时版 | ❌ | ❌ | ✅ |
**解决方案**：使用 `render` 函数代替 `template`。
```javascript
// 正确的写法
import { createApp, h } from 'vue';
createApp({
render: () => h('div', { style: 'padding:20px;font-size:20px;' }, '后台建设中...')
}).mount('#app');
```
### （3）代码说明
| 代码 | 作用 |
|------|------|
| `import { createApp, h } from 'vue'` | 导入 Vue 的 createApp 方法和 h 渲染函数 |
| `createApp({ render: () => h(...) })` | 创建 Vue 应用实例 |
| `h('div', {}, '内容')` | 创建虚拟 DOM 节点 |
| `.mount('#app')` | 将应用挂载到 id 为 app 的 DOM 元素 |
### （4）设计原因
- 使用 `render` 函数避免引入 Vue 完整版，减小打包体积
- 后续开发组件时会使用 `.vue` 单文件组件，不存在此问题
- 当前只是临时测试页面，不需要复杂配置
## 3。创建后台视图
### （1）文件路径
`resources\views\admin.blade.php`
### （2）完整代码
```blade
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>好站站后台管理</title>
@vite('resources/js/admin/main.js')
</head>
<body>
<div id="app"></div>
</body>
</html>
```
### （3）代码说明
| 代码 | 作用 |
|------|------|
| `@vite('resources/js/admin/main.js')` | Laravel Vite 指令，自动引入编译后的 JS 和 CSS |
| `<div id="app"></div>` | Vue 应用的挂载点 |
## 4。添加后台路由
### （1）文件路径
`routes\web.php`
### （2）在文件末尾添加
```php
Route::get('/admin/{any?}', function () {
return view('admin');
})->where('any', '.*');
```
### （3）代码说明
| 代码 | 作用 |
|------|------|
| `/admin/{any?}` | 匹配所有以 /admin 开头的路径 |
| `{any?}` | 可选参数，匹配任意内容 |
| `where('any', '.*')` | 允许参数包含任意字符（包括斜杠） |
### （4）设计原因
- 必须放在路由文件最后，避免拦截其他路由
- 所有后台路径都返回同一个视图，由前端 Vue Router 接管路由
## 5。编译验证
### （1）执行命令
```bash
npm run build
```
### （2）预期输出
```
vite v6.4.2 building for production...
✓ 61 modules transformed.
public/build/manifest.json
public/build/assets/app-BNmie3Yz.css
public/build/assets/main-D8SmaUWc.js
public/build/assets/app-9HLU5-tG.js
✓ built in 3.21s
```
## 6。访问测试
浏览器打开：`http://engine-api.test/admin`
预期显示：「后台建设中...」
## 7。验证结果
| 验证项 | 预期结果 | 实际结果 |
|--------|---------|---------|
| 编译 | 无报错 | ✅ 通过 |
| 页面访问 | 显示「后台建设中...」 | ✅ 通过 |
| 控制台报错 | 无报错 | ✅ 通过 |