집 >웹 프론트엔드 >JS 튜토리얼 >Vue를 통해 공개 CSS 파일을 소개하는 방법

Vue를 통해 공개 CSS 파일을 소개하는 방법

亚连원래의: 2018-06-11 14:07:553120검색

이제 Vue에 공개 CSS 파일을 도입하는 간단한 방법(권장)을 공유하겠습니다. 이는 좋은 참조 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

다음과 같이 단일 파일 구성 요소에 CSS를 작성하고 싶지 않은 경우:

<template>
 <p id="app">
   <p class=&#39;nav-box&#39;>
    <ul class=&#39;nav&#39;>
      <li>
       <a href="#/" rel="external nofollow" rel="external nofollow" >home</a>
      </li>
       <li>
       <a href="#/odocument" rel="external nofollow" rel="external nofollow" >document</a>
      </li>
       <li>
       <a href="#/about" rel="external nofollow" rel="external nofollow" >about</a>
      </li>
    </ul>
   </p>
   <router-view></router-view>
 </p>
</template>

<script>
export default {
 name: &#39;app&#39;
}
</script>

<style>
#app{
   text-align:center;
   color:#2c3e50;
   margin-top:60px;
}
</style>

CSS 스타일을 외부에서 작성한 후 다음 세 가지 방법 중 하나를 통해 도입할 수 있습니다.

1 js 파일 main.js 항목에 소개되어 있으며 일부 공개 스타일 파일이 여기에 소개될 수 있습니다.

import Vue from &#39;vue&#39;
import App from &#39;./App&#39; // 引入App这个组件
import router from &#39;./router&#39; /* 引入路由配置 */
import axios from &#39;axios&#39;
import &#39;@/assets/css/reset.css&#39;/*引入公共样式*/

2. index.html에 추가하세요.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>y</title>
  <link rel="stylesheet" type="text/css" href="src/assets/css/reset.css" rel="external nofollow" >/*引入公共样式*/
 </head>
 <body>
  <p id="app"></p>
  <!-- built files will be auto injected -->
 </body>
</html>

3. app.vue에 추가하세요. 그런데 이 소개에는 문제가 있습니다. 즉, HEADH에 비어 있는

이 추가됩니다. of index.html

<template>
 <p id="app">
   <p class=&#39;nav-box&#39;>
    <ul class=&#39;nav&#39;>
      <li>
       <a href="#/" rel="external nofollow" rel="external nofollow" >home</a>
      </li>
       <li>
       <a href="#/odocument" rel="external nofollow" rel="external nofollow" >document</a>
      </li>
       <li>
       <a href="#/about" rel="external nofollow" rel="external nofollow" >about</a>
      </li>
    </ul>
   </p>
   <router-view></router-view>
 </p>
</template>

<script>
export default {
 name: &#39;app&#39;
}
</script>

<style>
  @import &#39;./assets/css/reset.css&#39;; /*引入公共样式*/
</style>

위 내용은 제가 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

Vue를 통해 공개 CSS 파일을 소개하는 방법

관련 기사