Hoon's Company - Frontend/Backend/Data & Android

[Vue.js] SFC (Single File Components) 는 무엇인가? 본문

Frontend/Vue

[Vue.js] SFC (Single File Components) 는 무엇인가?

훈즈 플로거 2020. 2. 18. 17:10

Single File Components , SFC - .vue 확장자를 가진 싱글 파일 컴포넌트

 

싱글 파일 컴포넌트 — Vue.js

Vue.js - 프로그레시브 자바스크립트 프레임워크

kr.vuejs.org

페이지내 Vue 선언 방식의 disadvantages(약점)

Global definitions - 모든 컴포넌트에 대한 고유한 이름 필요

String templates - 구문 강조가 약함, 여러 줄로 된 HTML에 보기 안좋은 슬래시

No CSS support - CSS is conspicuously left out

        CSS 를 지원하지 않는 것이 아니라 CSS 가 눈에 띄게 모듈화 되지 않음

No build step – 전처리기가 아닌 HTML ES5 JavaScript제한

페이지내 Vue 선언 방식 약점을 해결한 SFC 의 특징

Complete syntax highlighting  - Atom, Sublime Text, Visual Studio Code, Intellij

 

vuejs/awesome-vue

🎉 A curated list of awesome things related to Vue.js - vuejs/awesome-vue

github.com

CommonJS modules ES2015(ES6), CommonJS(ServerJS)

 

Modules | 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

 

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

 

ko.wikipedia.org

Component-scoped CSSScoped CSS

 

Scoped CSS | Vue Loader

Scoped CSS When a tag has the scoped attribute, its CSS will apply to elements of the current component only. This is similar to the style encapsulation found in Shadow DOM. It comes with some caveats, but doesn't require any polyfills. It is achieved by u

vue-loader.vuejs.org

실제 SFC 로 개발된 Example

Simple To Do App - https://codesandbox.io/s/o29j95wx9

 

Simple Todo App with Vue - CodeSandbox

A very simple todo app to provide a taste of developing with single-file components.

codesandbox.io

  • index.html  
  • index.js  
  • App.vue
  • variables.scss
  • TodoList.vue
  • TodoListItem.vue
  • BaseInputText.vue

NPM 

 

npm Documentation

The current stable version of npm is here. To upgrade, run: npm install [email protected] -g To report bugs or submit feature requests for the docs, please post here. Submit npm issues here.

docs.npmjs.com

 

npm (소프트웨어) - 위키백과, 우리 모두의 백과사전

위키백과, 우리 모두의 백과사전.

ko.wikipedia.org

ES6

 

Babel · The compiler for next generation JavaScript

The compiler for next generation JavaScript

babeljs.io

 

ECMAScript 6

ECMAScript 6 - ECMAScript 2015 What is ECMAScript 6? ECMAScript 6 is also known as ES6 and ECMAScript 2015. Some people call it JavaScript 6. This chapter will introduce some of the new features in ES6. JavaScript let JavaScript const JavaScript Arrow Func

www.w3schools.com

 

0 Comments
댓글쓰기 폼