[Vue.js] Vue Cli 로 Vue3 시작하기

Vue3를 시작하기 전에 node.js가 설치되어 있어야 한다. NVM(Node Version Manager) 을 설치하면 node.js를 편리하게 설치, 관리 할수 있다. 다음 링크에 관련 내용을 작성해 두었다.

 

https://kindloveit.tistory.com/106

 

node.js가 설치되었으면 Vue Cli(Command Line Interface)를 Global로 설치하도록 한다.

 

$ npm install -g @vue/cli

 

참고로 Global로 설치를 하면 현재  Local이 아닌 시스템 전역 위치에 설치가 되는데 위치가 궁금할 때가 있다. Global로 설치시 아래 경로에서 설치가 된다. 

 

C:\Users\[MyUser]\AppData\Roaming\npm\node_modules

 

실제로 위 경로에 가보면 방금 설치한 Vue Clie가 있는것을 확인할 수 있다.

 

$ ls -l
total 8
drwxr-xr-x 1 kindlove 197609 0  2월  2 02:51 cli/
drwxr-xr-x 1 kindlove 197609 0  2월  8  2022 cli-init/
drwxr-xr-x 1 kindlove 197609 0  2월  7  2022 cli-service-global/

kindlove@DESKTOP-GH94F8C MINGW64 ~/AppData/Roaming/npm/node_modules/@vue

 

vue create [프로젝트명] 을 입력하면 기본 예제 코드를 생성해 준다. 현 시점에서 기본으로  Vue 3로 선택되어 있음을 볼 수 있다. 기본 값으로 진행을 하면 아래와 같이 진행이 된다.

 

$ vue create my-test
? Please pick a preset: (Use arrow keys)
? Please pick a preset: Default ([Vue 3] babel, eslint)
✨  Creating project in E:\Temp\test\my-test.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...


> yorkie@2.0.0 install E:\Temp\test\my-test\node_modules\yorkie
> node bin/install.js

setting up Git hooks
done


> core-js@3.27.2 postinstall E:\Temp\test\my-test\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"

added 854 packages from 465 contributors and audited 855 packages in 31.746s

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

found 0 vulnerabilities

🚀  Invoking generators...
📦  Installing additional dependencies...

added 101 packages from 63 contributors and audited 956 packages in 9.306s

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

found 0 vulnerabilities

⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project my-test.
👉  Get started with the following commands:

 $ cd my-test
 $ npm run serve

 

기본 실행 명령어 npm run serve로 서버를 실행해본다.

 

$ npm run serve

> my-test@0.1.0 serve E:\Temp\test\my-test
> vue-cli-service serve

 INFO  Starting development server...
 DONE  Compiled successfully in 4381ms오전 3:29:28


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://172.30.1.30:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

 

로컬 서버 주소로 진입해 보면 샘플 웹페이지가 뜨는것을 볼 수 있다.

 

 

기본으로 설치된 소스의 package.json을 보면 아래와 같이 scripts 명령어가 serve, build, lint 3개 밖에 없다.

 

{
  "name": "my-test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^3.2.13"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}

 

실행시 개발 모드 관련 ENV 설정 및 부가 정보 설정을 위해 아래 행을 추가한다.

 

  "scripts": {
    "dev": "cross-env VUE_ENV=dev NODE_OPTIONS=--max_old_space_size=8192 vue-cli-service serve",
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

 

...

 

  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "cross-env": "^7.0.3"
  },

 

새로 추가한 명령어 npm run dev로 실행해보면 development server로 실행됨을 볼 수 있다.

$ npm run dev

> my-test@0.1.0 dev E:\Temp\test\my-test
> cross-env VUE_ENV=dev NODE_OPTIONS=--max_old_space_size=8192 vue-cli-service serve

 INFO  Starting development server...
 DONE  Compiled successfully in 4244ms오전 3:38:25


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://172.30.1.30:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

 

--  The End --