Vue.js Setting 관련 정리

1. VS Code 설치

2. node.js 설치

3. Vue 관련 Extention Pack (확장팩) 설치
  - Vetur (혹은 Vue Language Features (Volar)) 
  - Vue 3 Snippets, ESLint, HTML CSS Support 등

4. D directory 에 적당한 Project Folder 생성후 VS Code 에서 폴더 File > Open Folder 로 생성한 폴더 열기

5. VS Code Terminal
  -> npm install -g vue  -> 확인 -> vue --version 
  -> npm install -g @vue/cli
  -> vue create welcome(프로젝트 이름 아무거나)
      -> 에러시 window powershell 에서 
      -> 1) set-ExecutionPolicy -ExecutionPolicy Unrestricted 실행
      -> 2) Get-ExecutionPolicy -List => 적용 확인
      -> 3) 원복할 경우 => set-ExecutionPolicy -ExecutionPolicy Undefined

   -> cd welcome > npm install -force --save axios   (ajax 통신용) 

6. Terminal 에서 D:\VueProject\welcome 로 이동후
 -> npm run serve (http://localhost:8080)

 

7. 추가 설정

- .prettierrc 생성 (prettier code convention 에서 아래 내용 제외)
{
  "semi": false,
  "bracketSpacing": true,
  "singleQuote": true,
  "useTabs": false,
  "trailingComma": "none",
  "printWidth": 80
}

- Template Make 
  -> Configure User Snippets > vue.json 검색 > 아래내용추가
  "Generate Basic Vue Code": {
    "prefix": "vue-start",
    "body": [
      "<template>\n\t<div</div>\n</template>\n\n<script>\nexport default {\n\tcomponents: {},\n\tdata(){\n\t\treturn{\n\t\t\tsamepleData:''\n\t\t}\n\t}, \n\tsetup() {},\n\tcreated() {}, \n\tmounted() {},\n\tunmounted() {}, \n\tmethods:{}\n}\n</script>"
    ],
    "description": "Generate Basic Vue Code"
  }

- package.json 추가 (eslintConfig 부분) 
    "rules": {
      "space-before-function-paren": "off"
    }

- vue.config.js
 -> 기존거 삭제하고 아래 추가 (이클립스 서버를 먼저 뛰우면 vue 서버는 자동으로 8081 로 실행)

 -> 이클립스 서버 실행후 VSCode 에서 Client 만 구성하여 ajax 통신할때 CORS 에러 없이 실행하고 싶을 때 세팅
module.exports = {
  devServer: {
    proxy: 'http://localhost:8080' -> eclipse base domain
  }
}