前言
在学习掘金课程《基于 Vite 的 SSG 框架开发实战》过程中，看到课程的UI渲染是使用react，但本人更擅长vue，所以决定将react渲染UI改造成vue渲染，从而创建一个专栏，来记录整个过程。
ssg的概念及优劣点，建议大家购买课程观看，这里就不再赘述了。
1、初始化项目
创建文件夹v-island，本项目使用pnpm管理，进入到v-island文件夹，使用pnpm init生成package.json，然后安装typescript和@types/node。
- pnpm install typescript @types/node --dev-save
- pnpm install cac vite
2、创建入口文件
在根目录下创建src和bin目录，src用于存放业务代码，src目录下创建node目录，node目录下创建cli.ts和dev.ts，bin目录下再创建index.js，作为脚本入口以及tsconfig.json。目录结构如下：
- bin
|--- index.js
- src
|--- node
|--- cli.ts
|--- dev.ts
- package.json
- pnpm-lock.yaml
- tsconfig.json
3、搭建开发环境下的脚本
首先在脚本入口文件添加以下内容：
// /bin/index.js
#!/usr/bin/env node
require("../dist/node/cli");
tsconfig.json文件增加ts的编译出入口。
{
"compilerOptions": {
"module": "commonjs",
"outDir": "dist",
"rootDir": "src",
"target": "ESNext"
}
}
package.json文件增加如下配置：
{
"main": "index.js",
"scripts": {
"dev": "tsc -w"
},
"bin": {
"v-island": "bin/island.js" // npm link后安装到全局的脚本入口
},
.
.
.
}
4、搭建开发环境下的web服务
使用vite搭建web服务，解析更快，插件丰富，是现在最流行的前端脚手架框架。首先dev.ts添加以下内容：
import { createServer } from "vite";
export default function createDevServer(root: string) {
return createServer({root});
}
导出vite服务。
再在cli.ts添加以下内容：
import cac from "cac";
import createDevServer from './dev';
const cli = cac("island").version("0.0.1").help();
cli.command("dev [root]", "start dev server").action(async (root: string) => {
const server = await createDevServer(root);
await server.listen();
server.printUrls();
});
cli.parse();
5、完成脚本安装
脚本是用于启动开发环境下的web服务以及编译前端文件，所以首先执行pnpm run dev，会生成一个dist目录，这个目录下就是前端web服务以及编译运行脚本。然后执行npm link将脚本安装到全局。最后执行v-island dev就会启动开发环境下web服务，这就完成了该项目的基本搭建。
后端编译成功
前端web服务启动成功
