[Hoon] Vuejs 강의 - Vue UI 와 Vue 관련 개발 Tools

vue ui

vue ui

CLI Service

This is what you will see in the package.json of a project using the default preset:

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  }
}

npm run build # OR yarn build

Vue Loader

https://vue-loader.vuejs.org/

Introduction | Vue Loader

What is Vue Loader?

vue-loader is a loader for webpack that allows you to author Vue components in a format called Single-File Components (SFCs)

vue-loader는 SFC 형태의 Vue 컴포넌트를 작성할 수있는 webpack 용 로더입니다.

webpack

https://webpack.js.org/concepts/

Concepts | webpack

https://ko.wikipedia.org/wiki/웹팩

웹팩 - 위키백과, 우리 모두의 백과사전

Visual Studio Code 설치

Visual Studio Code - https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

Visual Studio Code Download - https://code.visualstudio.com/Download

Download Visual Studio Code - Mac, Linux, Windows

Visual Studio Code Guide - https://code.visualstudio.com/docs

Documentation for Visual Studio Code

[Extensions]

Eclipse Keymap, ESLint, GitLens, Vetur, Vue 2 Snippets, Vue Theme, vue-beautify ..

settings.json

{
  "javascript.suggestionActions.enabled": true,
  "editor.formatOnSave": true,
  "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "singleQuote": true
    }
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

Devtools

https://github.com/vuejs/vue-devtools

Installation

Get the Chrome Extension

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

Vue.js devtools

https://flaviocopes.com/vue-devtools/#how-to-use-the-developer-tools

The Vue.js DevTools

<router-link>

https://router.vuejs.org/kr/api/#router-link

API 레퍼런스 | Vue Router

bit.ly/3fXOzon

인프런 인강 선착순 30% 마지막 할인 쿠폰 - Vue.js 핵심 강의!

bit.ly/2TtRHis

[Vue.js 입문] 초보 실전 웹앱 개발 - 1부 : vue 개념 ~ 핵심 - 인프런