Vue3 로 빠르게 프론트 웹 개발을 시작한다

evilcurse -

챕터1. Node를 설치한다.

Node.js 의 공식 홈페이지는 https://nodejs.org/ 다. 그냥 최신 버전을 설치하면 된다. 프로덕션용이라면 마지막 LTS버전을 사용하면 될 것.

간단히 Node가 뭐냐면,

비동기 이벤트 기반 JavaScript 런타임인 Node.js는 확장 가능한 네트워크 애플리케이션을 구축하도록 설계되었고, 더 쉽게 말하면 서버에 Node.js가 설치되어있고 우리는 Node.js를 이용하여 자바스크립트 언어로 프로그램을 만들어서 사용할 수 있다. 지금은 단순히 Vue로 프로젝트를 시작하려면 꼭 필요한 프로그램이라고만 알고 있으면 된다.

챕터2. Vue프로젝트를 생성한다.

[Vue공식홈페이지] https://vuejs.org/guide/quick-start.html 공식 홈페이지를 가서 따라하면 된다.

터미널을 열고 프로젝트 폴더에 서 아래 명령어를 수행한다.

npm init vue@latest

y를 입력한다.

프로젝트 명을 입력한다. 나는 ‘my-vue-project’라고 했다.

앞으로 계속 질문이 나온다.

➜  vue npm init vue@latest
Need to install the following packages:
  create-vue@3.7.1
Ok to proceed? (y) y

Vue.js - The Progressive JavaScript Framework

✔ Project name: … my-vue-project
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in /Users/evilcurse/Projects/vue/my-vue-project...

Done. Now run:

  cd my-vue-project
  npm install
  npm run format
  npm run dev

➜  vue

➜ vue 이 부분은 폴더명이니 신경쓰지말도록하자. 위 내용은 내가 ‘npm init vue@latest’를 실행하여 선택한 부분인데 위 글에는 잘 나와있지 않지만 아래처럼 선택을 하였다.

챕터3. Vue서버를 가동한다.

설치완료된후 실행하라고 한 그대로 명령어를 친다.

  1. cd my-vue-project
  2. npm install
  3. npm run format
  4. npm run dev

아래와 같이 출력된다.

➜  vue cd my-vue-project
➜  my-vue-project npm install

added 389 packages, and audited 390 packages in 24s

110 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
➜  my-vue-project npm run format

> my-vue-project@0.0.0 format
> prettier --write src/

src/App.vue 121ms
src/assets/base.css 8ms
src/assets/main.css 2ms
src/components/__tests__/HelloWorld.spec.ts 8ms
src/components/HelloWorld.vue 26ms
src/components/icons/IconCommunity.vue 3ms
src/components/icons/IconDocumentation.vue 2ms
src/components/icons/IconEcosystem.vue 2ms
src/components/icons/IconSupport.vue 1ms
src/components/icons/IconTooling.vue 2ms
src/components/TheWelcome.vue 12ms
src/components/WelcomeItem.vue 6ms
src/main.ts 3ms
src/router/index.ts 5ms
src/stores/counter.ts 4ms
src/views/AboutView.vue 2ms
src/views/HomeView.vue 2ms
➜  my-vue-project npm run dev

> my-vue-project@0.0.0 dev
> vite


  VITE v4.4.6  ready in 420 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

서버가 가동된 것으로 보이고 http://localhost:5173을 브라우저로 접속해 본다.

끗!!!