[MU] Vue.js 프로젝트 시작

Vue.js를 사용한 새로운 프로젝트를 진행하려고 한다.

 

1. 시작

vue/cli 설치

npm install -g @vue/cli

 

프로젝트 생성

vue create project

 

프로젝트 경로 이동 - 서버 실행

cd project
npm run serve

 

초기 서버 실행 화면

 

 

페이지 전환을 위한 vue router 설치

vue add router

 

VSCode에서 "vue : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\co135\AppData\Roaming\npm\vue.ps1 파일을 로드할 수 없습니다" 에러가 발생하면 PowerShell을 관리자 권한으로 실행한 뒤 아래 명령어 입력 후 다시 router 설치하기

Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

 

src/views/HomeView.vue 가 처음 보이는 홈 화면임

<template>
  <div class="home">
    <h1>Welcome !</h1>
    <p>당신의 기억 ✨</p>
  </div>
</template>

<script>
export default {
  name: 'HomeView',
};
</script>

<style scoped>
.home {
  text-align: center;
  margin-top: 100px;
}
</style>

• template : 우리가 실제로 브라우저에서 보게 될 HTML 구조 ( React의 return() 안 JSX와 비슷 )
• export default : 이 컴포넌트의 정보를 내보내는 부분 ( React의 useState, useEffect, props 등과 비슷한 역할 )
• <style> : CSS를 작성하는 부분

실행 화면

 

 

 

 

 

 

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."