0 강의 오리엔테이션 및 개발환경 설정

source: categories/study/vue-beginner-lv5/vue-beginner-lv5_0.md

0.1 강의 오리엔테이션

0.2 개발환경 안내 및 프로젝트 생성

0.2.1 개발 환경 구성

  • 크롬
  • VSCode or Webstorm
  • Vue.js Dev Tools
  • Node.js

0.2.2 VSCode 플러그인 목록

  • 색 테마: Night Owl
  • 파일 아이콘 테마: Material Icon Theme
  • 뷰 확장 플러그인: Vetur
  • 뷰 코드 스니팻: Vue VSCode Snippets
  • 문법 검사: ESLint, Prettier, ES6 String HTML
  • 실습 환경 보조: Live Server
  • 기타
    • Project Manager, Auto Close Tag, GitLens, Atom Keymap, Jetbrains IDE Keymap 등

0.2.3 프로젝트 세팅


vue create vue-todo

? Please pick a preset: (Use arrow keys)
❯ Default ([Vue 2] babel, eslint) 
  Default (Vue 3) ([Vue 3] babel, eslint) 
  Manually select features

0.2.3.1 vue cli 버전 업데이트 방법


npm update -g @vue/cli
# OR
yarn global upgrade --latest @vue/cli

위 명령어를 실행했는데 @vue/cli 버전 업데이트가 제대로 되지 않았다.
@vue/cli 모듈을 한번 지워주자.


npm uninstall @vue/cli -g
up to date in 0.03s

제대로 안 지워진 느낌이다.


vue
Usage: vue <command> [options]

Options:
  -V, --version                              output the version number
  -h, --help                                 output usage information

Commands:
  create [options] <app-name>                create a new project powered by vue-cli-service
  add [options] <plugin> [pluginOptions]     install a plugin and invoke its generator in an already created project
  invoke [options] <plugin> [pluginOptions]  invoke the generator of a plugin in an already created project
  inspect [options] [paths...]               inspect the webpack config in a project with vue-cli-service
  serve [options] [entry]                    serve a .js or .vue file in development mode with zero config
  build [options] [entry]                    build a .js or .vue file in production mode with zero config
  ui [options]                               start and open the vue-cli ui
  init [options] <template> <app-name>       generate a project from a remote template (legacy API, requires @vue/cli-init)
  config [options] [value]                   inspect and modify the config
  outdated [options]                         (experimental) check for outdated vue cli service / plugins
  upgrade [options] [plugin-name]            (experimental) upgrade vue cli service / plugins
  migrate [options] [plugin-name]            (experimental) run migrator for an already-installed cli plugin
  info                                       print debugging information about your environment

  Run vue <command> --help for detailed usage of given command.

vue 명령어도 아직 제대로 인식을 한다.
정확히 어디에 @vue/cli가 설치되었는지 알아봐야될 것 같다.


# window
%USERPROFILE%\AppData\Roaming\npm\node_modules

# mac
/usr/local/lib/node_modules

위 경로로 들어가서 직접 지워주자.
사용하는 OS에 따라 아래 명령어를 입력해준다.


cd /usr/local/lib/node_modules

흐음.. 강의에선 ls 명령어를 입력하면 @vue npm이 나온다.
그리고 rm -rf @vue 명령어로 @vue를 지운다.
그런데 내 맥북에선 @vue 라이브러리가 안나오네..


npm i -g @vue/cli
# OR
npm i -g @vue/cli@최신버전

그냥 위와 같이 설치했다.
그리고 터미널을 껐다가 다시 키니까 최신 버전으로 인식했다.


vue --version
@vue/cli 4.5.15

2022년 1월 7일 기준 @vue/cli 최신 버전 - 4.5.15


vue create vue-todo