framework(Vue_Nuxt) (11) 썸네일형 리스트형 Nuxt를 Vuetify와 연결하기. Vuetify 이제 막 페이지와 레이아웃까지 잡았는데, 이제는 디자인, 화면, 프론트단을 만들어 보려고 한다. react에서는 ant-design이 대세였는데, Vue에서는 Vuetify를 사용할 예정. Vuetify는 한마디로 자주쓰는 컴포넌트들을 미리 구성해놓은 프레임워크다. 설치명령어는 npm -> npm i vuetify @nuxtjs/vuetify yarn -> yarn add @nuxtjs/vuetify @nuxtjs/vuetify를 설치하는 이유? Nuxt는 외부 라이브러리에 연결하는 방법이 독특하다. Nuxt는 싱글페이지가 아니고, 페이지가 여러개며 기존 Vue식으로는 이럴때 다른 페이지에도 따로따로 외부 라이브러리를 연결해줘야만 했다. 그러나 Nuxt에서는 그저 nuxt.config.js.. Nuxt router와 layout, head 페이징처리중, 간단한 /주소화방법. 위처럼 주소를 localhos밑으로 세부적인 주소를 설정하고 싶을때, pages폴더 밑에 폴더를 하나 더 생성후 vue파일을 생성시켜주면된다. 참고로 Nuxt는 자동으로 Hot rerloading이 적용되어 있기 때문에 수정시 자동으로 반영을 시켜준다. Code splitting 원래 Vue-router를 사용했을때 페이지가 수백만개라고 가정을 하면 사실상 고유한 페이지는 1개고, 컴포넌트 개수가 수백만개인 것이며, 해당 컴포넌트들이 레고처럼 서로 바꿔가며 조립하여 눈속임을 한다고 보면 된다. 이에따라 해당 컴포넌트 수백만개를 전부 로딩을 해야 페이지가 나타나는 초기 로딩속도저하현상이 일어난다. 그래서 Nuxt에서는 한개의 페이지가 있는 것이 아니라 별도의 여러개의 페.. Nuxt설치 및 pages 생성(Node기반 SNS 만들기 개발환경설정 1. 터미널에서 npm i vue nuxt명령어로 Vue와 Nuxt설치 2. npm init으로 pakage.json 생성 { "name": "vue-nodebird-front", "version": "1.0.0", "main": "index.js", "dependencies": { "nuxt": "^2.8.1", "vue": "^2.6.10" }, "devDependencies": {}, "scripts": { "dev": "nuxt" }, "author": "", "license": "ISC", "description": "" } ※vue CLI (Vue CLI 란 Vue CLI 는 커맨드라인 인터페이스 기반의 Vue 프로젝트 생성 도구)는 해당 코딩 과정에서 사용 하지 않을 예정. 3... 이전 1 2 다음
