프로그래밍 공부/Nuxt.js

[Nuxt.js + Spring Boot] simple example

스프링 부트 +lombok +jpa +h2 +web starter +rest repository lombok실행시켜서 sts에 설치 안하고 의존성만 추가하면 bean error PostController.java @RestController public class PersonController { private PostRepository personRepository; @Autowired PostService personService; public PersonController(PostRepository personRepository) { this.personRepository=personRepository; } @GetMapping("/post") @CrossOrigin(origins = "http:/..

[NUXT.JS/VUE.JS] 시작하기(4) - linked between page

선택된 게시글이 아닌 다른 게시글들을 네비게이션으로 활용할것이기 때문에 선택되지 않은 친구들을 filter로 걸러준다 return this.posts.filter(post => post.id !== this.id) 그다음 옆에다가 붙여주자 v-for문은 꽤 독특한 문법을 가지고있는데, 리스트 렌더링 https://kr.vuejs.org/v2/guide/list.html 리스트 렌더링 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 여기에서 자세한 내용을 확인할 수 있다. 실행시키면 오른쪽에 다른 포스팅으로 연결해주는 링크가 생긴다.

[NUXT.JS/VUE.JS] 시작하기(3) - Dynamic Routes

pages 폴더에 posts폴더를 만들고, post.vue를 posts폴더에 옮겨놓자 그리고 _id.vue로 이름 변경 그안의 exprot default - data result로 내보낼 값을 설정한다 id 값과 보여질 title, content부분 그다음 Route에서 matching 시켜줄 코드를 작성 id: this.$route.params.id 동적 route에 관한 설명은 https://ko.nuxtjs.org/guide/routing/ nuxtjs.org Nuxt.js official website ko.nuxtjs.org computed:{ post(){ return this.posts.find(post=>post.id===this.id) } } 들어온 값의 id즉 balut, whereIs..

[NUXT.JS/VUE.JS] 시작하기(2) - Navigation Bar를 만들자

저번 포스팅에 localhost:3000에 성공했다면 프로젝트폴더가 생성되어 있을것이다. 지난 포스팅에서 따로 설정 안했다면 C드라이브 -> USER -> ADMIN(또는 USER) -> 프로젝트명 폴더 nuxt라는것이 vue.js를 위한 서버사이드렌더링 프레임워크이기 때문에 .vue로 되어있는 파일들을 수정하려면 프로그램이 필요한데, 여기서는 visual studio code 라는 프로그램을 사용하려고 한다 비쥬얼스튜디오코드 Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud appl..

[NUXT.JS/VUE.JS] 시작하기(1)

우선적으로 NUXT를 실행하려면 NODE.JS를 설치해야한다. (npm이나 vue-cil 등이 필요하기 때문에) NODE.js 홈페이지 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 설치가 완료되면, Ctrl+r > cmd > npm 을 쳐봤을때에 이러한 화면이 나온것을 볼 수가 있다. 그럼 이제 vue init nuxt-community/starter-template 라는 명령어를 치면, nuxt 프로젝트를 생성할수 있다. 부분에 원하는 이름을 치면 된다. ex) vue init nuxt-community/starter-template firstnuxt 완료가되면, cd firstnux..