본문 바로가기
Frontend/Vue

Vue.js 강의 - Vue UI 와 Vue 관련 개발 Tools

by 훈즈 플로거 2020. 5. 13.

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

Introduction VERSION NOTE This is the documentation for Vue Loader v15 and above. If you are upgrading from v14 or an earlier version, check out the Migration Guide. If you are using an older version, the old docs are here . What is Vue Loader? vue-loader

vue-loader.vuejs.org

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

webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

webpack.js.org

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

 

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

위키백과, 우리 모두의 백과사전. 웹팩(Webpack 또는 webpack)은 오픈 소스 자바스크립트(JS) 모듈 번들러이다.[2][3][4][5] 주로 자바스크립트(JS)를 위한 모듈 번들러이지만 호환 플러그인을 포함하는 ��

ko.wikipedia.org

Visual Studio Code 설치

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

 

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com

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

 

Download Visual Studio Code - Mac, Linux, Windows

Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications.

code.visualstudio.com

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

 

Documentation for Visual Studio Code

Find out how to set-up and get the most from Visual Studio Code. Optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com

[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

Chrome and Firefox DevTools extension for debugging Vue.js applications.

chrome.google.com

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

 

The Vue.js DevTools

Vue has a great panel that integrates into the Browser Developer Tools, which lets you inspect your application and interact with it, to ease debugging and understanding

flaviocopes.com

<router-link>

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

 

API 레퍼런스 | Vue Router

API 레퍼런스 는 라우터 지원 앱에서 사용자 네비게이션을 가능하게하는 컴포넌트입니다. 목표 위치는 to prop로 지정됩니다. 기본적으로 올바른 href를 갖는 태그로 렌더링 되지만 tag prop로 구성 ��

router.vuejs.org

bit.ly/2LMzjNC

 

[인프런 인강] 선착순 100명 50% 할인쿠폰! - [Vue.js] Real 웹앱 개발 - 1부 : vue 개념 ~ 핵심 문법

인프런 인터넷 강의 선착순 100명 50% 할인쿠폰! [Vue.js] javascript Real 웹앱 개발 - 1부 : vue 개념 ~ 핵심 문법 쿠폰번호 : 678-ee6aa5185caa 사용법 : 결제시 쿠폰코드 등록을 통해 적용 기한 : 2020년 6월..

plogger.tistory.com

bit.ly/2TtRHis

 

[Vue.js] Javascript Real 웹앱 개발 - 1부 : vue 개념 ~ 핵심 문법 - 인프런

이 강의를 수강하시면 Vue.js 와 관련된 기본적인 개념부터 Real 웹앱 개발을 해 볼 수 있습니다. 이 강의는 1부 기본기 이며, 2부와 3부를 통해서 실제 Real 웹앱을 구현해 보도록 하겠습니다. 초급 ��

www.inflearn.com

 

댓글0