Vuetify를 사용하여 시작하기 전에 헤더를 만들어보십시오.
개요
현재 만들고있는 Vue.js 앱의 외형을 정돈하기 위해 Vuetify를 사용해보십시오.
우선 페이지의 헤더를 만드는 것을 목표로 합니다.
VueCLI3.0에서 만든 응용 프로그램이 이미 있다고 가정합니다.
버전
MacOS
Mojave 10.14.2
vue
2.5.17
설치
응용 프로그램의 루트 디렉토리에서 명령을 실행합니다.
cd vue-app
vue add vuetify
? Choose a preset: (Use arrow keys)
> Default (recommended)
이것만으로 좋은 느낌으로 설치해줍니다.
주의
기존 앱에 설치하는 경우의 주의점입니다.
App.vue 덮어쓰기
App.vue가 Vuetify의 기본 페이지로 덮어 씁니다.
App.vue의 변경은 취소해 둡시다.
git checkout src/App.vue
레이아웃 무너짐
내 앱에서 기존 레이아웃에 무너짐이 발생했습니다.
설치 전
설치 후
조정 귀찮게. 처음부터 Vuetify 넣고 화가 이야기 네요.
아니면 피할 수 있습니까?
변경점
App.vue를 제외하면 변경 사항은 다음과 같습니다.
src/plugins/vuetify.js+ import Vue from 'vue'
+ import Vuetify from 'vuetify/lib'
+ import 'vuetify/src/stylus/app.styl'
+
+ Vue.use(Vuetify, {
+ iconfont: 'md',
+ })
src/main.jsimport Vue from 'vue'
+ import './plugins/vuetify'
import App from './App.vue'
import store from './store'
public/index.html <head>
...
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">
</head>
그리고는 package.json 와 lock 파일이 갱신되고 있을 것입니다.
헤더 만들기
toolbar 를 사용합니다.
Header.vue<template lang="pug">
v-toolbar
v-toolbar-title.headline
span.font-weight-light ここがタイトル
</template>
레이아웃 조정
표시시켜 보면 어떨까요.
왠지 화면 상단에 수수께끼의 여백이.
App.vue의 기본 스타일시트 때문입니다.
App.vue<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
- margin-top: 60px;
}
</style>
이제 여백이 사라지고 깔끔하게 헤더를 표시할 수 있었습니다.
결론
이번은 도입이라고 하는 것으로 헤더만 만들었습니다만,
Vuetify에는 많은 컴포넌트가 준비되어 있는 것 같아서 여러가지 시도해 보겠습니다.
Reference
이 문제에 관하여(Vuetify를 사용하여 시작하기 전에 헤더를 만들어보십시오.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/tocomi/items/230b7fce3989634484f4
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
응용 프로그램의 루트 디렉토리에서 명령을 실행합니다.
cd vue-app
vue add vuetify
? Choose a preset: (Use arrow keys)
> Default (recommended)
이것만으로 좋은 느낌으로 설치해줍니다.
주의
기존 앱에 설치하는 경우의 주의점입니다.
App.vue 덮어쓰기
App.vue가 Vuetify의 기본 페이지로 덮어 씁니다.
App.vue의 변경은 취소해 둡시다.
git checkout src/App.vue
레이아웃 무너짐
내 앱에서 기존 레이아웃에 무너짐이 발생했습니다.
설치 전
설치 후
조정 귀찮게. 처음부터 Vuetify 넣고 화가 이야기 네요.
아니면 피할 수 있습니까?
변경점
App.vue를 제외하면 변경 사항은 다음과 같습니다.
src/plugins/vuetify.js+ import Vue from 'vue'
+ import Vuetify from 'vuetify/lib'
+ import 'vuetify/src/stylus/app.styl'
+
+ Vue.use(Vuetify, {
+ iconfont: 'md',
+ })
src/main.jsimport Vue from 'vue'
+ import './plugins/vuetify'
import App from './App.vue'
import store from './store'
public/index.html <head>
...
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">
</head>
그리고는 package.json 와 lock 파일이 갱신되고 있을 것입니다.
헤더 만들기
toolbar 를 사용합니다.
Header.vue<template lang="pug">
v-toolbar
v-toolbar-title.headline
span.font-weight-light ここがタイトル
</template>
레이아웃 조정
표시시켜 보면 어떨까요.
왠지 화면 상단에 수수께끼의 여백이.
App.vue의 기본 스타일시트 때문입니다.
App.vue<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
- margin-top: 60px;
}
</style>
이제 여백이 사라지고 깔끔하게 헤더를 표시할 수 있었습니다.
결론
이번은 도입이라고 하는 것으로 헤더만 만들었습니다만,
Vuetify에는 많은 컴포넌트가 준비되어 있는 것 같아서 여러가지 시도해 보겠습니다.
Reference
이 문제에 관하여(Vuetify를 사용하여 시작하기 전에 헤더를 만들어보십시오.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/tocomi/items/230b7fce3989634484f4
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
git checkout src/App.vue
App.vue를 제외하면 변경 사항은 다음과 같습니다.
src/plugins/vuetify.js
+ import Vue from 'vue'
+ import Vuetify from 'vuetify/lib'
+ import 'vuetify/src/stylus/app.styl'
+
+ Vue.use(Vuetify, {
+ iconfont: 'md',
+ })
src/main.js
import Vue from 'vue'
+ import './plugins/vuetify'
import App from './App.vue'
import store from './store'
public/index.html
<head>
...
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">
</head>
그리고는
package.json 와 lock 파일이 갱신되고 있을 것입니다.헤더 만들기
toolbar 를 사용합니다.Header.vue
<template lang="pug">
v-toolbar
v-toolbar-title.headline
span.font-weight-light ここがタイトル
</template>
레이아웃 조정
표시시켜 보면 어떨까요.
왠지 화면 상단에 수수께끼의 여백이.
App.vue의 기본 스타일시트 때문입니다.
App.vue
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
- margin-top: 60px;
}
</style>
이제 여백이 사라지고 깔끔하게 헤더를 표시할 수 있었습니다.
결론
이번은 도입이라고 하는 것으로 헤더만 만들었습니다만,
Vuetify에는 많은 컴포넌트가 준비되어 있는 것 같아서 여러가지 시도해 보겠습니다.
Reference
이 문제에 관하여(Vuetify를 사용하여 시작하기 전에 헤더를 만들어보십시오.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/tocomi/items/230b7fce3989634484f4
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(Vuetify를 사용하여 시작하기 전에 헤더를 만들어보십시오.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/tocomi/items/230b7fce3989634484f4텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
