vue 시작

Vue 다시

IDE : Visual Studio Code
기본언어 : Vue
버전 : Vue3

• 선행되어야 하는 부분 : Node 설치

• 설치하기 (터미널 열기)

​ npm install -g @vue/cli

​ Vue create front

NPM 에 대해 알아보기

npm은 패키지 매니저, 라이브러리 매니저 관리자이다. 팀플할때 json 파일에 모든 라이브러리 정보를 올려준다. (dependencies를 쉽게 관리해줌)

node.module 은 깃에 올리지 않는다 ( 너무 무거움)

그대신 package.json만 올려서 어떤 라이브러리를 썼는지 목록만 나열된걸 올린다. (그럼 팀원들이 그걸 보고 npm install을 활용해 직접 다운로드 함)

(그외 자세한건) 노션에 정리해둔것

https://festive-platypus-daa.notion.site/5-NPM-fb108d96d50a4a56a349860a76ec5d33

그외에 다운받아야 할것

npm install axios

vue add router

=================

순서 지키기

1. views 에 1.vue 파일생성
2. router/index.js에 impot 추가하고(경로설정), path 추가로 넣기
3. App.vue 파일을 열어서 라우터 링크도 추가해주기

===================

공통 파일 생성

axios 사용을 위한 mixins.js 파일 생성 (src 밑에)

import axios from 'axios';

export default {
  methods: {
    async $api(url, method, data) {
      return (await axios({
        method: method,
        url,
        data
      }).catch(e => {
        console.log(e);
      })).data;
    }
  }
}

main.js 에 추가하기

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import mixins from './mixins' //믹스인 추가

const app = createApp(App)
app.use(router)
app.mixin(mixins)
app.mount('#app')

===============

VSC를 사용한다면 좀 더 편리하게 사용하기 위해 스니펫을 설정해준다.

Ctrl + shift + p 를 열어서 snippet 열기

vue.js 열어서

이거 추가

"Generate Basic Vue Code" : {
		"prefix": "vue-start",
		"body" : [
			"<template></template>\n<script>\nexport default {\n\tname: '',\n\tcomponents: {},\n\tdata() {\n\t\treturn {\n\t\t\t sampleData: ''\n\t\t};\n\t},\n\tsetup() {},\n\tcreated() {},\n\tmounted() {},\n\tunmounted() {},\n\tmethods: {}\n}\n</script>"
		],
		"description": "Generate Basic Vue Code"
	}
}

Vue 파일 생성시 sta 입력만 하면 자동으로 인식되서 vue-start 나옴

=============================

export default 다 살펴보기

export default {
    name: 'BoardList', // 컴포넌트 이름
    components: {}, // 다른 컴포넌트 사용 시 컴포넌트를 import 하고 배열로 저장
    data() {
      return {  // html과 자바스크립트 코드에서 사용할 데이터 변수 선언
             boardList: []
        };
    },
    setup() {},   // 컴포지션 API
    created() {}, // 컴포넌트가 생성되면 실행
    mounted() { // 템플릿에 정의된 html 코드가 렌더링된 후 실행
      this.getList();
    },
    unmounted() {},
    methods: {  // 컴포넌트 내에서 사용할 메소드 정의
    }
}