Vue 6

vue options API vuex Store modules 사용법

vuex store 사용시 많은 양의 데이터를 하나의 store 파일에서 작업하기엔 벅차 store 모듈로 쪼개는 방법을 알아보고자 합니다. store 디렉토리 구조 store/modules/Counter.js /modules/moduleA.js index.js index.js import { createStore } from 'vuex' import { Counter } from './modules/Counter' import { moduleA } from './modules/moduleA' export default createStore({ mudules: { Counter, moduleA }, //기존 저장소 }); moduleA.js export const moduleA = { namespaced..

프로그래밍/Js 2023.04.13

초보자를 위한 vue 개발 ES6 문법 4개

1. 화살표 함수 // 일반 함수 function(v1, v2) { return v1 + v2 } // 화살표 함수 const test = (v1, v2)=>{ return v1 + v2 } console.log(test(1,2)); // 3 // 화살표 함수 (인자없을때) const test =_=>{ } 2. 템플릿 리터럴 템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다. 여러 줄로 이뤄진 문자열과 문자 보간기능을 사용할 수 있습니다. 이전 버전의 ES2015사양 명세에서는 "template strings" (템플릿 문자열) 라고 불려 왔습니다. ` 백틱을 사용합니다. `string text` const test =_=>{ return `Hello ${this.name} ` } 3. 모듈..

프로그래밍/vue 2021.12.21

처음하는 vue2 + spring boot conroller 연동 1

결과 아래와 같이 항목을 입력후 로그인 버튼 클릭시 vue 와 java 연동을 보여준다. frontend => backend 연동 vue 와 springboot 기본 설치와 설정 되어 있어야 한다. 안되어 있으면 아래 클릭하여 vue 와 spring boot 연동 먼저. https://trytoso.tistory.com/1579?category=988314 인텔리제이(intellij) 스프링 부트(spring boot) vue.js 연동 8080 포트 방법 인텔리제이(intellij) 스프링 부트(spring boot) vue.js 연동 8080 포트 방법 보통 백엔드서버 8081 프론트엔드 8081 두개의 서버를 가동하지만 본 문서에서는 백엔드 서버 8080 으로 연동하는 방법을 사용하 trytoso...

프로그래밍/vue 2021.12.13

스프링 부트 + vue.js gradle build 과정에서 npm build 자동으로 수행되도록

plugins { id "com.github.node-gradle.node" version "3.1.1" } node { download = true version = "14.6.0" npmVersion = "6.14.7" distBaseUrl = "https://nodejs.org/dist" npmInstallCommand = "install" workDir = file("${project.projectDir}/.gradle/nodejs") npmWorkDir = file("${project.projectDir}/.gradle/npm") nodeProjectDir = file('./front') } task setUp(type: NpmTask) { description = "Install Node.js..

Vue.js 처음하는 설치 및 샘플예제

spring boot port 8080 vue port localhost:8081 vue cli 설치 $ npm install -g @vue/cli vue 설치 $ vue create front vue.config.js 파일 추가 (front 프로젝트 root 폴더) http-common.js 파일 추가 (http 통신에 관련된 사항 기술 src 폴더) Vue router 추가 (다중 페이지 처리) axios 추가 (http 통신 처리) vue.config.js module.exports = { outputDir: "../src/main/resources/static", indexPath: "../static/index.html", devServer: { proxy: "http://localhost:80..

프로그래밍/vue 2021.11.23