728x90 vue5 vue3 + spring legacy + axios 설정(install 생략) vue.config.jsconst { defineConfig } = require("@vue/cli-service");module.exports = defineConfig({ transpileDependencies: true, // 배포 경로가 중복되면 indexPath 생량 outputDir: "../src/main/resources/static", // npm run build // indexPath: "../static/index.html", // creating index.html chainWebpack: (config) => { const svgRule = config.module.rule("svg"); svgRule.uses.clear(); svgRule.use.. 2024. 6. 18. Cannot read properties of undefined (reading '__vccOpts') Cannot read properties of undefined (reading '__vccOpts')TypeError: Cannot read properties of undefined (reading '__vccOpts') at exports.default (webpack-internal:///./node_modules/vue-loader/dist/exportHelper.js:9:22) at eval (webpack-internal:///./src/App.vue:13:123) at ./src/App.vue (http://localhost:8080/js/app.js:121:1) at __webpack_require__ (http://localhost:8080/js/app.js:262.. 2024. 6. 18. vue 실행 VSCode(visual studio code), Node.js 설치 후 진행2가지 방법이 있음 Vitecmd 에서 원하는 위치로 이동 후 다음 명령어 실행npm create vite@latestcd 프로젝트-이름 & npm installnpm run dev Vue-clinpm install @vue/cli -gcmd 에서 명령어 실행 후 시간이 걸리므로 대기원하는 위치로 이동vue create 원하는-프로젝트-이름-입력Manually select features 선택Router, Vuex 스페이스 바로 추가 선택 후 엔터3.X 선택나머지 기본 값으로 선택// 대기npm install axios --save // 선택 사항cd 프로젝트-이름 & npm run serveVSCode ExtensionVue .. 2024. 6. 18. vue 특징 vue 특징Single Page Application : HTML 하나에 유저가 원하는 내용으로만 바뀜Single File Conponent : HTML CSS JS 가 하나의 파일에서 관리됨Options APIdata, methods, mounted 등과 같은 객체를 사용하여 컴포넌트 로직을 정의 옵션으로 정의된 속성은 컴포넌트 인스턴스를 가리키는 함수 내부의 this에 노출 됨 data: 데이터 관리 this에 노출됨 methods: 속성 값을 업데이트, 템플릿 내에서 이벤트 핸들러로 바인딩, this에 노출됨Composition APIimport로 가져온 Vue.js의 내장된 API 함수들을 사용하여 컴포넌트를 정의 SFC에서 컴포지션 API는 일반적으로 과 함께 사용 ref, reactive: 반.. 2024. 6. 18. vue 기본 문법 Life-Cycle 컴포넌트 생성부터 소멸까지 Life-Cycle HooksLife-Cycle 중간중간 생성 단계 이름으로 된 함수를 지칭Hook 이름으로 함수를 선언하고 실행해보는게 이해하는데 편안함 {{ count }} Vue.js 라이플 사이클 테스트출력보간법이라고 하는데 중괄호 2개 겹쳐서 사용 '{{ }}'출력타입은 무조건 문자열혹여나 태그를 삽입하고 싶으면 innerHTML 기능과 비슷한 것이 있음 {{ rawHtml2 }} // 문자열로 나옴 // innerHTML 같은 기능바인드data() 리턴 값으로조건문을 만들어 활성화 여부를 정할수 있음, true | false 도 물론가능예시는 class인데 id도 있고 :disable 이런것도 있음inline style에도 .. 2024. 6. 17. 이전 1 다음
