svelte

관련 자료

https://svelte.dev/

 

Svelte • Cybernetically enhanced web apps

Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app. Instead of using tec

svelte.dev

https://github.com/sveltejs/svelte

 

sveltejs/svelte

Cybernetically enhanced web apps. Contribute to sveltejs/svelte development by creating an account on GitHub.

github.com

https://svelte.dev/tutorial/basics

 

Introduction / Basics • Svelte Tutorial

Introduction / Basics a. Basicsb. Adding datac. Dynamic attributesd. Stylinge. Nested componentsf. HTML tagsg. Making an app a. Assignmentsb. Declarationsc. Statementsd. Updating arrays and objects a. Declaring propsb. Default valuesc. Spread props a. If b

svelte.dev

 

Virtual DOM을 사용하지 않고 더 적은 코드로(Vuejs, React 대비) 개발을 할 수 있는 svelte다.

[그림1] svelte 예제 화면

 

저작자표시 변경금지

'Javascript' 카테고리의 다른 글

Buefy UI Framewrk - Vuejs  (0) 2021.06.26
Quasar UI Framewrk - Vuejs  (0) 2021.02.19
[Javascript] ag-grid  (0) 2019.10.20
BootboxJS — Bootstrap의 모달을 쉽게 컨트롤 하자  (0) 2019.05.27
Mobx - Simple, scalable state management  (0) 2019.05.11

BootstrapVue

관련 자료

 

https://blog.logrocket.com/getting-started-with-bootstrapvue-2d8bf907ef11

 

Getting started with BootstrapVue

In this post, we will learn the basics of BootstrapVue, demonstrate the setup process and build out an example Vue.js project.

blog.logrocket.com

https://bootstrap-vue.js.org/

 

BootstrapVue

Quickly integrate Bootstrap 4 components with Vue.js

bootstrap-vue.js.org

https://github.com/bootstrap-vue/bootstrap-vue

 

bootstrap-vue/bootstrap-vue

BootstrapVue, with over 40 plugins and more than 75 components, provides one of the most comprehensive implementations of Bootstrap 4 components and grid system for Vue.js and with extensive and au...

github.com

 

 

Vue.js와 세계에서 가장 널리 사용되는 프런트 엔드 CSS 라이브러리 인 Bootstrap 4를 사용하여 웹에서 반응 형 모바일 우선 프로젝트를 구축하십시오.

BootstrapVue는 광범위하고 자동화 된 WAI-ARIA 액세스 가능성 마크 업을 갖춘 Vue.js 2.5+에서 사용할 수있는 가장 포괄적 인 Bootstrap V4 구성 요소 및 그리드 시스템 구현 중 하나를 제공합니다.

 

＃WAI-ARIA 

https://github.com/lezhin/accessibility/blob/master/aria/README.md

 

lezhin/accessibility

모두를 위한 설계. 레진 웹 접근성 가이드라인. Contribute to lezhin/accessibility development by creating an account on GitHub.

github.com

[그림1] BootstrapVue logo

 

BootstrapVue 시작하기

Vue.js를 사용하여 반응이 빠른 모바일 우선 사이트 구축을위한 Bootstrap V4를 시작하십시오.

  • Vue.js v2.5 is required, v2.6.10 is recommended
  • Bootstrap v4.3 is required, v4.3.1 is recommended
  • PortalVue v2.0 is required, v2.1.1 is recommended
  • jQuery is not required

 

Using module bundlers

...더보기

# With npm

npm i vue bootstrap-vue bootstrap

 

# With yarn

yarn add vue bootstrap-vue bootstrap

진입점에 아래 코드 삽입

// app.js
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'

Vue.use(BootstrapVue)

Bootstrap and BootstrapVue css 파일 삽입

// app.js
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

 

- Vue CLI 2 이용해서 시작하기

# Ensure Vue CLI is installed and up to date
npm i -g vue-cli

# Initialize a BootstrapVue project in the directory 'my-project'
vue init bootstrap-vue/webpack-simple my-project

# Change into the directory
cd my-project

# Install dependencies
npm i

# Fire up the dev server with HMR
npm run dev

 

 

아래 그림은 BootstrapVue에서 Form의 기본 예제로 화면에 띄운 그림이다.

[그림2] BootstrapVue form

 

 

 

 

저작자표시 변경금지

'Javascript' 카테고리의 다른 글

BootboxJS — Bootstrap의 모달을 쉽게 컨트롤 하자  (0) 2019.05.27
Mobx - Simple, scalable state management  (0) 2019.05.11
브라우저에서 particle을 만들어 보자  (0) 2019.04.19
nextjs - service side react framework  (0) 2019.04.16
preactjs - react의 subset, simple, lightweight library  (0) 2019.04.12

+ Recent posts

티스토리툴바