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

云原生应用架构设计与开发实战无密超清原画完整无密包括所有视频课件以及源码 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 才干够开端一个好的项目

+ 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 次。