yarn global add @vue/cli

mac 에서는 환경변수 추가해줘야 한다.

yarn config set prefix ~/.yarn-global

open ~/.zshrc
// zsh에 설정해주기
export PATH="$PATH:`yarn global bin`"
source ~/.zshrc

yarn config get prefix 

vue --version

vue create [project-name]
cd [project-name]
yarn serve

프로젝트 구조 살펴 보기

├─ public
│  └── index.html
│  
├─ src
│  ├─ assets
│  │   └─ logo.png
│	 ├─ components
│  │   └─ HelloWorld.vue
│  │
│	 ├─ App.vue
│  └─ main.js
│
├─ babel.config.js
└─ package.json

• public: 웹팩의 처리를 받지않는 정적 자산
• src
  • assets : css, image 등 정적 자산, 웹팩의 처리를 받는다
  • main.js : Vue 앱을 초기화하여 index.html에 연결
  • App.vue : Vue의 최상위 컴포넌트
  • components : 단일 파일 컴포넌트 (.vue)
• babel: JavaScript 기능을 상용 브라우저 호환이 가능하도록 구버전으로 번역하는 역할

VScode 유용한 플러그인

• Vetur
• Vue
• Vue VSCode Snippets

절대 경로 설정하기

1. yarn add path

   아래 파일들은 모두 package.json와 같은 디랙토리에 만들면 된다.

2. vue.config.json 파일

   const path = require('path');
   
   module.exports = {
       configureWebpack: {
           resolve: {
               alias: {
                   '@': path.join(__dirname, 'src'),
                   '@@': path.join(__dirname, 'src/components'),
               }
           }
       }
   }
   

3. jsconfig.json 파일 만들기 vscode에서 별칭을 인지한다.

   복붙했을 때 에러 뜰 수 있다. 신경쓰지말자 3번 가면 해결된다.

   {
       "compilerOptions": {
         "baseUrl": ".",
         "paths": {
           "@/*": [
             "./src/*"
           ],
           "@@/*": [
             "./src/components/*"
           ]
         }
       },
       "exclude": [
         "node_modules",
         "dist",
         "public"
       ]
   }