상용구를 설정한 후 가장 먼저 할 일은 그것을 해독하는 것입니다. 상용구에는 몇 가지 데모 자료가 포함되어 있지만 내 프로젝트에는 이러한 자료가 필요하지 않으므로 모든 항목을 제거하고 깨끗한 빈 슬레이트에서 시작하고 싶습니다. 코드를 볼 수 있습니다here.

파일별로 살펴보겠습니다. 현재 사이트는 다음과 같습니다.

App.vue

이것은 우리의 루트 구성 요소입니다. 이것은 우리가 다루는 최고 수준의 Vue 구성 요소이며 항상 로드됩니다. 따라서 모든 앱 수준 항목, 즉 앱 바(및 나중에 UI 알림)가 여기에 들어갑니다.

중요한 것은 라우터 구성 요소가 여기에 들어가야 한다는 것입니다. 라우터 구성 요소는 vue-router에서 제공하며 현재 있는 URL에 따라 보기 전환을 처리합니다.

원래 상용구 파일은 here 입니다. 짧은 형식으로 여기 있습니다 (많은 것을 잘라 냈습니다)

<template>
  <v-app>
    <v-app-bar
      app
      color="primary"
      dark
    >
      ... snip ...
    </v-app-bar>

    <v-main>
      <HelloWorld/>
    </v-main>
  </v-app>
</template>

<script lang="ts">
import Vue from 'vue';
import HelloWorld from './components/HelloWorld.vue';
export default Vue.extend({
  name: 'App',
  components: {
    HelloWorld,
  },
  data: () => ({
    //
  }),
});
</script>

여기서 언급할 가치가 있는 몇 가지 사항이 있습니다. 먼저 상용구는 를 정의합니다. 이것은 스크린샷 상단의 파란색 막대입니다. 이것은 component is provided by Vuetify, it contains all the styling for an application bar, and has many options for tuning its appearance, for example right now it's set to dark which causes the text to show up in white. I'm going to go with the default for now, and will adjust appearances later.

The boilerplate also sticks in a component which it imports from components/HelloWorld.vue this component is what's responsible for all the junk on the page. I'll describe that later.

Finally, the part of this Vue component contains just your standard matter for defining a component, it's empty other than defining the name, and a list of imported components (i.e. HelloWorld).

I'm going to do four things to this file:

Strip out the and put that in its own component at components/AppBar.vue

Remove and delete the vue file, we don't want that in here

Switch to TypeScript, and simplify the notation using vue-property-decorator Vue 구성 요소

를 정의하는 약간 더 깔끔한 방법입니다.

구성 요소를 다시 삽입합니다. 이 구성 요소는 vue-router에서 제공합니다. vuetify가 자신의 것을 설치할 때 제거하기 전에 실제로 Vue 상용구 App.vue 파일에 있습니다.

최종 코드는 here에서 찾을 수 있으며 아래에서 전체 코드를 재현하고 있습니다.

<template>
  <v-app>
    <AppBar />

    <v-main>
      <v-container fluid>
        <router-view />
      </v-container>
    </v-main>

    <!-- <v-footer app>
    </v-footer> -->
  </v-app>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import AppBar from '@/components/AppBar.vue'

@Component({ components: { AppBar } })
export default class AppView extends Vue {}
</script>

보시다시피, 이것은 이미 훨씬 깨끗합니다. 참고 구성 요소를 추가했지만 주석 처리했습니다. 나중에 추가하겠습니다.

라우터/index.ts

vue-router에서 제공하는 라우터 구성 요소는 URL에 따라 보기를 전환해 보겠습니다. 제공된 기본 경로는 / 홈 경로와 /about 구성 요소에 로드되는 views/About.vue 경로입니다. 우리는 필요하지 않기 때문에 이것도 삭제할 것입니다.

라우터의 원본 콘텐츠는 here입니다.

import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes: Array<RouteConfig> = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

여기서 내가 만드는 유일한 변경 사항은 필요하지 않기 때문에 /about 경로를 주석 처리하는 것입니다. 나머지는 지금 그대로 두고 뷰를 더 추가하면 이 라우터에 추가하겠습니다. 코드는 here 입니다.

조회수/Home.vue

라우터 파일은 우리가 / 주소의 루트에 있을 때 Home의 views/Home.vue 구성 요소가 App.vue에 있는 곳에 로드되어야 한다고 말합니다. 상용구의 해당 파일에는 원본 Vue.jsboilerplate file가 포함되어 있으며 다음과 같습니다.

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
  name: 'Home',
  components: {
    HelloWorld
  }
}
</script>

다시 한 번 삭제하려는 구성 요소를 로드하려고 시도합니다. 나는 이것을 다음과 같이 대체합니다.

<template>
  <v-container>
    <Section>
      <template v-slot:title>Welcome to CurateBot</template>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc faucibus nulla massa, sed porta dui pretium ut. Aenean vulputate laoreet dapibus. Vestibulum lacinia nibh at lectus semper pretium. Pellentesque semper ut ante eget finibus. Ut scelerisque velit neque. Ut porta ex orci, vitae eleifend ante pellentesque in. 
      </p>
    </Section>
  </v-container>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import Section from '@/components/Section.vue'

@Component({ components: { Section } })
export default class HomeView extends Vue {}
</script>

나는 내 자신의 구성 요소(나중에 표시할 것임)를 정의하고 있으며 그 안에 섹션 제목을 위한 슬롯title이 있으며 여기에 일부Lorem Ipsum를 추가했습니다.

구성요소/AppBar.vue

App.vue 파일 내부에서 자체 구성 요소 파일로 앱 바 구성 요소를 이동했습니다. 이렇게 하면 항목이 깨끗하고 구획화됩니다. 파일을 볼 수 있습니다here , 밴드 아래에서 재생합니다. 이 시점에서 거의 빈 구성 요소이며 거기에 및 자리 표시자만 있습니다.

<template>
  <v-app-bar app color="primary" dark>
    <v-btn text>Link</v-btn>
  </v-app-bar>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';

@Component
export default class AppBar extends Vue {}
</script>

구성 요소/Section.vue

마지막으로 내가 정의하는 새 구성 요소입니다. a를 기반으로 하지만 카드가 페이지 중앙에 오도록 여백에 대한 일부 설정이 있습니다(플렉스/그리드를 사용하는 것보다 단일 열 페이지 레이아웃에 대한 더 간단한 대안).

<template>
  <v-card
    class="my-4 mx-auto"
    max-width="860"
  >
    <v-card-title class="primary white--text mb-5">
      <slot name="title"></slot>
    </v-card-title>

    <v-card-text>
      <slot></slot>
    </v-card-text>

  </v-card>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
@Component
export default class Section extends Vue {}
</script>

Home.vue에서 볼 수 있듯이 이 구성 요소를 다른 콘텐츠를 삽입하여 재사용할 수 있도록 몇 가지가 정의됩니다.

최종 결과는 다음과 같습니다.



아주 최소한으로, 상용구에서 모든 추가 정크를 정리하여 새 콘텐츠를 받을 준비가 되었습니다!