Vue를 사용하여 개인 블로그를 만듭니다.js- 제1부분: 입문

안녕하세요, 저의 Vue & Markdown을 이용하여 개인 블로그를 구축하는 새로운 강좌에 오신 것을 환영합니다!이 자습서에서는 Vue를 사용하여 모든 기능이 포함된 개인 블로그를 만듭니다.js를 GitHub 페이지에 배치합니다!따라서 이 강좌를 시작하기 전에 Vue.js Docs를 보셔야 할 수도 있습니다.Vue의 기본 기능을 사용하는 방법을 학습한 후js, 계속합시다!
프로젝트가 끝난 후의 모습을 보고 싶으시면 my blog!이 자습서와 같은 코드를 사용합니다.

프로젝트 시작

나는 네가 이미 설치했다고 생각한다Vue CLI.없는 경우 the docs에 따라 Vue CLI를 설치합니다.우리는 잠시 후의 강좌에서 그것을 사용할 것이다.
자, 준비 다 됐습니다. 우리 프로젝트를 창설합시다.터미널에서 vue create <project-name>를 입력하여 자리 표시자 이름을 원하는 이름으로 바꿉니다.사용personal-blog:

Enter 키를 누르면 다음과 같은 인터페이스가 나타날 수 있습니다.

화살표 키를 사용하여 Manually select features를 선택하고 Enter 키를 누르면 다음과 같은 양식이 표시됩니다.

전환CSS Pre-processors 및 Router.다른 두 기본값이 모두 활성화되어 있는지 확인하십시오.그런 다음 Enter 키를 누릅니다.너는 네가 선택한 확장 기능을 선택할 수 있다. 다음은 나의 것이다.

그런 다음 Enter 키를 누릅니다.CLI 도구는 자동으로 빈 항목을 생성합니다.설치가 완료되면 실행cd <project-name>이 프로젝트 폴더에 들어갑니다.
우선, 우리의 프로젝트를 운행하여 우리의 명령npm run serve이 모두 정상적임을 확보한다.몇 초 동안 기다린 다음 브라우저에서 http://localhost:8080/로 이동합니다.다음과 같은 페이지가 표시됩니다.

자, 이제 사이트가 생겼으니 스타일을 연구해야 합니다.

UI 라이브러리 선택

UI 라이브러리를 선택하는 것이 중요합니다.그것은 사이트의 주요 디자인과 외관을 정의하기 때문에 우리는 반드시 조심해야 한다.물론 당신은 CSS 같은 것을 직접 쓸 수 있지만, 이것은 너무 복잡합니다.흔히 볼 수 있는 Vue UI 프레임워크는 Vuetify,Material Design,BootstrapVue의 Vue UI 프레임워크로 Vue와 Bootstrap,Quesar Framework의 혼합체이다.js 프레임워크는 설계 지침을 따른다.하지만 이게 다 정상이야.기왕 우리가 개인 블로그를 세우려면, 우리는 반드시 독특한 디자인을 해야 한다.그래서 저는 Vuesax, 하나의 프레임을 선택했습니다.
Vue의 어셈블리입니다.js.그것은 어떤 디자인 준칙도 따르지 않았지만 매우 독특한 디자인을 가지고 있다.

사용할 Vuesax 버전은 4입니다.x, 그것은 여전히 알파 상태에 있다.그러나 이미 제작된 구성 요소는 우리를 위해 간단한 인터페이스를 만들기에 충분하다.현재 주요 버전(3.x)의 문서here를 보거나 4의 개발을 추적할 수 있습니다.xhere on GitHub.설치하려면 터미널에서 새 옵션을 열고 프로젝트에 cd를 넣은 다음 npm install vuesax@next Vuesax 4 설치를 실행하십시오.설치 후, 우리는 우리의 블로그를 위해 기본 프레임워크를 만들 것이다.

기본 웹 사이트 만들기

항목 비우기

자, 이제 코드를 봅시다.HelloWorld.vue 폴더의 src/components를 열고 모든 내용을 삭제합니다.그런 다음 App.vue 폴더의 src로 이동하여 모든 내용을 다시 삭제합니다.그리고 우리는 지금 About.vue 중의 src/views를 삭제할 것이다. 왜냐하면 우리는 그것을 필요로 하지 않기 때문이다.이 과정을 마치면 콘솔에서 오류 메시지가 나타날 수 있습니다.걱정하지 마세요. 이것은 Vue에서 우리가 방금 삭제한 파일을 찾을 수 없기 때문입니다. About.vuesrc/router/index.js에서 /about 노선을 뜯어내다.

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
]

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

export default router

지금 다시 사이트를 살펴보겠습니다.그것은 공백 사이트로 변했다.위대하다그게 우리가 원하는 거야.그래서 이제 우리는 자신의 사이트에서 일할 수 있게 되었다.

블로그에서 일하다

