介绍
我正在为一个新项目提出建议，突然屏幕看起来像这样。我收到了一个请求。我不是前端工程师，所以不擅长这种事情，但是我觉得这会是一个很好的机会来尝试我最近感兴趣的 Svelte，所以我决定给它试一试。
我对前端的了解不多，但是我能够构建一个简单的原型，所以我想记录一下。
所以，可能会有错误或奇怪的地方，所以请自行负责。
环境
视窗 10 专业版
WSL2
Docker（安装在 WSL2 上）* Docker Desktop 也是可能的
VS 代码
尝试
前提
使用 VS Code + Docker，在容器上创建环境。
如果包含 Node.JS 就可以了。
安装
要回答这个问题，请使用以下命令创建一个空项目。
npm init vite@latest
我想要最新版本，所以 3.2.0 就可以了。输入“y”并输入
Need to install the following packages:
create-vite@3.2.0
Ok to proceed? (y) y
适当设置项目名称。现在默认没问题
您将被要求选择一个框架。选择“Svelte”并输入
✔ Project name: … vite-project
? Select a framework: › - Use arrow-keys. Return to submit.
Vanilla
Vue
React
Preact
Lit
❯ Svelte
Others
然后选择“SvelteKit”
? Select a variant: › - Use arrow-keys. Return to submit.
JavaScript
TypeScript
❯ SvelteKit
在此处选择“y” 骨架项目
Need to install the following packages:
create-svelte@2.0.0-next.188
Ok to proceed? (y) y
由于我们要创建一个空项目，因此选择“Skeleton project”并输入
? Which Svelte app template? › - Use arrow-keys. Return to submit.
SvelteKit demo app
❯ Skeleton project
Barebones scaffolding for your new SvelteKit app
Library skeleton project
为模板选择“TypeScript”并输入
✔ Which Svelte app template? › Skeleton project
? Add type checking with TypeScript? › - Use arrow-keys. Return to submit.
Yes, using JavaScript with JSDoc comments
❯ Yes, using TypeScript syntax
No
最后，会要求你输入 ESLint 和 Prettier，所以选择“y”并输入
✔ Which Svelte app template? › Skeleton project
✔ Add type checking with TypeScript? › Yes, using TypeScript syntax
✔ Add ESLint for code linting? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
✔ Add Playwright for browser testing? › No / Yes
如果您到目前为止已经完成，将创建完成基本设置的项目。
然后运行以下命令启动应用程序
cd vite-project
npm install
npm run dev -- --open
浏览器将启动并
出现这样的画面就OK
放顺风css
关注tailwindcss官方网站，继续工作。
由于基本上是根据官网的，我就省略了，但我是按照下面的流程工作的。
- 安装tailwindcss
- 修复 svelte.config.js（启用 PostCSS）
- 修改tailwind.config.cjs（路径设置）
- 创建 app.css创建
- +layout.svelte
到此为止，当我启动并修改样式时，我能够安全地使用tailwindcss样式。
环境准备现已完成。
苗条的基础知识
在实际创建屏幕之前，让我们了解如何使用 Sveltekit 创建应用程序。
查看 VSCode 树，它看起来像这样。
通过将文件放在 src/routes 下，您可以创建一个单页应用程序。
+layout.svelte
用于定义通常应显示的元素的文件，例如导航和页脚。
⁺page.svelte 在同一层次结构中显示在 .
+page.svelte
定义应用程序的页面。
创建层次结构
通过在 src/routes 下创建层次结构，可以分隔页面。
例如
src/routes/price/+page.svelte
如果您创建一个名为 的层次结构和文件，则可以访问该页面。
制作原型屏幕
所以，有了目前为止的内容，我将制作一个原型。
我对tailwindcss了解不多，所以我会使用以下网站上发布的库组。
做一个标题
从这里复制代码。复制目标是
+layout.svelte
是。复制上面的插槽。之后，删除不需要的部分（被！-- 菜单注释包围的部分）。
如果成功，您将看到这样的屏幕。如果失败，VSCode 中会出现错误，请相应更正。
做一个页脚
以同样的方式创建页脚。
现在将其复制到 slot 标签下。
您可以像这样创建页脚。
创建首页
现在将代码放入 +page.svelte。
好吧，一切都很好，但是 +page.svelte 中描述的内容被插入到页眉和页脚之间。
创建价格页面
创建一个新文件 src/routes/price/+page.svelte。
然后修改 src/routes/+layout.svelte
<a href="/price" class="text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Pricing</a>
现在，当您在菜单上按价格时，您已转换到价格页面，不包括页眉页脚。
在最后
在开始工作后的大约半天时间里，我就能够组织我想要制作的屏幕的轮廓。
为了使其成为原型画面，需要修改措辞等，
我发现它非常有用，因为它足以让我创建和分享我的屏幕图像。
我意识到我根本没有使用 TypeScript，所以
将来我会尝试更深入地挖掘。
原创声明：本文系作者授权爱码网发表，未经许可，不得转载;
原文地址：https://www.likecs.com/show-308631972.html