[Vue] 개발환경 셋팅 + 프로젝트 생성

1. 다운로드

• node js
• vs code

node.js 를 설치하면 npm을 이용할 수 있다.
npm은 각종 웹 개발 라이브러리들을 쉽게 이용할 수 있게 도와주는 패키지 매니저다. (yarn도 마찬가지)
npm으로 vue cli를 설치한다. (vue 프로젝트 생성을 빠르게 도와주는 라이브러리)

2. vue/CLI 설치

vs code 터미널에
npm instsall -g @vue/cli

npm install -g @vue/cli
npm install -g @vue/cli@4.5.11

맥북의 경우 명령어 앞에 sudo(admin 권한) 명령어를 붙여주면 정상 동작한다.

sudo npm install -g @vue/cli

npm 에서 에러가 날 경우
yarn 설치 후, 윈도우 재부팅, 후 터미널에서 yarn을 설치한다.
(맥은 터미널 아무데나 열고 npm install -g yarn 하면 됨)

yarn global add @vue/cli

설치중

3. vscode 익스텐션

Vetur

HTML CSS Support

Vue 3 Snippets

4. vue 프로젝트 생성

작업용 프로젝트 폴더 생성 후 vs code에서 폴더를 연다.
터미널에서 vue 프로젝트를 생성한다. (프로젝트 명으로 폴더가 생성된다.)

vue create 프로젝트명

vue 프로젝트 생성

Vue 3 선택

설치 중

설치 완료

vue 프로젝트 생성이 완료되면, 지정했던 폴더 안에 ‘프로젝트명’으로 폴더가 생성되어 있다.
‘프로젝트명’ 폴더를 vs code에서 연다.

설치에 에러가 날 경우

1. npm, yarn 명령어 입력하자마자 에러가 날 경우

설치가 잘 되다가 갑자기 중간에 빨간게 뜨며 에러가 나는 대부분의 경우는
99% 확률로 node js가 최신버전이 아닐 경우입니다.
node js 삭제 후 다른버전을 받아서 다시 시도한다.

2. 맥에서 permission이 없어요, 권한이 없어요 에러가 뜬다면

직관적인 해결책은 그냥 npm이나 yarn 쓸때 앞에 sudo 라는 단어를 붙여주는것이다.
sudo npm install -g @vue/cli
하지만 sudo는 임시방편일 뿐..

npm ERR! syscall access
npm ERR! Error: EACCES: permission denied, access '/user/local/lib/node_modules'

예를 들어 위와 같은 에러가 뜰 경우
/user/local/lib/node_modules 라는 폴더에 수정권한을 주면 된다.

sudo chown -R 맥북유저이름: 위에뜬경로
sudo chown -R $USER 위에뜬경로

위 둘 중 하나를 입력하면 대부분 해결된다.
맥북유저이름은 터미널에 whoami 입력하면 나온다.

3. 윈도우 Powershell 에서 빨간글씨로 ‘보안오류’가 뜰 경우

“허가되지 않은 스크립트 입니다 …” 에러가 뜨면
윈도우 검색메뉴(돋보기) - Powershell 검색 - 우클릭 - 관리자권한으로 실행한 뒤

Set-ExecutionPolicy Unrestricted

그대로 복사해서 입력한다.

Y 입력

4. 윈도우 Powershell을 이용하는 경우도 권한이 없다고 하는 경우

Powershell을 관리자권한으로 실행 한다.

5. 작업위치

src/App.vue에 코드를 짜면된다. (메인페이지)

6. 코드 미리보기

터미널을 연다

npm run serve

로컬 주소 컨트롤+클릭

7. 맥북에서 수정 권한이 없다고 에러를 띄우면 권한을 줘야한다.

sudo chown -R 맥북이름: 경로
sudo chown -R 맥북이름: /Users/miok/Documents/svn/aluvy/vue-dongsan/vuedongsan/src/App.vue

맥북 이름은 터미널에 whoami 입력