이제 우리 src/components/HelloWorld.vue 의 이름을 Index.vue 로 바꾸자.내부에서 이름을 바꾸지 않았기 때문에 다시 오류가 발생할 것입니다. src/views/Home.vue이름을 바꾸겠습니다.

<template>
  <div>
    <Index/>
  </div>
</template>

<script>
import Index from '@/components/Index.vue'

export default {
  name: 'Home',
  components: {
    Index
  }
}
</script>

요소의 클래스 삭제home, Vue 로고 이미지 삭제, 구성 요소 삭제div의 속성 삭제 등 변경도 했습니다.그래서 지금 이 사이트는 다시 운영할 수 있을 것이다.계속합시다.

내비게이션 막대 만들기

모든 사이트의 맨 위에 내비게이션 표시줄이 있어야 하는데, 우리 블로그도 마찬가지다.다행히도, Vuesax는 우리를 위해 Navbar 구성 요소를 만들었다.따라서 우리는 내비게이션 표시줄 구성 요소를 쉽게 만들 수 있다.
먼저 msg에 새 파일을 만듭니다Index.이것은 우리가 내비게이션 표시줄을 작동시키는 데 사용할 문서가 될 것이다.
그런 다음 Navbar.vue 내부 가져오기src/components:

<template>
  <div>
    <Navbar/>
  </div>
</template>

<script>
import Navbar from '@/components/Navbar.vue'

export default {
  name: 'Index',
  components: {
    Navbar
  }
}
</script>

자, 이제 우리는 마침내 내비게이션 표시줄에서 일할 수 있게 되었다.기본 템플릿을 설정합니다.

<template>
  <div></div>
</template>

<script>
export default {
  name: 'Navbar'
}
</script>

잠깐만, 우리는 곧 내비게이션 표시줄에 도착할 거야.하지만 이제 Navbar.vue를 프로젝트에 가져와야 합니다.다음 코드로 편집Index.vue:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import Vuesax from 'vuesax'
import 'vuesax/dist/vuesax.css'

Vue.config.productionTip = false

Vue.use(Vuesax, {})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

이제 프로젝트에 Vuesax를 추가해서 내비게이션 표시줄을 만듭니다.나는 단지 문서에서 제시한navbar 예시에 근거하여 복사하고 편집했을 뿐이다.

<template>
  <div>
    <vs-navbar shadow-scroll fixed center-collapsed v-model="active">
      <template #left>
        <h3>Hello World</h3>
      </template>
      <vs-navbar-item :active="active == 'home'">
        Home
      </vs-navbar-item>
      <template #right>
        <vs-button flat>Posts</vs-button>
      </template>
    </vs-navbar>
  </div>
</template>

<script>
export default {
  name: 'Navbar',
  data: () => {
    return {
      active: 'home'
    }
  }
}
</script>

현재 웹 사이트는 다음과 같습니다.

글씨체가 엉망진창인 것 같은데?윌, 양귀비꽃이 나를 구하러 왔어!나는 이미 그것을 이 강좌 밑에 있는GitHub 링크에 업로드했기 때문에, 너는 거기에서 다운로드할 수 있다.전체 Vuesax 폴더를 src/main.js 폴더에 붙여넣고 fonts라는 새 폴더를 만듭니다.그런 다음 이름public이라는 새 CSS 스타일시트를 만듭니다.다음 코드는 기본적인 글꼴 지원만 제공하고 용기와 구분자를 추가했을 뿐 특별한 점이 없습니다.다음으로 이동styles:

@font-face
{
  font-family: Poppins;
  src: url("../fonts/Poppins/Poppins-Regular.ttf");
  font-weight: 400;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  font-family: Poppins;
}

.container {
  margin-left: 50px;
  margin-right: 50px;
}

hr {
  border-width: 1px;
  border-style: solid;
  border-color: #EEF2F5;
  margin-bottom: 10px;
}

그런 다음 새 행을 main.css 폴더에 추가합니다main.css.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!-- This line below -->
    <link rel="stylesheet" type="text/css" href="<%= BASE_URL %>styles/main.css"/>
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

좋습니다. 웹 페이지를 다시 불러옵니다. 새 페이지가 될 것입니다.

깔끔하죠?이것이 바로 정확한 글씨체를 찾는 중요성이다.나는 Poppins를 선택했다. 왜냐하면 그들은 Vuesax Website에서 사용한 글씨체와 매우 비슷하기 때문이다.

총결산

이상은 본 강좌의 이 부분이다.우리는 Vuesax 프레임워크를 이용하여 기본적인 내비게이션 표시줄을 만들었고 매우 간단한 소형 사이트를 만들었는데 내비게이션 표시줄이 하나밖에 없다.예전과 같이, 만약 당신이 이 강좌에 대해 어떤 의문이 있다면, 언제든지 아래에서 평론을 발표하십시오.안녕히 계세요!다음에 봐요.