Vue/Vue 2023

Vue 001 설치

salalsksjwnn 2023. 1. 27. 13:44
728x90

설치

  • 폴더 생성, 폴더에서 터미널 열기
  • 설치가 됐는지 확인
vue --version


//@vue/cli 5.0.8
//설치되어있네??
  • 설치 명령
npm install -g vue

//-g 는 글로벌로 설치한다는 것을 의미
  • vue cli 설치
npm install -g @vue/cli 

//cli? 
//vue 프로젝트를 빠르게 생성할 수 있게 도와준다.
//다양한 설정파일, 폴더 구성을 위해 만들어야하는데 일일히 만들지 않게 도와줌
//누가 만들더라도 기본적으로 같은 form을 사용할 수 있음

//create react app??????
  • 뭐만 설치할라하면 Cannot read properties of null (reading 'pickAlgorithm') 이녀석은 계속 뜬다
npm cache clear --force


//이거 해주고 다시 설치하면 된다.
  • 유용한 확장 프로그램 하나만 설치하면 된다고 한다? Vetur

프로젝트 생성 방법01(Default)

반드시 프로젝트 설치할 폴더안에서 할 것

  1. 설치( vue create (프로젝트 이름) )
vue create project01
  • 어떤 방식으로 설치할 것인지 제시된다.(키보드를 이용해서 선택한다)

  • 순서대로
    • 최신 버젼인 Vue3으로 설치할건데 기본 옵션만 갖는 프로젝트를 설치할 것
    •  Vue2 기본옵션만 갖는 프로젝트 설치(아직Vue3이 나온지 얼마 안돼서 Vue2로 개발된 오픈소스들이 많아서)
    • 내가 직접 옵션을 선택해서 설치하기
  • Dafault Vue3 을 선택해서 설치한다. yarn을하든 npm하든 상관 없음
  • 정상적으로 설치됐을 시

짜잔 Vue Cli를 사용해 설치하니 알아서 나온다

(react create app 사용한 입장에서 익숙하다)

  • 프로젝트 폴더로 이동하기
cd project01
  • 프로젝트 실행
yarn serve

//npm으로 설치했으면
//npm run serve
//이렇게 나옴
  • 실행

컨트롤 누른채로 Local 옆에 링크 클릭해서 접속해보자
나도 이제 뷰유져?

구성

  • package.json
    • 프로젝트에 대한 정보가 다 들어가 있다.
{
  "name": "project01",
  "version": "0.1.0",
  "private": true,   //내가 만든 프로젝트가 만약에 등록이 된다면 아무나 접근하게 할지 안할지 정하는 곳
  
  // scripts 아까 뷰를 실행시킬때 serve를 했는데 아래 보이는 serve이다. 저 명령어가 실행되는 것. 
  //등록해서 사용할 수 있다. 단축키같은 명령어 같은 느낌
  "scripts": {       
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  
  // dependencies 뷰 프로젝트를 만들면서 많은 모듈을 설치하는데
  // 운영환경으로 배포할때 가져갈 모듈들이 보이게 됨
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^3.2.13"
  },
  
  // devDependencies 개발하는 순간에 사용해야하는 순간에 가져갈 모듈들이 보임
  // 근데 모듈이 별로 없다?
  // 아래 있는 모듈들은 누가 만들어 놓은건데 그곳에 다른 모듈들이 포함되어 있다.
  // package0lock.json에 가면 볼 수 있다.
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3"
  },
  
  // 
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  

  "browserslist": [
    "> 1%",            // 전세계 1%이상 사용하고 있는 브라우져만 지원
    "last 2 versions", // 최근 두개의 버젼만 지원한다. 안정적으로
    "not dead",        //
    "not ie 11"        // 고인은 지원 안한다.
  ]
}
  • main.js
    • serve를 한 순간 제일 먼저 실행되는 파일 (리액트의 index.js라고 보면 되는건가)
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

//App.vue를 가지고 createApp을 하겠다 라는 의미
// mount를 하면서 #app을 호출한다는건 index.html에 있는 id가 app을 찾아서 
// 그 안에 App.vue를 마운트 시키겠다는 의미

//index.html
 .
 .
 .
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
  • App.vue
<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/> 
</template>

<script>
import HelloWorld from './components/HelloWorld.vue' //이게 위에 template 있는곳으로 불려감

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

 

프로젝트 생성 방법02(Manually)

  • 설치
vue create project
  • 세번째 선택지 Manually를 선택하면 아래와 같이 나온다
  • 프로젝트에 필요한 친구들을 선택하면되는데
  • 엔터키를 눌러서 선택하는게 아니라 스페이스를 눌러서 선택해야한다.

  • 정보
    • Babel
      최신 문법으로 자바스크립트를 짤건데 구 브라우저에서는 동작하지 않을 수도 있다. 
      Babel이 구 브라우저용으로 컴파일을 해 준다.
    •  PWA
      모바일처럼 웹을 만들어주는 기능
    •  Router
      vue에서 메뉴를 클릭했을 때 화면을 이동할 수 있게 해주는 것
    • Vuex
      모든 컴포넌트내에서 저장소를 만들어서 데이터를 저장하고 상태관리 할 수 있게 해주는 것
    • Linter/Formatter
      js문법 체크해주고, 팀내에서 모두 동일한 규칙을 가질 수 있게 해주는 모듈
      코딩컨벤션
    • Unit Testing
      단위 테스트 하게 해주는거
    • E2E Testing
      전체 테스트 하게 해줌

나는 Babel, Router, Vuex, Linter/Formatter만 사용할 것

  • 선택 했으면 Enter눌러준다.
  • 버전은 최신 3.x로 선택
  • 라우터에 히스토리모드 사용? Y

  • EsLint
    • js문법 체크해줌 일단은 standard로 간다.

  • 설명
    • Airbnb config  -  Airbnb팀에서 만든 코딩컨벤션을 사용한다.
    • Standard config - js에서 기본적으로 가지고 있는  코딩 컨벤션 사용
    • Prettier - Prettier포메터를 사용한다.
  • Lint는 저장시점에 하는걸로 선택

  • Babel이나 Eslint를 별도로 관리할래? package.json에서 관리할래?

저는 package.json에서 하겠습니다.

  • 방금 결정한 것들을 즐겨찾기에 추가하쉴?

추가하면 preset에서 선택할 수 있어진다.(Default Vue3 Vue2 등등 나왔던곳 맞다)

  • 즐찾 이름까지 설정해주면 프로젝트가 만들어진다.
  • src안에 더 많은 폴더들이 생긴다

  • Router도 설치했으니 실행시에 사용예가 나온다 Home/About

구성(추가)

  • package.json에 vue-router와 vuex가 추가되었다.
  • main.js에는 router와 store가 임포드 되었다.
  • App.js
<template>
  <nav> 
    <router-link to="/">Home</router-link> | 
    <router-link to="/about">About</router-link> 
  </nav> //라우터로 추가된 Home과 About을 볼 수 있다.
  <router-view/> //라우터에서 선택된 페이지가 표현되는 곳
</template>
...

아 빨간거 열받아

 

 

 

 

 

  • router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  { //path 가 / 면 HomeView컴포넌트를 가져와라
    path: '/', 
    name: 'home',
    component: HomeView
  },
  { //path가 /about이면 /views/AboutView.vue컴포넌트를 가져와라
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

라우터를 사용하면서 spa에 대한 이해가 깊어질 수 있을 것이다!

내일은 라우터에 대해 더 깊이 공부해보자

 

 

 

 

 

 

 

vue에서 @는 src 폴더를 찾아가라는 의미이다.

728x90
저작자표시 (새창열림)