소개

Vue.js 또는 React를 사용하는 방법을 시도 할 때 Node.js를 설치하거나 Vue.js를 설치하는 데 시간이 많이 걸립니다. CodePen 라는 사이트를 사용하면 환경 작성 없이 웹 브라우저에서 시도하거나 다른 사람에게 코드를 공유하는 등을 쉽게 할 수 있습니다.
기본적으로 Vue.js와 Vuetify를 사용하는 설정이 없으므로 설정 방법을 요약합니다.

절차

CodePen에 로그인하여 Pen 만들기

Pen에서 Vue.js 및 Vuetify 사용

펜 설정 열기

Vue.js와 Vuetify를 JavaScript에서 호출합니다.

Vuetify를 CSS에서 호출

Vuetify 시도

1. CodePen에 로그인

CodePen에 로그인하고 오른쪽 상단의 사용자 아이콘을 클릭합니다.
표시되는 창에서 NewPen을 클릭하여 Vue.js를 시도하는 화면을 표시합니다.

2. Vue.js 및 Vuetify 자바스크립트 사용

이 상태에서도 html, CSS, JavaScript를 시도 할 수 있지만! [2.OpenSettings.png]
Vue.js와 Vuetify를 사용하려면이 두 라이브러리를 호출하도록 설정해야합니다.

2. 1. Pen 설정 열기

펜 설정을 열려면 오른쪽 상단의 설정을 클릭하여 펜 설정 창을 엽니다.

2. 2. Vue.js와 Vuetify를 JavaScript에서 호출

Pen Settings 창에서 JS를 클릭하여 JavaScript에 대한 설정을 엽니다.
Add External Scripts/Pens 항목에 vue를 입력하면 후보가 나오므로 필요한 Vue와 Vuetify를 클릭합니다.
이때 후보에 없으면 손으로 URL을 넣을 수도 있습니다.

2. 3. Vuetify를 CSS에서 호출

이 상태에서는, Vuetify의 CSS가 맞지 않기 때문에 CSS용의 설정을 해 갑니다.
검색에서 Vuetify가 나오지 않았으므로 Add External Stylesheets/Pens의 항목에 손으로 아래의 URL을 넣고 Save 버튼을 누릅니다.

https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css

Vuetify 시도

이제 환경 만들기가 완료되었으므로 Vuetify를 사용해보십시오.
공식 Vuetify의 메뉴 버튼과 거의 같습니다만, 공식이라면 CSS나 JS의 메소드등을 사용하지 않기 때문에 CSS와 메소드를 사용하기 위해 클릭 후의 리스트를 줄무늬로 했습니다.

See the Pen menu by mink0212 ( @mink0212 )
on CodePen .

끝에

CodePen을 사용하여 Vuetify를 사용하는 방법을 요약했습니다. JS의 설정등은 여러가지 사이트에서 하고 있습니다만, CSS는 생략하고 있는 것이 많이 주의가 필요합니다.

이렇게 하면 귀찮은 환경 작성에서 해방되어 약간의 시도를 간단하게 하고, 소스와 소스의 결과를 쉽게 다른 사람에게 공유할 수 있기 때문에, 공유 상대에게 환경을 만들 필요도 없고 편리하다 라고 느꼈습니다.

소스의 길이에 따라서는 가독성이 바뀌어 버리기 때문에, 큰 소스의 공유에는 적합하지 않습니다만, 간단한 공부회나 Qiita와 같은 곳에 태우기에 충분히 생각됩니다.