Svelte 3 - Svelte 라우팅과 통합하는 방법

13444 단어 sveltewebdevbeginnersjavascript
안녕하십니까? 제가 하고 있는 빠른 문장 시리즈의 일부분입니다.
그래서 이제는 루트 핸들을 실현할 때다.우리가 멋진 워터 클리닉과 스웰을 세우고 싶을 때, 이것은 보통 다음 단계이다.
그러나 우선 나는 실행 가능한 루트 선택에 대해 이야기하고 싶다. 그러면 너는 너의 프로젝트를 위해 가장 좋은 것을 선택할 수 있다.

슬림한 노선 옵션🎨


이 세 녀석은 가장 유용한 라이브러리와 프레임워크로 공유기를 사용해야 할 때 찾을 수 있다.

  • Sapper는 웹 응용 프로그램을 구축하는 데 도움을 주는 프레임워크입니다. Svelte가 지원합니다. 그러면 이것은 무엇을 의미합니까?Sapper만 설치하면 됩니다. 라우팅을 포함한 일련의 기능이 있습니다.

  • svelte-routing, 이것은 성명적인 Svelte 루트 라이브러리입니다. 이것은 우리가 본고에서 사용할 라이브러리입니다.내가 이걸 선택한 것은 npm 페이지에서 매주 다운로드 횟수가 가장 많은 라이브러리 중의 하나이기 때문이다.

  • svelte-spa-router, 마지막 옵션은 모듈 공유기입니다. 저는 이 라이브러리가 좋은 장점이 있다고 생각합니다. 그 중 하나는 해시를 바탕으로 하는 루트를 이용했습니다.
    • 이제 우리는 몇 가지 옵션을 알게 되었다. 우리는 내가 가장 좋아하는 부분으로 넘어갈 수 있다.

    인코딩하라고!!🎧💻


    기계에서 기본적인 Svelte 프로젝트를 실행하면 다음 단계는 Svelte 루트 라이브러리를 설치하는 것입니다. 이 점을 하려면 다음 명령을 실행하십시오
    npm i svelte-routing

    라우팅 및 첫 페이지 만들기


    이후에 우리는 일부 페이지를 추가하고 루트를 사용하기 시작할 준비를 한다.이 점에서 우리는 두 가지로 나눌 것이다.

    1. 정보 및 홈 페이지 만들기


    먼저 pages 내부에 src 라는 폴더를 만들고 구성 요소 About.svelte 와 Home.svelte 를 추가합니다.
    여기에서 구성 요소에 위조 코드를 추가할 수 있습니다. 저에게는 이 코드를 추가하고 변수만 변경할 것입니다. 원한다면 마음대로 복사하십시오.
    <script>
    let pageName="Home Page";
</script>

<main>
    <h1> {pageName}!</h1>
    <p>Welcome this is my <b>{pageName}</b></p>
</main>

<style>
    main {
        text-align: center;
        padding: 1em;
        max-width: 240px;
        margin: 0 auto;
    }

    h1 {
        color: #ff3e00;
        text-transform: uppercase;
        font-size: 4em;
        font-weight: 100;
    }

    @media (min-width: 640px) {
        main {
            max-width: none;
        }
    }
</style>
    이전의 변경 사항을 적용한 후에 프로젝트는 이렇게 보일 필요가 있습니다.

    2. App을 수정합니다.날씬했어


    이제 저희 pageName 를 수정할 때가 되었습니다. 여기에 App.svelte 설정과 작은 내비게이션 표시줄을 추가해서 페이지 사이를 내비게이션할 것입니다.
    스크립트 부분에서 공유기, 루트, 연결 구성 요소가 있는 긴 루트 라이브러리를 가져오고 두 페이지를 추가합니다.
    <script>
  import { Router, Route, Link } from "svelte-routing";
  import Home from "./pages/Home.svelte";
  import About from "./pages/About.svelte";
  export let url = ""; //This property is necessary declare to avoid ignore the Router
