Vue에 CSS 프레임워크를 통합하는 방법은 무엇입니까? 방법 소개

다음 Vue.js 튜토리얼 칼럼에서는 Vue.js에 CSS 프레임워크를 통합하는 방법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

CSS 프레임워크가 훌륭한 데에는 여러 가지 이유가 있습니다. 예를 들어 코드를 이해하기 쉽고, 웹 애플리케이션을 유지 관리하기 쉽고, 프로토타입 구현 단계가 단순화됩니다. 일반적으로 VUE에 CSS 프레임워크를 통합하는 방법은 동일합니다. 이 기사에서는 널리 사용되는 Bootstrap 4를 예로 들어 보겠습니다.

준비

CSS 프레임워크를 다운로드하기 전에 Vue CLI를 사용하여 새 프로젝트를 만듭니다.

npm install vue-cli
vue init webpack project-name

Bootstrap 4 설치 및 통합

새 Vue 프로젝트를 만들고 초기화한 후 를 사용하세요. npm 부트스트랩 4를 다운로드합니다. Bootstrap 4의 JavaScript는 jQuery에 의존하므로 jQuery도 설치해야 합니다. npm 下载 Bootstrap 4。由于 Bootstrap 4 的 JavaScript 依赖于 jQuery，所以还需要安装 jQuery。

npm install bootstrap jquery --save

你需要在自己的 Vue 的 main.js 文件中添加 Bootstrap 依赖项，这样就可以在整个程序中全局使用。

import './../node_modules/jquery/dist/jquery.min.js';
import './../node_modules/bootstrap/dist/css/bootstrap.min.css';
import './../node_modules/bootstrap/dist/js/bootstrap.min.js';

如果你的程序构建失败，应该安装 popper.js 依赖项。之后应该就不会报错了。

npm install --save popper.js

这样 Bootstrap 4 就被集成到 Vue 重了。

安装并集成 Bulma

Bulma 一个是基于 Flexbox 的轻巧灵活的 CSS 框架。它在 GitHub 上的 star 已有超过了 25K。

与 Bootstrap 不同，Bulma 重仅包含 CSS，没有 jQuery 或 JavaScript 的依赖项。

安装 Bulma：

npm install bulma

在下载Bulma之后，打开你的 main.js 并将其导入。

/* main.js */
import './../node_modules/bulma/css/bulma.css';

这样就把 Bulma 集成到你的 Vue.js 程序中了。

安装并集成 Foundation

Foundation 是一个优秀的 CSS 框架。它有两个框架：一个用于电子邮件，一个用于网站。我们需要的是 Foundation Sites 框架，因为我们只关心在 Web 中使用 Foundation。

安装 Foundation Sites 并将其导入到你的 main.js 文件中：

$ npm install foundation-sites --save

将其导入到你的 main.js 文件中：

/* main.js */
import './../node_modules/foundation-sites/dist/css/foundation.min.css';
import './../node_modules/foundation-sites/dist/js/foundation.min.js';

在 Vue中 的最佳做法

以上这三个框架非常类似：它们都基于行和列来创建“网格”的，你可以用它来创建用户界面。通过网格，你只需添加或更改附加到元素的类，就能轻松地基于设备宽度更改列的宽度。

注意： 下面的例子用的是 Bootstrap4。但是这种基于行列框架的做法适用于所有的 CSS 框架。

最好尽可能使用框架的类。为了易于使用，这些框架中都经过精心的设计，可以进行扩展和自定义。与其使用自己的类创建自己的按钮，不如用 Bootstrap、Bulma 或 Foundation 来做同样的事。

<!-- Bootstrap -->
<button class="btn btn-primary btn-lg">Bootstrap 大按钮</button>

<!-- Bulma -->
<button class="button is-primary is-large">Bulma 大按钮</button>

你可以配置每种颜色，以便 btn-primary (Bootstrap) 或 is-primary (Bulma) 引用你自己样式的颜色，而不是用 Bootstrap 和 Bulma 附带的默认颜色。

如果你需要使用自己的样式来创建自己的主题，可以创建一个覆盖框架全局样式的全局样式表；因为我们并不想直接修改框架。

创建自己的样式

如果想要创建自己的 CSS 主题，需要先创建一个新的 CSS 文件，并将其放在 assets 目录中，然后将其导入到  App.vue

/* App.vue */
import '@/assets/styles.css';
...

Vue의 main.js 파일에 부트스트랩 종속성을 추가해야 전체 프로그램에서 전역적으로 사용할 수 있습니다.

