vue.js 강의 [1]

npm i -g @vue/cli

안되면 앞에 sudo 붙이기

cd ~/desktop

vue create vue3practice
2번째 선택해주기

code . -r로 생성한 폴더 열어주기

확장프로그램 설치하기
필수 확장프로그램:
vetur

이제 vuejs를 웹팩을 기반으로 하는 프로젝트를 구성하려한다.
강의 저자의 깃헙 저장소에서 클론받기
https://github.com/ParkYoungWoong/webpack-template-basic

desktop에 설치

npx degit ParkYoungWoong/webpack-template-basic vue3-webpack-template

해당 폴더 열어서
src 폴더 생성, App.vue, main.js 파일 생성한다.

@next를 붙여야지 최신 3버전으로 진행될거다.

그리고 vue js는 개발할때만 사용하는것이 아니고 실제로 브라우저에서 동작하는 패키지이기 때문에 -D, 즉 개발 의존성을 설치하시면 안되고, 일반의존성으로 설치해줘야함
위 명령어? 는 문법을 해석하기 위한 용도로 설치한것이고
우리가 이렇게 App.vue.. vue라는 확장자를 가지고있는 하나의 파일을 관리하려면 실제로 프로젝트 내부에서 관리하려면 추가적인 웹팩과 관련되있는 여러가지 패키지를 설치해야한다.

npm i -D vue-loader@next vue-style-loader @vue/compiler-sfc

뷰로더도 @next 붙여주고

@vue/compiler-sfc 패키지가 뷰파일을 변환해서 브라우저에서 동작할수 있게끔 도와준다

그리고 webpack.config.js파일 들어가보면
entry: './js/main.js',

라고 되어있는데 js 폴더를 삭제해줬고 src폴더를 생성해줬으니 아래와 같이 변경해준다.
'./src/main.js'

아래와 같이 test, use 추가해주고
두번째 {} 에 'vue-style-loader' 추가
마지막에 해석되도록 첫번째에 넣어줌 순서중요.

vue-style-loader 는 App.vue처럼 뷰라는 확장자로 끝나는 파일들의 내부에서 스타일이라는 태그로 css내용을 작성할수있거든요,
vue 파일 내부에 스타일 태그를 해석해서 그것을 동작시켜줄수 있도록 만들어주는 웹팩의 로더가 바로 vue-style-loader입니다

여기서 import App from './App.vue'
를 vue 를 없애고

webpack.config.js 에서 설정을해주면

.js 나 .vue 라고 설정하면 경로에서 확장자를 따로 명시하지 않아도 돌아가게끔? 만들어줄수있음

image 폴더를, assets 폴더로 변경

설치
npm i -D file-loader

App.vue로 와서
아래와같이 추가해준다

<template>
    <h1>{{ message }}</h1>
    <HelloWorld />
</template>

<script>
import HelloWorld from '~/components/HelloWorld' // ./ <- 상대 경로, ~/ 틸드 경로 ##### 절대경로처럼 해당하는 파일에 접근가능

export default {
    components: {
        HelloWorld
    },
    data() {
        return {
            message: 'Hello Vue!!!'
        }
    }
}
</script>

그런후에
npm run dev 로 실행