Vue3 정복기(1일차)

📌 Vue CLI, Vutur

---

Getting Started

Install

npm i -g vue@cli 

CLI 설치 후 스타트하기위해서

vue Create

vue create 폴더이름 

버전설치를 위해 키보드를 이용하여 Vue3 설치

CD를 이용하여 폴더에 접근!

code . -r

을 이용하여 그 폴더 안에 접근!

package.json안에 들어가보면
"serve" ,"build", "lint"가 존재하며 serve가 곧 dev다

ESLint를 통해 eslintcofing를 사용할수있고
rules를 통해 새로운 룰을 만들 수 있다.

public의 index.html을 보면 요기서 제작을 한다라고 볼수있다.

src에 보면 main.js를 보면 App를 어떻게 사용하는지 볼 수 있고 연결하는 방법을 볼 수 있다.

App.vue를 보면 template, script, style 3가지로 나눠져있다.
script에서 import로 Helloworld를 가져와서 사용하고있다.

---

📌 vue3-webpack-template

---

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

바탕화면에 생성하기

src에 main.js / App.vue를 생성한다.

npm i vue@next

@next를 붙여야 vue3버전 설치가 가능하다.

만약 설치가 안될시 버전 문제가 있을 수 있음으로
유튜브 영상참고 자료를 본다.

유튜브영상 참고

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

3가지 패키지를 개발의존성으로 설치

webpack.config.js 가서 js를 src로 고치고

rules:[
 {
    test: /\.vue&/,
    use: ['vue-loader']
 },
 ...
 ]

추가한다.

Components 연결 시,

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

<script>
import HelloWorld from '~/components/HelloWorld'
export default {
  components: {
    HelloWorld
  },
}
</script>

이런 방식으로 연결해야한다.

그리고 파일 뒤 확장자 제거하고 싶을 시,

npm i -D file-loader 

설치 후, webpack.config.js 에서 입력한다.

const path = require('path')

module.exports = {
  
  resolve: {
    extensions: ['.js', '.vue'],
    alias: {
      '~': path.resolve(__dirname, 'src'),
      'assets': path.resolve(__dirname, 'src/assets')
    }
  },
},

module: {
    rules: [
     {
        test: /\.(png|jpe?g|gif|webp)$/,
        use: 'file-loader'
     }
  ]
}

이렇게 하면 '~' 기호를 써서 바로 부를 수 있고 파일 확장자도 제거가능하다.

1일차 요기까지 내일은 ESLint 배우자