/* styles.css */
/* Buttons
--------------------------- */
.btn-primary   { background: #00462e; color: #fff; } /* dark green */
.btn-secondary { background: #a1b11a; color: #fff; } /* light green */
.btn-tertiary  { background: #00b2e2; color: #fff; } /* blue */
.btn-cta       { background: #f7931d; color: #fff; } /* orange */

/* Forms
--------------------------- */
.form-control {
  border-radius: 2px;
  border: 1px solid #ccc;
}

.form-control:focus,
.form-control:active {
  outline: none;
  box-shadow: none;
  background: #ccc;
  border: 1px solid #000;
}

애플리케이션 빌드에 실패하면 popper.js 종속성을 설치해야 합니다. 그 이후에는 오류가 없어야 합니다.

<!--Navigation.vue-->
<template>
  <p class="row">
    <p class="col">
      <nav>
        <ul>
          <li><a href="#">Navigation Item #1</a></li>
          <li><a href="#">Navigation Item #2</a></li>
          <li><a href="#">Navigation Item #3</a></li>
        </ul>
      </nav>
    </p>
  </p>
</template/>

이렇게 하면 Bootstrap 4가 Vue에 통합됩니다.

Bulma 설치 및 통합

Bulma는 Flexbox를 기반으로 하는 가볍고 유연한 CSS 프레임워크입니다. GitHub에는 25,000개가 넘는 별이 있습니다.

Bootstrap과 달리 Bulma에는 CSS만 포함되어 있으며 jQuery 또는 JavaScript에 대한 종속성이 없습니다.

Bulma 설치:

<!--App.vue-->
<template>
  <p>
    ...
    <Navigation/>
  </p>
</template/>

Bulma를 다운로드한 후 main.js를 열고 가져옵니다.

<!--Navigation.vue-->
<template>
  <nav>
    <ul>
      <li><a href="#">Navigation Item #1</a></li>
      <li><a href="#">Navigation Item #2</a></li>
      <li><a href="#">Navigation Item #3</a></li>
    </ul>
  </nav>
</template/>

이렇게 하면 Bulma가 Vue.js 프로그램에 통합됩니다.

Foundation 설치 및 통합

Foundation은 뛰어난 CSS 프레임워크입니다. 여기에는 두 개의 프레임이 있습니다. 하나는 이메일용이고 다른 하나는 웹사이트용입니다. 우리에게 필요한 것은

Foundation Sites

프레임워크입니다. 왜냐하면 우리는 웹에서 Foundation을 사용하는 것에만 관심이 있기 때문입니다. 🎜🎜Foundation Sites를 설치하고 main.js 파일로 가져오기: 🎜

<!--App.vue-->
<template>
  ...
  <p class="row">
    <p class="col">
      <Navigation/>
    </p>
  </p>
</template/>

🎜 main.js 파일로 가져오기: 🎜rrreee🎜 🎜🎜Vue 모범 사례 🎜🎜🎜🎜위의 세 가지 프레임워크는 매우 유사합니다. 모두 행과 열을 기반으로 사용자 인터페이스를 만드는 데 사용할 수 있는 "그리드"를 만듭니다. 그리드를 사용하면 요소에 연결된 클래스를 추가하거나 변경하기만 하면 장치 너비에 따라 열 너비를 쉽게 변경할 수 있습니다. 🎜🎜🎜참고: 🎜 다음 예에서는 Bootstrap4를 사용합니다. 그러나 행 및 열 프레임워크를 기반으로 하는 이 접근 방식은 모든 CSS 프레임워크에 적용됩니다. 🎜🎜가능하면 프레임워크 클래스를 사용하는 것이 가장 좋습니다. 사용 편의성을 위해 이러한 프레임워크는 확장 및 사용자 정의가 가능하도록 세심하게 설계되었습니다. 자신만의 클래스로 버튼을 만드는 대신 Bootstrap, Bulma 또는 Foundation을 사용하여 동일한 작업을 수행할 수 있습니다. 🎜rrreee🎜Bootstrap을 사용하는 대신 btn-primary(Bootstrap) 또는 is-primary(Bulma)가 자신의 스타일에 맞는 색상을 참조하도록 각 색상을 구성할 수 있습니다. Bulma와 함께 배송되는 기본 색상. 🎜🎜자신만의 스타일을 사용하여 자신만의 테마를 만들어야 하는 경우 프레임워크를 직접 수정할 필요가 없기 때문에 프레임워크의 전역 스타일을 재정의하는 전역 스타일 시트를 만들 수 있습니다. 🎜🎜🎜🎜나만의 스타일 만들기🎜🎜🎜🎜나만의 CSS 테마를 만들고 싶다면 먼저 새 CSS 파일을 만들고 assets 디렉터리에 배치한 다음 가져와야 합니다. App.vue 파일로 이동합니다. 🎜rrreee🎜자신과 일치하는 일부 기본 스타일을 Bootstrap 구성 요소에 매핑해 보세요. 🎜rrreee🎜🎜🎜구성 요소 재사용성에 주의하세요🎜🎜🎜🎜Vue.js 구성 요소 재사용성에서 CSS 프레임워크를 사용할 때 염두에 두는 것이 중요합니다. 레이아웃 CSS를 구성 요소 자체와 혼합할 수 없습니다. 때로는 이 구성 요소를 재사용해야 할 수도 있고 때로는 다른 레이아웃이 필요할 수도 있습니다. 🎜🎜🎜나쁜 예🎜🎜rrreeerrreee🎜이 구성요소는 머리글과 바닥글 모두에 사용될 수 있습니다. 모양은 달라도 동일한 정보를 포함해야 합니다. 레이아웃 HTML을 삭제하고 상위 또는 기본 구성 요소로 이동해 보겠습니다. 🎜🎜🎜좋은 예🎜🎜rrreeerrreee🎜🎜🎜요약🎜🎜🎜🎜CSS 프레임워크를 사용하면 개발 작업이 더 쉬워집니다. 템플릿 코드를 일관되고 유지 관리 및 작성하기 쉽게 만듭니다. 처음부터 버튼을 만드는 등 일반적인 작업에 시간을 낭비하는 대신 프로그램의 기능과 전반적인 디자인에 집중할 수 있습니다. 🎜🎜Bootstrap, Bulma 및 Foundation은 일반적으로 사용되는 세 가지 프레임워크일 뿐이지만 이에 국한되지는 않습니다. Semantic UI 및 UI Kit와 같이 탐색할 수 있는 프레임워크도 많이 있습니다. 🎜

영어 원본 주소: https://www.digitalocean.com/community/tutorials/vuejs-css-frameworks-vuejs

저자: Dave Berning

관련 추천:

2020 프론트엔드 vue 인터뷰 질문 큰 요약(답변 포함)

vue 튜토리얼 추천: 2020년 최신 5개 vue.js 비디오 튜토리얼 선택

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 코스를 방문하세요! !

위 내용은 Vue에 CSS 프레임워크를 통합하는 방법은 무엇입니까? 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!