Node js 설치
다운로드 사이트 https://nodejs.org/ko/download/
nvm을 통해 필요한버전을 install하고 use하여 사용한다.
1 nvm install v10.15.3
2 nvm ls // 설치된 버전들을 확인.
2 nvm use 10.15.3
** 12이상의 버전을 사용하여야 Vue Cli사용 가능 하다.
오류 발생시 해결 방법
- window powershell을 관리자 권한으로 실행하여 nvm use명령을 사용한다.
vue-cli 설치 -
npm install -g @vue/cli
or
yarn global add @vue/cli
버전 확인
1 vue --version
오류 발생시 해결 방법
VSCode의 터미널을 통하여 npm혹은 yarn을 사용하여 처음 작업을 수행할 때, 다음과같은 에러가 발생할 수 있습니다.
이 시스템에서 스크립트를 실행할 수 없으므로 ~(블라블라)~ 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오." 로, 시스템의 설정에서 스크립트를 실행할 수 있는 권한이 부여되어있지 않은 상태라서 해당 작업 명령을 수행할 수 없어서 발생하는 오류입니다.
Window10 기준으로, Windows PowerShell 앱을 통하여 시스템의 스크립트 실행권한을 변경하여 해결할 수 있습니다.
1. Windows PowerShell 앱을 검새하여 관리자로 실행합니다.
-
현재 권한상태를 확인합니다.
get-ExecutionPolicy
저는 상태값 "Restricted" 으로, 로컬에서 작성한 스크립트를 실행할 수 없는상태여서 오류가 발생한 것입니다.
- 권한 상태값
Restricted : default설정값으로, 스크립트 파일을 실행할 수 없습니다.
AllSigned : 신뢰할 수 있는(서명된) 스크립트 파일만 실행할 수 있습니다.
RemoteSigned : 로컬에서 본인이 생성한 스크립트와, 신뢰할 수 있는(서명된) 스크립트 파일 실행할 수 있습니다.
Unrestricted : 모든 스크립트 실행가능
ByPass : 경고/차단 없이 모든 것을 실행가능하도록함
Undefined : 권한을 설정하지 않겠음
-
권한 상태를 "RemoteSigned"으로 변경합니다.
Set-ExecutionPolicy RemoteSigned
Y -
권한이 정상적으로 변경되었는지 다시 확인
get-ExecutionPolicy
-
VSCode로 돌아가서 터미널 명령을 다시 수행하여 오류가 해걸되었는지 확인
- 처음에 실행되지않았던 명령이, 이제는 정상적으로 수행되었습니다.
Vue 설치
vue create test1
Vue CLI v5.0.4
Please pick a preset: (Use arrow keys)
Default ([Vue 3] babel, eslint)
Default ([Vue 2] babel, eslint)
Manually select features
화살표로 이동하여 manually select features 선택
Router, Vuex 선택후 enter...이후 쭉 enter하여 설치.
PS D:\study\Basic_vue> vue create shoping
Vue CLI v5.0.4
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No
설치가 완료되면 프로젝트가 생성된다.
npm run serve -> 실행하면 localhost:8080 으로 화면 확인 가능.
