v-island，vue3打造的ssg框架-01，初始化项目

前言

在学习掘金课程《基于 Vite 的 SSG 框架开发实战》过程中，看到课程的UI渲染是使用react，但本人更擅长vue，所以决定将react渲染UI改造成vue渲染，从而创建一个专栏，来记录整个过程。

ssg的概念及优劣点，建议大家购买课程观看，这里就不再赘述了。

1、初始化项目

创建文件夹v-island，本项目使用pnpm管理，进入到v-island文件夹，使用pnpm init生成package.json，然后安装typescript和@types/node。

pnpm 复制代码

- pnpm install typescript @types/node --dev-save

命令行交互插件使用cac，前端编译使用vite。

pnpm 复制代码

- pnpm install cac vite

2、创建入口文件

在根目录下创建src和bin目录，src用于存放业务代码，src目录下创建node目录，node目录下创建cli.ts和dev.ts，bin目录下再创建index.js，作为脚本入口以及tsconfig.json。目录结构如下：

diff 复制代码

- bin
   |--- index.js
- src
   |--- node
         |--- cli.ts
         |--- dev.ts
- package.json
- pnpm-lock.yaml
- tsconfig.json

3、搭建开发环境下的脚本

首先在脚本入口文件添加以下内容：

node 复制代码

// /bin/index.js

#!/usr/bin/env node
require("../dist/node/cli");

tsconfig.json文件增加ts的编译出入口。

json 复制代码

{
  "compilerOptions": {
    "module": "commonjs",
    "outDir": "dist",
    "rootDir": "src",
    "target": "ESNext"
  }
}

package.json文件增加如下配置：

json 复制代码

{
  "main": "index.js",
  "scripts": {
    "dev": "tsc -w"
  },
  "bin": {
    "v-island": "bin/island.js" // npm link后安装到全局的脚本入口
  },
  .
  .
  .
}

4、搭建开发环境下的web服务

使用vite搭建web服务，解析更快，插件丰富，是现在最流行的前端脚手架框架。首先dev.ts添加以下内容：

ts 复制代码

import { createServer } from "vite";

export default function createDevServer(root: string) {
  return createServer({root});
}

导出vite服务。

再在cli.ts添加以下内容：

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，将脚本文件编译成js文件，然后执行npm link将脚本安装到全局。最后执行v-island dev就会启动开发环境下web服务，这就完成了该项目的基本搭建。