Vue7 vue.config.js vue/cli 2.0은 프로젝트를 만들면 webpack.config.js 파일이 생성이 되지만, vue/cli 3.0은 config 파일이 설정에 따라 생성될 수도 있고 생성되지 않을 수도 있다. 생성되지 않았다면 프로젝트 root에 vue.config.js 파일을 만들어서 설정하면 되는데, vue.config.js는 온전한 webpack은 아니지만 webpack 빌드를 설정할 수 있는 파일이다. 2020. 6. 5. SpringBoot - Vue project 3. Vue 프로젝트 구성 먼저 http Client를 초기화하기 위해 axios를 설치한다. 터미널에서 vue 폴더로 이동하고 npm install axios를 입력한다. 그리고 http-common.js 파일을 다음과 같이 만들어서 http Client를 초기화 한다. import axios from 'axios'; export default axios.create({ baseURL: 'http://localhost:8080/_api', headers: { 'Content-type': 'application/json', }, }); router router/index.js import Vue from 'vue' import VueRouter from 'vue-router' import UserList from "../compo.. 2020. 3. 27. SpringBoot-Vue project 2. Rest API 만들기 spring boot server 구성 model model/User.java package com.example.springboot_vue_h2db.model; import lombok.Data; import javax.persistence.*; @Entity @Data @Table(name = "user") public class User { @Id @GeneratedValue(strategy = GenerationType.AUTO) private long id; private String name; private int age; private String ph; private boolean active; public User() { } public User(String name, int age, S.. 2020. 3. 26. SpringBoot-Vue project 1 - 프로젝트 생성 node.js와 vue-cli 설치 node.js 설치(LTS 버전으로 설치) : https://nodejs.org/ko/ node 설치 후 터미널을 열어서 vue-cli를 설치한다. JDK 설치 JDK 11 설치 : https://www.oracle.com/java/technologies/javase-jdk11-downloads.html SpringBoot 프로젝트 생성 인텔리제이로 새 프로젝트 생성 프로젝트를 Spring Initializr로 선택하고, Project SDK를 위에서 설치한 JDK로 설정한 후 다음으로 넘어간다. Artifact를 바꾸고 싶은대로 변경하고 Java Version을 11로 설정하고 넘어간다. dependency를 Web - Spring Web으로 선택하고 넘어간다. 프로.. 2020. 3. 24. Vue - computed, watch computed : 최종 결과에 대해서는 메소드와 동일하다. 메소드와의 차이점은 computed는 종속 대상을 따라 저장된다. computed는 대상이 변경될 때만 함수를 실행. 종속된 대상이 변경되지 않는한 computed 속성의 데이터를 아무리 요청해도 계산 되어 있던 결과를 즉시 반환함. computed: { now: function() { return Date.now() } } 또한 Date.now() 처럼 아무 곳에도 의존하지 않는 computed 속성의 경우 절대로 업데이트되지 않는다. computed와 watch watch는 종속 대상(감시할 데이터)을 지정하고 그 데이터가 바뀌면 이런 함수를 실행해라.는 용도 computed는 감시할 데이터에 따라 특정 데이터를 정의하는 방식 2020. 3. 17. vee-validate input box에 validation을 적용하기 위해 외부 라이브러리 vee-validate를 사용했다. 여기에서 사용하는 버전은 2.2.15 버전이다 // package.json "dependencies": { "vee-validate": "^2.2.15", "vue": "^2.6.11", }, 먼저 vee-validate를 설치한다. npm install vee-validate --save 그 다음, 컴포넌트에 vee-validate를 불러온다.(나는 최상위 컴포넌트에 불러왔다.) 그 후에 html에 {{ errors.first('title') }} 저장 validate 검사 후 저장 되도록 하기 위해 save 함수를 만든다. 만약 validate 규칙에 어긋나서 validateAll()의 결과가 .. 2020. 3. 10. 이전 1 2 다음
