Open-WC 초보자 가이드

2474 단어 npmnodelittutorial

웹 컴포넌트의 세계에 오신 것을 환영합니다!



Open-WC는 웹 컴포넌트를 빠르게 개발할 수 있는 강력한 도구입니다. 여기에 몇 가지 간단한 JavaScript를 사용하고 몇 번만 설치하면 곧 숙련된 개발자가 될 것입니다.
  • 웹 개발에 Linux 또는 WSL을 사용하는 것이 좋습니다. 하지만 이 단계는 선택 사항이며 모든 설치 링크는 아래에 제공됩니다. 사용자 지정 터미널 모양과 느낌으로 WSL을 설치하려면 내 가이드를 따르세요.

    • 필요한 종속성:



  • NodeJS NodeJS에는 NPM이 포함되어 있으며 둘 다 하나의 명령으로 설치할 수 있습니다.

    • $ sudo apt-get install -y nodejs


    선택적 설치:


  • VS-Code
  • 권장 VSCode 확장:


    • Open-WC 설치/설정:



  • 폴더를 만들고 디렉토리에 입력하십시오.

    $ mkdir open-wc-demo
$ cd open-wc-demo


  • NPM 설치Open-WC

    $ npm init @open-wc

  • Enter 키를 사용하여 "Scaffold a new project"를 선택합니다.
  • Enter 키를 사용하여 "웹 구성 요소"를 선택합니다.
  • "a"를 눌러 All(Linting, Testing, & Demoing)을 선택한 다음 Enter 키를 누릅니다.
  • Typescript를 사용하지 않으려면 "아니오"를 선택하십시오. 우리는 자바스크립트를 사용할 것입니다.
  • 그런 다음 웹 구성 요소에 이름을 지정합니다. 제 이름은 "open-wc-test"입니다.
  • 디스크에 파일 구조를 쓰려면 예를 선택합니다.
  • 그런 다음 "예, npm 사용"을 선택하여 모든 종속성을 설치합니다.
  • 마지막으로 모든 것이 작동하는지 테스트하기 위해 npm start
    • 를 실행합니다.



    Open-WC로 개발하기


  • Lit Documentation ,
    • 에서 자세히 알아보기
  • Open-WC Documentation에서 자세히 알아보기

    • Lit Playground에서 제공하는 Hello World 예시

    22가지 JavaScript 캔버스 필터(Instagram과 유사) #SmartHack
    5년 동안 Java로 작업, 오늘 "가치에 의한 전달"로 큰 놀라움을 얻었습니다.

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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