实现一个 Code Pen:（一）我的项目初始化
前言
前段时间掘金上线了一个新性能 Code pen，能够在线写代码，浏览器就能够运行预览，在文章中就能够插入代码片段，对 web 开发者大有裨益，十分不便读者对文章的了解，笔者对这种在线实时编辑的性能充斥了好奇，所以打算开发一个繁难的 Code pen。
技术栈
Next.js
Tailwindcss
Uniapp 云数据库
初始化我的项目
应用以下命令初始化一个 next 我的项目
npx create-next-app next-code-pencd next-code-pen复制代码
装置 tailwindcss 相干包，初始化 tailwind.config.js
npm install -D tailwindcss postcss autoprefixernpx tailwindcss init -p复制代码
批改 tailwind.config.js 配置，将代码移动到src目录下，这个是我的集体偏好
module.exports = { content: [ "./src/**/*.{js,ts,jsx,tsx}" ], theme: { extend: {}, }, plugins: [],}复制代码
页面构造
用 Tailwind 来实现一个页面
SVG 实现 LOGO
有个好的 logo 才能够开始一个好的我的项目
<div className="flex justify-center items-center h-16 w-28"> <svg className="w-10 h-10" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" > <path d="M512 341.33333336c0-94.4 76.8-171.2 171.2-171.2 94.4 0 171.2 76.8 171.2 171.2s-76.8 171.2-171.2 171.2C588.8 512.53333336 512 435.73333336 512 341.33333336z" fill="#FF3C41" ></path> <path d="M171.2 682.13333336c0-94.4 76.8-171.2 171.2-171.2H512v171.2C512 776.53333336 435.2 853.33333336 340.8 853.33333336s-169.6-76.8-169.6-171.2z" fill="#0EBEFF" ></path> <path d="M171.2 341.33333336c0 94.4 76.8 171.2 171.2 171.2H512V170.13333336H340.8c-94.4 0-169.6 76.8-169.6 171.2z" fill="#FCD000" ></path> <text fill="#fff" x="520" y="860" fontFamily="Verdana" fontSize="460" > + </text> </svg> <span className="ml2 text-gray-50">CODE</span></div>复制代码
这个 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 次。
<SplitPane defaultSize="50%" split="vertical"> <SplitPane split="horizontal" defaultSize="33%"> <div className="overflow-hidden flex flex-col w-full"> </div> <SplitPane split="horizontal" defaultSize="50%"> <div className="overflow-hidden flex flex-col h-full w-full"> </div> <div className="overflow-hidden flex flex-col h-full w-full"> </div> </SplitPane> </SplitPane> <div className="bg-red-50 h-full overflow-hidden"></div></SplitPane>