안녕하세요! nuxt.js (vue의 서버사이드렌더링) 프로젝트를 만드는것에대해 설명하려 합니다.
먼저 설치되어있어야 하는부분은
npm -> 인터넷에 치시면 설치가 가능합니다. https://www.npmjs.com/get-npm
visual code -> 이건 다른 프로그램이 있다면 대체 가능합니다. https://code.visualstudio.com/download
먼저 npm을 설치하셧다면
검색 -> 원격 or cmd 를 검색하셔서 열어주세요 powershell도 가능합니다.
윈도우에서는 원하는 폴더에서 원격 or powershell을 열 수 있습니다.
아래의 명령어를 입력합니다.
(npm설정은 기본적으로 설치할때 알아서 path적용이 되기때문에 따로 적용을 하거나 할 필요는 없습니다. 만약 동작이 안되는경우 설치하는 법을 검색하신후에 다시 와주세요!)
npm install -g vue-cli 을 입력해줍니다.
-g 를 넣는 이유는 전역으로 설치를 하기위해서입니다.
설치가 완료되었다면, 원하시는 폴더로 이동해주세요.
이렇게 원하는 폴더에서 powershell 창열기 또는 원격프롬프트 열기를 누르신후
vue init nuxt-community/starter-template testproject
testproject는 프로젝트의 이름입니다. 원하시는 이름을 입력하시면 됩니다.
starter-template는 미리 만들어져있는 바로 프로그래밍을 시작할수있게 도움을 줍니다.
위의 명령어를 치면 몇가지의 설정이 나오는데 모두 엔터를 치시면 됩니다. 변경하거나 할 필요가 없습니다.
그럼
vue-cli · Generated "testproject".
To get started:
cd testproject
npm install # Or yarn
npm run dev
아래의 문구가 나오면서 프로젝트 설정이 완료됩니다.
cd testproject 를 입력하시고 testproject로 들어갑니다.
npm install 을 입력하면 node-moduel이 설치됩니다. 완료될때까지 기다려주세요.
완료되면 주르르륵 뭐가 쭈우우우욱 적히면서
:-:
.==-+:
.==. :+- .-=-
.==. :==++-+=.
:==. -**: :+=.
:+- :*+++. .++.
:+- -*= .++: .=+.
-+: =*- .+*: .=+:
-+: .=*- .=*- =+:
.==: .+*: -*- -+-
.=+:.....:+*-.........:=*=..=*-
.-=------=++============++====:
Thanks for installing nuxtjs
Please consider donating to our open collective
to help us maintain this package.
Number of contributors: 202
Number of backers: 216
Annual budget: US$ 51,884
Current balance: US$ 10,785
이런 모양이 나올거에요 WARN이 적혀있는건 무시하셔도됩니다.
만약 에러(빨간색 글씨)가 뜨면 그 에러를 검색해 보셔야합니다. 처음부터 따라오셧다면 에러가 없는게 정상입니다.
자 그럼 프로젝트 설치가 완료되었습니다.
npm run dev 를 쳐봅시다
그럼 nuxt가 실행되며 server와 client가 검사를 진행하며 완료되면 localhost:3000 으로 프로젝트에 접근할 수 있습니다.
이런 화면이 나왔다면!!! 완벽하게 프로젝트를 설치하셧습니다.
이제 코딩을 진행하면 되겠죠!!
이번 글은 여기까지입니다. 다음은 페이지를 수정하고 원하는 모양으로 만들어보겠습니다!