实现一个 Code Pen:（一）项目初始化

实现一个 Code Pen:（一）项目初始化

前言

前段时间掘金上线了一个新功能 Code pen，可以在线写代码，浏览器就可以运行预览，在文章中就可以插入代码片段，对 web 开发者大有裨益，非常方便读者对文章的理解，笔者对这种在线实时编辑的功能充满了好奇，所以打算开发一个简易的 Code pen。

技术栈

Next.js
Tailwindcss
Uniapp 云数据库

初始化项目

使用以下命令初始化一个 next 项目

npx create-next-app next-code-pen
cd next-code-pen

复制代码
安装 tailwindcss 相关包，初始化 tailwind.config.js

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

复制代码
修改 tailwind.config.js 配置，将代码移动到src目录下，这个是我的个人偏好

module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

复制代码

页面结构

用 Tailwind 来实现一个页面
SVG 实现 LOGO
有个好的 logo 才可以开始一个好的项目

   
   CODE

复制代码

这个 logo 部分来源figma，后面再加一个+，意味着后我们可以从它开始一些五彩斑斓的项目。
页面主体部分
我们先安装 react-split-pane, 把我们的页面拆分成几块，分为HTML，CSS，JS，可以拖拽视窗大小，这个包依赖版本是 react16， 由于 react 是平滑升级，所以可以强制安装
npm i react-split-pane --force
复制代码
使用 react-split-pane ，初始化页面结构, react-split-pane 是将页面拆分成 2 块，若要拆分成 3 块的话，要使用 2 次。