728x90 반응형 IT/VueJS15 VueJS 배포 과정 Vue.js 애플리케이션의 배포 과정은 React와 비슷하지만, Vue에 특화된 몇 가지 사항이 있습니다. Vue.js 애플리케이션을 빌드하고 배포하는 과정은 다음과 같습니다:1. Vue 애플리케이션 빌드Vue 프로젝트에서 npm run build 명령어를 실행하면, 애플리케이션이 프로덕션(배포) 환경에 최적화된 상태로 번들링됩니다. 이 과정에서는:src 디렉토리의 소스 코드가 최적화되고 압축된 정적 파일로 변환됩니다.dist 디렉토리(기본적으로 생성되는 폴더)에 모든 결과물이 저장됩니다:index.html (앱의 진입점)번들링된 JavaScript 및 CSS 파일기타 필요한 정적 리소스 (이미지, 폰트 등)2. 정적 파일 웹 서버로 배포생성된 dist 폴더의 파일들을 웹 서버에 업로드하여 클라이언트가 .. 2025. 3. 24. VueJS 핵심 문법 정리 SFC 구조. 아래와 같은 구조가 기본 구조이다. 태그 안에 HTML 을 사용하되, 데이터는 --------------------------------------------------------------------------------------------------------------------------------------------간단한 샘플 예제) {{title}} {{description}} {{productions[0]}} {{productions[2]}} {{productions[3]}} -----------------------------------------------------------------------.. 2025. 3. 12. main.js에 import RightToolbar from '@/components/RightToolbar 문장이 있어. 여기서 @의 의미 Vue.js 프로젝트에서 사용된 @는 일반적으로 프로젝트의 경로를 간소화하기 위해 설정된 "별칭(alias)"입니다. 예를 들어, @는 종종 프로젝트의 src 디렉터리를 가리키도록 설정됩니다. 이렇게 하면 상대 경로를 길게 작성하지 않아도 되고, 코드가 더 깔끔해지며 유지보수가 쉬워집니다.이 별칭은 보통 webpack이나 vite와 같은 번들러에서 설정됩니다. 만약 vue.config.js나 vite.config.js 파일을 열어보면 다음과 같은 설정을 찾을 수 있습니다: Webpack 예시:module.exports = { configureWebpack: { resolve: { alias: { '@': path.resolve(__dirname, 'src') .. 2025. 3. 11. vite 설치법 npm create vite@latest vite 는 vue 뿐만 아니라 react 등 다양한 프로젝트 생성이 가능하다.사용하는 언어는 javascript로 하자. https://vuejs.org/ Vue.jsVue.js - The Progressive JavaScript Frameworkvuejs.org Composition API 작성 문법과 Options API 문법--> 원쌤의 Vue.js 퀵스타트 275 P 설명을 읽어볼것. ref : 상태 변수를 선언하는 함수 script setup> import HelloWorld from './components/HelloWorld.vue'import { ref } from 'vue'const msg = ref('Hello Vue 3 + Vite')scri.. 2025. 1. 28. 이전 1 2 3 4 다음 728x90 반응형