Vue.js 맛보기

vue-cli 설치

terrypark@localhost  ~  sudo npm install vue-cli -g

Password:

npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)

⸨░░░░░░░░░░░░░░░░░░⸩ ⠴ fetchMetadata: WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)

/usr/local/bin/vue -> /usr/local/lib/node_modules/vue-cli/bin/vue

/usr/local/bin/vue-list -> /usr/local/lib/node_modules/vue-cli/bin/vue-list

/usr/local/bin/vue-init -> /usr/local/lib/node_modules/vue-cli/bin/vue-init

+ vue-cli@2.9.6

added 235 packages in 62.51s

   ╭─────────────────────────────────────╮

   │                                     │

   │   Update available 5.5.1 → 5.6.0    │

   │     Run npm i -g npm to update      │

   │                                     │

   ╰─────────────────────────────────────╯

Project 만들기

terrypark@localhost  ~  vue init webpack todos-client

? Project name todos-client

? Project description todo list

? Author Terry.Park <terry.park@daumkakao.com>

? Vue build standalone

? Install vue-router? Yes

? Use ESLint to lint your code? No

? Set up unit tests No

? Setup e2e tests with Nightwatch? No

? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "todos-client".

# Installing project dependencies ...

# ========================

npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.

npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features!

npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.

WARN notice [SECURITY] mime has the following vulnerability: 1 moderate. Go here for more details: https://nodesecurity.io/advisories?search=mime&version=1.3.6 - Run `npm i npm@latest -g` to upgrade your npm version, and then `npm audit` to get more info.

> fsevents@1.2.4 install /Users/terrypark/todos-client/node_modules/fsevents

> node install

[fsevents] Success: "/Users/terrypark/todos-client/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node" already installed

Pass --update-binary to reinstall or --build-from-source to recompile

> uglifyjs-webpack-plugin@0.4.6 postinstall /Users/terrypark/todos-client/node_modules/webpack/node_modules/uglifyjs-webpack-plugin

> node lib/post_install.js

npm notice created a lockfile as package-lock.json. You should commit this file.

npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.

added 1199 packages in 36.165s

   ╭─────────────────────────────────────╮

   │                                     │

   │   Update available 5.5.1 → 6.4.1    │

   │     Run npm i -g npm to update      │

   │                                     │

   ╰─────────────────────────────────────╯

# Project initialization finished!

# ========================

To get started:

  cd todos-client

  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

위의 가이드를 따라해보자

cd todos-client

npm run dev

결과

참고 사이트 : https://www.youtube.com/watch?v=b_sZiPXezSo