关于云原生:云原生应用架构设计与开发实战无密

超清原画残缺无密包含所有视频课件以及源码 MP4 格局获取材料: 网盘链接
实现一个 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 才能够开始一个好的我的项目

<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 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>

云原生利用架构设计与开发实战无密