Riot.js에서 Tour of Heroes – Part1 새 프로젝트 제작 테스트

9348 단어 Riot.jstutorialtohtech
Riot.js(이하 riot)는 매우 간단하고 무게가 가볍고 입문 문턱이 낮으며 쓰기가 매우 좋은 구성 요소를 중심으로 하는 UI 라이브러리이다.
이 시리즈는 기본적으로Anglar 공식 웹 사이트의 자습서 페이지리오트로 묘사한 기사입니다. 조금 길기 때문에 여기서 몇 번으로 나누어 시리즈로 쓰고 싶습니다. 입문자로서의 레슨을 인내심을 가지고 볼 수 있다면 좋겠습니다.🙇
그럼 계속합시다!

항목 유형 만들기


우선 본 프로젝트 목록을 만들고 이동하며 riot 공식의 보일러판을 사용하여 모형을 만듭니다. 이번에는 webpack을 사용합니다. 터미널에서 아래 명령을 실행하십시오.
※ GiitHub로 코드를 관리하고 싶은 사람은 창고를🙇
# ディレクトリ作成および移動
$ mkdir riot-tour-of-heroes && cd riot-tour-of-heroes

# riot プロジェクトの作成
$ npm init riot

# いつもの npm init の手順ですので，お好きに設定してください
package name: (riot-tour-of-heroes)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository: (ssh://[email protected]/kkeeth/riot-tour-of-heroes.git)
keywords: riot, riotjs, tour-of-heroes
author: kkeeth
license: (ISC) MIT
About to write to /Users/k-kuwahara/src/github.com/kkeeth/riot-tour-of-heroes/package.json:

...(省略)

Is this OK? (yes) y

# ここからが riot プロジェクトの設定
# 前述通り，今回は Webpack 版を選択
? Please select a template …
❯  Webpack Project Template
   Parcel Project Template
   Rollup Project Template
   Simple Component
   SPA (Webpack) Project Template
   Custom Template (You will need to provide a template path to your template zip file)

✔ Please select a template · webpack
✔ Downloading the template files
✔ Unzipping the file downloaded
✔ Deleting the zip file
✔ Copying the template files into your project
✔ Deleting the temporary folder
✔ Template successfully created!
이상 프로젝트 완료!
또 자화자찬create-rit에 대한 보도도 큐타에 적었으니 참고하세요.
※ 이 기사에는 집필할 때 최신create-riot을 사용한 보일러판에 package.json가 압축(minify)될 수 있으므로 Prettier나외부 서비스 등의 형태의 성형도구를 사용하는 것을 권장한다고 기재되어 있습니다.
이로써 초기 형태의 제작이 완성되었다.

응용 프로그램 시작


프로젝트의 새 생성이 완료되었습니다. 프로그램을 시작하고 싶지만, 그 전에 필요한 모듈을 설치해야 합니다. 아래 명령을 실행하십시오.
$ npm install

# yarn をご利用の方
$ yarn
※ 이후 필자는 npm 명령을 일괄적으로 사용할 것이니 yarn 사용자를 적절히 교체하십시오.
설치가 완료되면 시작하겠습니다. 아래 명령을 실행하십시오.
$ yarn start
실행 후 자동으로 프로그램을 시작하고 브라우저를 시작합니다http://localhost:3000/ 화면이 열립니다!
アプリケーション起動
그나저나 이때package.json에는 자동으로 몇 가지 지령이 추가되니 확인해 주세요.

애플리케이션 변경 내용


나는 여기서부터 실제 개발 전의 각종 조정을 진행하고 싶다.

제목 수정


먼저 제목을 변경합니다. index.html 를 열어 다음 내용으로 변경하십시오.
 <!DOCTYPE html>
 <html>
   <head>
-    <title>My Riot App</title>
+    <title>Tour of Heroes</title>
     <link
       rel="stylesheet"
업데이트 후 브라우저 태그의 제목이 변경되면 OK👌

스타일 초기화(CSS 재설정)


그리고 기본적으로 지정한 스타일을 초기화합니다. 우선 index.html 지정한 두 스타일시트를 삭제합니다.
       rel="stylesheet"
       href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic"
     />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css"
-    />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.0/milligram.css"
-    />
   </head>
이렇게 하면 CSS 리셋 프로그램 라이브러리를 설치하고 이번에 ress를 이용한다. 또한 ress와 함께 webpack로 CSS를 묶는 모듈도 함께 설치한다.
$ npm install -D ress css-loader style-loader
설치가 완료되면 webpack 설정이 변경됩니다.
마지막으로 응용 프로그램에서 읽기webpack.config.js.
   module: {
     rules: [
       {
         ...(省略)
       },
+      {
+        test: /\.css$/i,
+        use: ["style-loader", "css-loader"],
+      },
     ],
만약에 이 정도까지 할 수 있다면 아래의 이미지에 조형이 없는 화면을 보여줄 수 있을 거라고 생각합니다.
リセットCSS適用後
이상 스타일링의 초기화가 완료되었습니다.

응용 프로그램의 기본 스타일 추가


그럼 다음은 프로그램 전체의 기본 스타일을 설정합니다. ress 디렉터리 바로 아래에 파일을 만듭니다. index.js 다음 내용을 보충해 주십시오.
 import "@riotjs/hot-reload";
 import { component } from "riot";
 import App from "./app.riot";
 import registerGlobalComponents from "./register-global-components";
+import "ress";
이렇게 할 수 있다면 아래 그림처럼 스타일을 바꿀 수 있을 것 같습니다. 상기 Part1'신축 프로젝트 제작'이 완료되었습니다!
ベーススタイル設定後
그럼, 계속Part2 영웅 편집기.
koa의 i18n 대응
후쿠오카시 공공시설 예약 상황 축소

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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