1. node.js설치
- 웹개발 라이브러리 설치를 도와주는 npm사용을 위함.
- 난 기존에 설치되어 있어서 생략.
2. vue 설치
- 새 터미널 열고
> npm install -g @vue/cli
C:\Users\rosei\AppData\Roaming\npm\vue -> C:\Users\rosei\AppData\Roaming\npm\node_modules\@vue\cli\bin\vue.js
+ @vue/cli@5.0.4
updated 1 package in 51.801s
-> 둘 중 하나.
3. 확장프로그램 설치
- vue 3 snippets
- vetur 나 volar 둘 중 하나
처음에 vetur로 설치했으나 The template root requires exactly one element 에러가 밑줄과 발생되어서 사용안함 처리 후 volar로 변경설치함. (vscode다시 켜야 함)
- HTML CSS Support
설치 이후 에러 발생 시 참조 할 글 👇👇👇👇👇
https://codingapple.com/unit/vue-3-installation-with-vue-cli/?id=139
개발환경 셋팅과 Vue 3버전 설치 (자주겪는 에러 포함) - 코딩애플 온라인 강좌
Vue 설치부터 하도록 합시다. 문법 체험을 위해 HTML 파일에 라이브러리 식으로 간략하게 설치하는 방법은 쓰지 않고 실제 Web-app 개발에 필요한 Vue 프로젝트를 처음부터 만드는 식으로 진행합니
codingapple.com
4. 파일 생성 후 vue프로젝트 생성하기
> vue create 생성할프로젝트명
이렇게 진행하면 vue 프로젝트를 빠르게 생성해준다.
나는 vue create를 할 때 보안 오류 PSSecurityException 이 발생되었다.
vue : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\rosei\AppData\Roaming\npm\vue.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오.
라는데 주소가 404..
근데 알고보니 주소가 줄바꿈 되어서 안열리는거였다..(위 링크는 되도록 연결 해 둠)
아무튼 나의 경우는 저게 안돼서
혹시 몰라서 vscode를 관리자모드로 실행 후 (이건 필수인지 모르겠음)
> vue.cmd create 생성할프로젝트명
위와 같이 뜨면 Default옆에 > 이렇게 화살표 나오는데, 위아래로 이동이 가능하다.
난 vue3을 사용할거기에 화살표 그대로 두고 엔터.
패키지 관리자는 뭘로 할건지 또 선택하라고 함. 난 npm으로 선택.
그럼 뭔가 막 설치하기 시작한다.
그 와중에 이모지 왜케 귀엽..
5. 설치 완료
설치가 완료 되면 프로젝트 생성 완료했다고 알려주고,
내가 선택한 폴더안에 vue프로젝트에 필요한 파일들이 자동 생성된 걸 볼 수 있다.
흐뭇😊
🌼폴더구조 및 설명🌼
🥨 src/App.vue : 메인 페이지. 이 안에 html, css, js역할이 들어있다
- 웹 브라우저는 App.vue 해석이 안돼서 html로 컴파일 해서 동작이 되는데, src/main.js에서 public/index.html 안에 App.vue의 코드를 불러오도록 해서 웹에서 실행되는것이라고 한다.
🥨 node_modules 폴더 : 프로젝트에 쓰이는 라이브러리들
🥨 src 폴더 : 소스코드들 들어가는 곳
🥨 public 폴더 : html, 기타파일등이 들어가는 곳
🥨 package.json : 라이브러리 버전, 프로젝트 설정 기록
🌼미리보기🌼
프로젝트를 꼭 오픈하고!
>npm run serve
터미널에 생성된 링크를 클릭하면 -
App.vue에서 글자를 조금 바꿔주고 실행했다.
이름도 아이콘도 넘나 이쁜데, 최애가 되었으면 좋겠다 :)
여기까지 오류발생+검색+ 이 글을 작성하면서 설치해서 좀 걸렸는데,
설치는 약 30분정도 소요 된 것 같다.
'💻 더 나은 개발자 되기 > 셋팅, 오류, 꿀팁' 카테고리의 다른 글
| [react] 리액트 프로젝트 생성, 수정, 배포 (1) | 2022.03.28 |
|---|---|
| esLint / Parsing error: No Babel config file detected for ... (3) | 2022.03.25 |
| [git, github] 깃 포크 클론 하는 법 (1) | 2022.03.22 |
| [jekyll] 지킬 테마 사이트 모음 (2) | 2022.03.22 |
| [github] 엄청 간단! 배포해서 깃허브 페이지 사용하기 (2) | 2022.03.22 |
