안녕하세요~~
오늘도 무럭무럭중인 1월의 나무(ㅋㅋㅋ)입니다!!
아니 아니.... 코지코더님 유튜브 무료 강의 따라 하며 정리하고 있었는데...
vue2서비스는 곧 종료된다고 하더라구요....주륵....
그래서 vue.js3를 프로젝트로 배우는 영상이 있길래
경로를 틀었습니다..!!!
일단 vue.js2는 Options API를 사용하고,
vue.js3는 Composition API를 사용한다고 합니다!!!
아직 이 차이가 정확히 어떤 건지 자세히 파악이 안 되었지만
나중에 정확하게 알게 되면 추가로 정리해보려고 합니다..!!!
설치 및 환경세팅을 하는 데에도 벌써 차이가 나더라고요!!!
아직은 지식의 한계로 나만의 언어로 설명해 보자면...
vue.js2에서는 index.html 한 곳에 스크립트 몽땅 다 넣어만드는 느낌이라면
vue.js3에서는 여러 파일로 쪼개져 화면에서 js파일을 읽고,
js파일에서 vue컴포넌트 파일을 읽어서
코드가 훨씬 깔끔해 보인다는 것..??!!
동작 순서만 제대로 파악하면 나중에 훨씬
편리할 것 같다는 생각이 들었습니다~~~
(잘못된 부분이 있다면 알려줘요 :)
자 그럼 vue.js3로 프로젝트를 만들기 위해
오늘은 설치하고 환경 세팅하는 것을 정리하도록 하겠습니다 ㅎㅎㅎㅎ
저는 위에 말했다시피 코지코더님의 무료 유튜브 강의를
보고 열공하고 있답니다!!!!
https://www.youtube.com/c/kossiecoder
코지 코더 Kossie Coder
호주에서 웹개발자로 일하고 있는 코지 코더의 채널입니다! 실용적인 개발 영상들로 처음 코딩을 접하시는 분들이 따라하시고 기본을 익힐수 있는 영상들을 만들고 있습니다. 감사합니다 ^^
www.youtube.com
vue.js3를 설치하기 위해 미리 준비되어있어야 할 것으로는
1.node.js 설치방법
안녕하세요!>0 고급 시스템 설정 > 환경 변수 > Path C:\Program Files\nodejs nodejs 실행파일의 path경로를 확인하실 수 있습니다. (혹시라도 나중에 VSCode에서 확인할 때 프로그램명을 찾지 못한다는 오류
januarytree.tistory.com
2.Visual Studio Code 설치하기!
안녕하세요~! vue.js로 프로젝트 만들기 위한 환경세팅으로 VSCode 설치방법을 정리해보았습니다! 이전에 node.js는 설치하셨나요?? 안하셨으면 아래의 자료를 참고하여 nodejs도 설치해주세요~! https://
januarytree.tistory.com
이것 또한 제가 정리해 둔 것이 있으니 링크 확인해 주세요~!!
자 이 모든 준비가 완료되었다면 시작하도록 하겠습니다.
1.vue.js3 CLI로 설치하기
vue.js3를 설치하는 방법은
1.CDN
2.npm
3.CLI
4.Vite
이렇게 여러 가지가 있다고 하는데요!!!
저는 그중에서 CLI를 통해 설치해 보았습니다 ㅎㅎㅎ
*** vue.js공식문서에 설치내용이 있는데.!!!
강의에서 보여준 문서와 현재 가이드문서가 좀 달라서...
vue사이트 참고로 올려두겠습니다 ^^
Vue.js - The Progressive JavaScript Framework | Vue.js
Versatile A rich, incrementally adoptable ecosystem that scales between a library and a full-featured framework.
vuejs.org
vueCLI를 먼저 설치하기 위해서는 npm이나 yarn이 설치되어있어야 하는데요!!
node.js를 설치하셨으면 npm은 설치가 되어있을 것입니다!!!!
터미널(window+r +cmd) 창을 열어
node -v로 노드가 설치되어 있나 확인해 봅니다!
되어있다면 npm -v로 설치되어 있나 확인해 봅니다!!!
모두 버전이 잘 떴다면!
npm install -g @vue/cli
로 설치를 시작하도록 하겠습니다.
vue CLI가 잘 설치되어있는지 확인해 주기 위해
설치가 끝나면 vue -V를 입력해 봅니다!! (대문자 V)
vue CLI를 기존에 설치하신 분들은
다시 설치해 주시면 좋을 것 같습니다 ㅎㅎ
그럼 vue3프로젝트를 생성해 볼까요???
vue createvue3-project를 입력해 주시면
(vue3-project 이 부분은 만들고자 하는 폴더명으로 자유롭게 만드시면 됩니다!!)
아마 [Vue 2] ~~ 랑 [Vue 3] ~~ 를 선택하도록 되어있을 것입니다!!!
그럼 우리는 [Vue 3]~~ 로 된 것을 선택하고 엔터를 눌러주면
설치가 되어 화면과 같이 뜰 것입니다!!
2. VSCode 설정하기
위에서 만든 vue3-project 폴더를 열어줍니다!!!!
여기서 원하는 툴을 설정할 수 있습니다!!!!
저는 코지코더님 영상과 동일한
Vetur을 설정해 보도록 하겠습니다 ㅎㅎ
설치가 완료되면 vetur 사이트에 들어갑니다.
https://vuejs.github.io/vetur/guide/setup.html#project-setup
Setup | Vetur
Setup Extensions VS Code Config Navigate to your VS Code settings. On Windows/Linux - File > Preferences > Settings. On macOS - Code > Preferences > Settings. Add vue to your eslint.validate setting, for example: Project Setup jsconfig.json vs. tsconfig.js
vuejs.github.io
Setup > Project Setup 에
jsconfig.json 파일에 추가하라는 내용이 있습니다.
{
"include":[
"./src/**/*"
]
}
자 그럼 vue3로 프로젝트를 시작할 준비는 모두 끝났습니다!!!!
다음에는 기본적인 vue3프로젝트 구조에 대해 정리해 보도록 하겠습니다:)
vue.js3와 관련하여 좋은 정보나 제 글에서 문제가 되는 부분이 있다면
댓글로 남겨주시면 감사하겠습니다!!!
'vue.js > vue.js3로 to-do List 프로젝트 만들기' 카테고리의 다른 글
| 6. [vue3-project] getCurrentInstance사용하기(구:useContext) (2) | 2023.12.20 |
|---|---|
| 5. [vue3-project] Vue Router 설치하여 페이지 추가하기 (0) | 2023.12.13 |
| 4. [vue3-project]폼 컴포넌트 만들어 사용하기(props/emits) (0) | 2023.12.12 |
| 3. [vue3-project] 컴포넌트와 프래그먼트 (1) | 2023.12.06 |
| 2. [vue3-project] 폴더 구조 알아보기 (2) | 2023.12.05 |
