====== Nuxt.js ====== ===== Starting with nuxt.js ===== $ npm install -g vue-cli $ vue init nuxt-community/starter-template [프로젝트 이름] $ cd [생성된 프로젝트 디렉토리] $ npm install # or yarn # npm 또는 yarn을 이용하여 의존성 모듈 설치 $ npm run dev # nuxt.js 실행 ===== 프로젝트 구조 ===== * **nuxt.config.js**; nuxt.js의 설정 정보 파일. build, cache, css, dev, env, generate, head, loading, plugin, rootDir, router, srcDir, transition의 설정 * **package.json**; 프로젝트의 의존성 모듈과 각종 정보, 스크립트를 포함하는 파일 * **assets**; SASS, LESS나 빌드가 필요한 JavaScript 파일이 포함되는 디렉토리 * **components**; nuxt.js에서 사용되는 컴포넌트들을 포함하는 디렉토리, .vue 파일 * **layouts**; nuxt.js에서 사용하는 기본 레이아웃을 포함하는 디록토리 * **middleware**; 레이아웃, 페이지가 렌더링되기 전에 실행되는 파일이 정의되는 디렉토리. * **pages**; 일반적인 vue 파일을 포함하는 디렉토리. asyncData, fetch, head, layout, transition, scrollToTop, validate, middleware 속성 사용 가능 * **plugins**; vue로 만든 웹 애플리케이션이 생성되기 전에 실행시키고 싶은 js 파일을 포함하는 디렉토리. * **static**; 정적 파일, 이미지 파일이나 각종 CSS, javaScript 같은 정적 파일을 포함하는 디렉토리. * **store**; 상태(데이터) 관리를 도와주는 라이브러레인 vuex가 포함된 디렉토리. ==== pages ==== * asyncData 메소드; * fetch 메소드; * head; * layout; * middleware; * scrollToTop; * sytle; 해당 페이지에서만 적용할 스타일 ==== 설정 파일 ==== * nuxt.config.js * cache * loading ==== Routes ==== * 정적라우트 * 동적라우트; _id.vue 등 this.$route.params.[_이름] * 페이지 이동; 컴포넌트 이용. 여러 줄일경우
등으로 묶어주어야 한다. 하나의 루투 요소로 포함. ==== layouts ==== * default 레이아웃; default.vue * error 레이아웃; error.vue ==== Components ==== * 컴포넌트 생성; import ~ from * 컴포넌트로 데이터 넘기기; props를 이용 * 컴포넌트로 함수 넘기기; * props 검사; props로 전달되는 인자 타입 7가지: String, Number, Boolean, Function, Object, Array, Symbol * props의 한계; 단방향 바인딩. ==== Vuex store를 이용한 데이터 관리 ==== * Vuex store; this.$store 저장소, mutations 메서드로 상태 변경 * mapState 사용 * fetch 메소드 * vuex store 모듈 형태 제작; 규모가 커짐에 따라 상태를 독립적으로 관리. ==== express와 nuxt.js 같이 사용 ==== * nuxt.js 프로젝트 생성 $ vue init nuxt-community/starter-template nuxt_with_express $ npm install $ npm install -s express * express 앱 추가 * nuxt with express 보일러 플레이트 $ vue init nuxt-community/starter-template [프로젝트 명] # nuxt로만 이루어진 웹 애플리케이션 프로젝트 생성 $ vue init nuxt-community/express-template [프로젝트 명] # express 앱 자동 추가 $ npm install $ npm run build $ npm run start $ npm run dev * 에러 발생 시 package.json 파일을 수정하거나 server/index.js 파일을 ES 버전에 맞게 수정 ===== References ===== * [[https://doozi0316.tistory.com/entry/Nuxtjs-%EC%9D%98-%EA%B0%9C%EB%85%90%EA%B3%BC-%EC%98%88%EC%A0%9C-SSR-CSR-Universal|Nuxt.js 란? 개념과 예제 (SSR, CSR, Universal, asyncData, fetch...)]] * [[https://linked2ev.github.io/devlog/2019/01/22/Nuxt-Admin-4.-Nuxt-Component-Divison/|[Nuxt Admin] 4. Nuxt에서 컴포넌트 사용]] * [[https://velog.io/@nuxt/Nuxt.js-%EA%B8%B0%EC%B4%88-%EA%B0%95%EC%A2%8C-%ED%8E%98%EC%9D%B4%EC%A7%80%EC%99%80-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8|Nuxt.js 기초 강좌 : 페이지와 컴포넌트]] * [[https://css-tricks.com/creating-dynamic-routes-in-a-nuxt-application/#let-the-nuxt-config-know|Creating Dynamic Routes in a Nuxt Application]] * [[https://velog.io/@nuxt/NUXT-%EB%B3%80%EC%88%98%EC%99%80%ED%95%A8%EC%88%98|NUXT 기초 강좌 : 변수 선언 방법, 함수 사용법]] * [[https://stackoverflow.com/questions/44748575/how-to-get-current-route-name-in-nuxt-js|How to get current route name in Nuxt.js?]] * [[https://fkkmemi.github.io/nuxt/nuxt-004-plugin/|NUXT로 혼자 웹사이트 만들기 4 플러그인 설치]] * [[https://nodesource.com/blog/next-nuxt-nest/|Choosing the right Node.js Framework: Next, Nuxt, Nest?]] * [[https://day0404.tistory.com/8|Nuxt.js 란? (feat. SSR, CSR)]]