Nuxt.js로 응용 프로그램을 만들고 GiitHub Pages로 디자인: Vue.js Step by Step

이 시리즈에서 Vue.간단한 부분부터 js를 사용하여 정식으로 사용하는 순서를 천천히 기록합니다.이번에는 베입니다.js제 응용 프로그램 프레임워크 Nuxt.js 절차를 시작합니다.대부분 공식 웹사이트 자습서에 쓰여 있지만 Giithub Pages에서 디자인을 하려면 시간이 좀 걸린다.

Nuxt.js의 특징

Nuxt.베입니다.js로 웹 응용 프로그램을 만들 때의 기본 도구입니다.웹 응용 프로그램에는 필요한 프로그램 라이브러리가 많은데, 페이지를 추가하면 자동으로 연결됩니다.가장 중요한 것은 서버 측의 표현과 정적 사이트 생성을 지원하는 것이다.
2021년 5월까지, Vue.js Ver2.대응

Nuxt.js - The Intuitive Vue Framework
https://nuxtjs.org/

Nuxt.범용 Vue.응용 프로그램
https://ja.nuxtjs.org/

요약 생성

이것은 다음create 명령을 통해 간단하게 완성할 수 있습니다.도중에 사용할 프로그램 라이브러리와 개발 도구를 확인하기 때문에 순서대로 대답합니다.

$ yarn create nuxt-app my-nuxt-project
|
| ✨  Generating Nuxt.js project in nuxt-app
| ? Project name: nuxt-app
| ? Programming language: JavaScript
| ? Package manager: Yarn
| ? UI framework: Vuetify.js
| ? Nuxt.js modules: Axios - Promise based HTTP client
| ? Linting tools: ESLint, Prettier
| ? Testing framework: None
| ? Rendering mode: Single Page App
| ? Deployment target: Server (Node.js hosting)
| ? Development tools: jsconfig.json (Recommended for VS Code if you're not using typescript)
| ? Continuous integration: None
| ? Version control system: Git

완료 후 다음 명령을 사용하여 동작을 확인한다.

$ cd my-nuxt-project
$ yarn dev

http://localhost:3000/에는 이러한 애플리케이션이 있습니다.페이지 디렉터리에 'index. vue' 와 'inspire. vue' 파일이 있는 다음 자동으로 경로를 설정합니다.

Giithub Pages로 설계

Nuxt.Giithub Pages로 js가 만든 프로그램을 디자인할 때 마스터 지점의 docs 디렉터리를 공개하는 것은 매우 간단하다.
그래서 빌딩의 앞쪽을 docs,nuxt로 바꾸기 위해.config.js에 다음 코드를 추가합니다.base: Giithub의 창고 이름을 지정합니다.양쪽 끝에 있는 빗장을 잊지 마라.
nuxt.config.js

  router: {
    base: '/my-nuxt-project/'
  },

  generate: {
    dir: 'docs'
  },
}

그리고 공개할 파일을 만듭니다.

$ yarn build

이렇게 하면 docs 디렉터리에 정적 파일이 생성됩니다.
각 docs 디렉토리는 GiitHub에 제출됩니다.

공개 애플리케이션

이번엔GiitHub Pages에는 js로 제작된 앱이 공개됐다.이 프레젠테이션 페이지에서 어둠 모드를 닫고 Hello 페이지를 추가합니다.

프레젠테이션 페이지(GiitHub Pages)
https://ycatch.github.io/vue-app/

소스 코드(GiitHub)
https://github.com/ycatch/vue-nuxt-app

참조 페이지

Nuxt.js - The Intuitive Vue Framework
https://nuxtjs.org/

Nuxt.범용 Vue.응용 프로그램
https://ja.nuxtjs.org/

자습서

[완전 가이드] 제로부터 잘 이해하고 싶은 사람을 위한 넥스트.js 입문 | 예술적 효과
https://reffect.co.jp/vue/nuxt-js-first-step

GiitHub Pages 및 Nuxtjs에서 공개투자조합-Qita
https://qiita.com/Anderiens/items/a4c5783b5197de682329