날씬-간단함이 최고예요.

Github 환매

여러분의 복습에 편리하도록 저는 작은 웹 응용 프로그램을 만들어서 Svelte의 가치를 보여 주었습니다. 가장 기본적인 웹 개발 단계에서도 Svelte는 아름다운 템플릿 엔진입니다.포크, 복제, 달리기, 복제, 사용, 웃음, 고개 젓기 등등...마음껏 즐기다.
구성 요소의 중용성을 보여 주기 위해서 나는 작은 도구를 사용했다.응용 프로그램.슬림함, Form Input.날씬하고 단추.svelte의 코드는 svelte를 사용하여 중용성을 실현하기 쉬운 정도를 반영한다.
주의: 단추나 폼에 추가 기능을 입력하지 않았습니다.이 응용 프로그램의 목적은 템플릿 기능을 보여 주는 것이다.이 응용 프로그램은 이동 응답 능력이 없습니다.

dbshanks 은행 / devTO 문서

SvelteJS의 DEV.TO 글에 대한 간단한 scaffold 로그인 페이지

복제 재구매.새 응용 프로그램을 원하는 항목 이름으로 변경합니다.

npx degit dbshanks/devTO-article my-new-app

npm 설치를 실행합니다.

cd my-new-app && npm install

dev 스크립트를 실행하여 프로젝트를 처리합니다.

npm run dev

View on GitHub
여기서 실시간 작업 프레젠테이션을 볼 수 있습니다.
https://dbshanks.github.io/devTO-article

소개

대량의 글과 영상 강좌가 있어'날씬함'의 단순성을 이용하여 복잡한 아이디어를 만드는 방법을 소개할 것이다.
나는 Svelte를 디자인 도구로 사용하는 가장 기본적인 실현을 더욱 뒤로 확장하고 싶다.
모든 사람들이 복잡한 반응식 응용 프로그램을 구축해야 하는 것은 아니다. 우리 중 일부는 여전히 너무 간단한 로그인 페이지와 일반적인 온라인 상태를 구축하고 있다.
우리는 코드가 건전하고 우호적인 디자인을 유지할 가치가 있다.내가 환매 협의에서 제공한 설계에 대해 말하자면.대부분의 사람들은 이러한 작은 프로젝트를 실현하기 위해 React, Vue, Angular 및 기타 도구를 영원히 이용하지 않는다.
이러한 가장 작은 용례에 대해 Svelte는 완벽한 도구이다.이것은 우리 대다수 사람들이 2015년에 일찍이 꿈꾸었던 구성 요소 구조라고 나는 믿는다. 당시에는'구성 요소 구조'가 전 세계를 휩쓸었고 Github에는 도처에 창고가 있었다.
Svelte는 생산 구축 시 코드 라이브러리에서 추출한 컴파일러이기 때문에 여전히 가장 작습니다.React, Vue, Angular 등의 항목은 라이브러리이거나 전체 프레임워크입니다.Svelte가 있으면 어플리케이션은 작은 번들일 뿐입니다.HTML에 연결된 js 파일입니다.

응용 프로그램

이것은 나의 SRC 폴더가 작은 응용 프로그램에 있는 구조이다.나는 여전히 CSS/SCS를 구성 요소 논리와 분리하는 것을 좋아한다.
이 형식은 여전히 익숙해 보일 것입니다. 패턴은 React, Vue, ANGUAL에서 사용됩니다.Svelte는 아직 젊지만 폴더 구조를 위해 신뢰할 수 있는 프로젝트 모델이나 최선의 실천 개념을 제시하고 싶습니다.

src
├── App.scss
├── App.svelte
├── components
│   ├── Button
│   │   ├── Button.scss
│   │   └── Button.svelte
│   ├── Footer
│   │   ├── Footer.scss
│   │   └── Footer.svelte
│   ├── FormInput
│   │   ├── FormInput.scss
│   │   └── FormInput.svelte
│   └── Navigation
│       ├── Navigation.scss
│       └── Navigation.svelte
└── main.js

사전 프로세서 지원 추가

슬림한 응용 프로그램에 Sass나 다른 프로세서를 추가하고 싶다면.이것은 매우 간단한 수정이다.다음 NPM 패키지를 SvelteJS 프로젝트에 설치합니다.이때 나는 그 중 하나와의 일치성만 검증할 수 있다.sass 혹은.scss 파일.실험을 계속하다.

npm install svelte-preprocess node-sass

"rollup"의plugins 부분을 대체하기 위해 다음 코드 줄을 추가합니다.구성js 파일.

    plugins: [
        svelte({
            // enable run-time checks when not in production
            dev: !production,
            // we'll extract any component CSS out into
            // a separate file — better for performance
            css: css => {
                css.write('public/bundle.css');
            },
            preprocess: autoPreprocess() // Add the autoPreprocess package to plugins.
        }),

요약에 슬림 사전 처리를 추가합니다.구성js의 가져오기는 파일 맨 위에 있습니다.sveltepreprocess 자동 검출 노드sass 패키지를 개발하고 구축하는 과정에서 사용합니다.나는 전 세계를 떠났다.최소한의 기본값을 제외하고는 css가 닿지 않았습니다.

import autoPreprocess from 'svelte-preprocess'; //Add autoPreprocess to import.

이제 다음 중 하나를 수행할 수 있습니다.스타일을 어셈블리에 직접 연결합니다.

<style lang ="scss">

$primary-color: red;
$secondary-color: blue;

h1 {
 color: $primary-color;
}

h2 {
 color: $secondary-color;
}
</style>

또는, 원한다면, 나처럼 구성 요소의 스타일 태그 사이를 통해 Sass 파일을 가져오고, 스타일시트를 가져오기로 설정할 수 있습니다.

<style lang="scss">
 @import './componentName.scss';
</style>

총결산

사람들은 Svelte와 웹 응용 프로그램으로 개발된 goto 도구의 미래에 대해 흥분했다.Github repo의 작은 응용 프로그램에서 보여준 바와 같이 Svelte를 사용하여 코드를 시작하고 실행하는 것은 매우 적다.
전면에서 이것은 보기에 간단해 보이는 단일 페이지 디자인이다.백엔드에서 이 사이트는 필요에 따라 확장할 수 있는 완전한 반응 도구가 있다.개발자로서 우리는 간단한 응용 프로그램의 시작을 추진할 수 있다.미래에 우리는 프로젝트 규모의 수요를 충족시키기 위해 복잡한 응용 프로그램을 더욱 개발할 수 있다.
내가 스웨트와 함께 축구를 하도록 사람들을 끌어들였으면 좋겠다.
이것은 Dave Ceddia가 Sass를 Svelte로 실현하는 것에 관한 문장https://daveceddia.com/svelte-with-sass-in-vscode/의 계발을 받은 것이다