</script>
    그리고 나서 우리는 두 개의 링크를 포함하여 네비게이션 표시줄과 Router 부분을 설정할 것이다.
    <Router url="{url}">
 <nav>
    <Link to="/">Home</Link>
    <Link to="about">About</Link>
  </nav>
  <div>
    <Route path="about" component="{About}" /> 
    <!--for now the router just support case sensitive,
        one workaround colud be add two time the route
        Example.
       <Route path="About" component="{About}" /> 
    -->
    <Route path="/"><Home /></Route>
  </div>
</Router>
    이 link 에서 각 슬림한 케이블 구성 요소의 속성에 대한 더 많은 정보를 찾으려면 더 많은 정보를 얻을 수 있습니다.
    따라서, 만약 당신이 응용 프로그램을 실행한다면, 우리는 홈페이지와 관련 페이지 사이를 내비게이션할 수 있고, 당신도 맨 위에 작은 내비게이션 표시줄을 볼 수 있습니다.

    마지막 설정


    훌륭했어현재 응용 프로그램이 실행 중입니다.하지만 About 페이지를 다시 로드하면 404 오류가 발생합니다.😢, 이 문제를 해결하기 위해서는 다음과 같은 변경이 필요합니다.

    1. 서버를 만듭니다.js 파일


    우선, 우리는 라이브러리 문서에서 찾은 규범을 포함하는 Router 파일을 만들어야 한다.기본적으로 이 코드는 색인에서 응용 프로그램을 시종일관 보여주기 위한 것이다.html, 코드를 여기에 남겨 둡니다.
    // server.js
const { createServer } = require("http");
const app = require("./dist/App.js");

createServer((req, res) => {
  const { html } = app.render({ url: req.url });

  res.write(`
    <!DOCTYPE html>
    <div id="app">${html}</div>
    <script src="/dist/bundle.js"></script>
  `);

  res.end();
}).listen(3000);

    2, 수화물 옵션을true로 설정


    이를 위해서는 server.js 파일의 속성 main.js 을 수정해야 합니다.
    // main.js
import App from './App.svelte';

const app = new App({
    target: document.body,
    hydrate: true
});

export default app;
    두 번째 수정은 hydrate 파일에 들어갈 것입니다. 여기서 지정한 응용 프로그램은 rollup.config.js 으로 컴파일됩니다.
    // rollup.config.js
...
plugins: [
        svelte({
            hydratable: true,
            // 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/build/bundle.css');
            }
        }),
        ...
    이제 마지막 수정은 hydratable 파일에서 start 스크립트를 변경하는 것입니다. 여기에 package.json 파라미터를 추가합니다
    // package.json
...
"scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "sirv public -s"
  }
...
    너무 좋아요.현재, 모든 것이 잘 작동해야 하며, 웹 응용 프로그램은 문제없이 모든 페이지에서 불러올 수 있어야 합니다.

    결론👨‍🎓


    Svelte routering은 훌륭한 라이브러리입니다. 이것은 인터넷에서 가장 좋은 루트 라이브러리 중 하나입니다. 이것은 우리가 최소한의 노력으로 SPA에 루트 기능을 추가하는 데 도움을 줄 수 있다고 생각합니다. 그러나 개인적으로 몇 페이지밖에 없는 작은 응용 프로그램을 만들고 프레임워크의 모든 기능을 가지고 싶지 않다면 이 라이브러리를 사용하는 것을 권장합니다.
    그러나 프레임워크를 사용하고 싶다면, Sapper는 중간 규모의 프로젝트를 만들 계획이라도, Sapper를 사용하면 응용 프로그램을 잘 제어할 수 있습니다.
    나는 이 작은 댓글이 너에게 도움이 되기를 바란다. 너는 Svelte로 다음 응용 프로그램을 만들 수 있다.
    Hive 입문부터 입문까지
    웹소켓 심장박동 패키지의 실현 방안

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage