Vue 3, Vite 2, VueX 4 및 Tailwind가 포함된 HackerNews 리더 - 1부

VueJS는 React(Facebook에서 지원) 및 Angular(Google에서 제공)와 비교하여 가장 인기 있는 프런트 엔드 프레임워크 중 하나로 부상하고 있습니다. 최근에 많은 새롭고 흥미로운 기능을 갖춘 버전 3으로 업데이트되었습니다. 이 게시물에서는 타사 API를 처리하기 위해 VueX(상태 관리)와의 조합을 살펴봅니다. 학습 목적을 간단하게 하기 위해 우리의 목표는 Hacker News에서 상위 기사를 수신하고 클라이언트 측에서 로드하는 것입니다.

You can try the online demo here https://vhnews.netlify.app/

우선 Vite를 사용하여 프로젝트를 스캐폴딩합니다. 공식 Vue CLI 도구를 사용하지 않는 이유가 궁금할 수 있습니다. 그 이유는 Vite가 정말 빠르기 때문입니다. 이 경우에는 간단한 데모를 보여드리겠습니다. 반면에 Vue CLI는 강력하고 인기 있는 Webpack 위에 구축되어 놀라운 플러그인 생태계를 제공합니다(Vue 2와 호환됨). 이제 우리는 새로운 웹 앱을 만들기 위해 원사를 사용합니다.

yarn create @vitejs/app

명령을 입력하면 일부 선택 항목을 선택하라는 메시지가 표시됩니다. 그런 다음 작업 디렉토리로 cd하고 다음 명령을 실행하여 VueX(버전 4.x), eslint 및 Vue 및 axios용 플러그인을 설치합니다.

yarn
yarn add axios vuex@next --save
yarn add -D eslint eslint-plugin-vue
yarn eslint --init
yarn dev

이제 브라우저를 열고 주소http://localhost:3000로 이동하여 dev 서버가 실행 중인지 확인할 수 있습니다.



인터페이스는 Tailwind를 사용하겠습니다. "Vue 3과 Vite는 아직 PostCSS 8을 지원하지 않으므로 Tailwind CSS v2.0 PostCSS 7을 설치해야 합니다."

yarn add -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

다음으로 tailwind.config.js 및 postcss.config.js 파일을 생성하려면 다음을 실행합니다.

npx tailwindcss init -p

공식 가이드에서: "tailwind.config.js 파일에서 모든 페이지 및 구성 요소에 대한 경로로 제거 옵션을 구성하여 Tailwind가 프로덕션 빌드에서 사용되지 않는 스타일을 트리 쉐이킹할 수 있도록 합니다."

module.exports = {
    purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
}

그런 다음 main.css에 새 파일src/assets/css을 만듭니다.

/* ./src/assets/css/main.css */

/*! @import */
@tailwind base;
@tailwind components;
@tailwind utilities;

그런 다음 먼저 HackerNews에서 VueX 스토어로 데이터를 가져와야 합니다. 아래 스니펫에서는 나중에 다시 사용할 수 있도록 axios 인스턴스도 설정했습니다. 주요 뉴스를 얻기 위한 HackerNews의 API는 ID만 반환하므로 배열을 받은 후 각 개별 항목을 가져와야 합니다.

import { createApp } from "vue";
import App from "./App.vue";
import store from "./store";
import "./assets/css/main.css";
const app = createApp(App);
app.use(store);
app.mount("#app");

yarn add timeago.js

methods: {
  parseTime(t) {
    return timeago.format(t * 1000);
  }
},

<div class="text-sm text-gray-500">{{ parseTime(item.time) }}</div>