recherche

Maison  >  Article  >  interface Web  >  Une méthode d'implémentation simple pour introduire des fichiers CSS publics dans vue

Une méthode d'implémentation simple pour introduire des fichiers CSS publics dans vue

小云云
小云云original
2018-01-24 10:26:012206parcourir

Cet article partage principalement avec vous une méthode simple (recommandée) pour introduire des fichiers CSS publics dans Vue. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Si vous ne souhaitez pas écrire le CSS dans un seul composant de fichier comme celui-ci : 

<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: 'app'
}
</script>

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

Vous pouvez écrire le style CSS en externe et l'introduire via l'un des suivant trois méthodes :

1. Introduisez-le dans le fichier js d'entrée main.js. Certains fichiers de style public peuvent être introduits ici. 

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

2. Introduisez 

<!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>

dans index.html 3. Introduisez-le dans app.vue, mais il y a un problème avec cette introduction, c'est-à-dire sur la HEADH de index.html Il y en aura un autre vide 

<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: 'app'
}
</script>

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

Recommandations associées :

PHP implémente l'enregistrement des mots de passe des utilisateurs de sites Web dans le partage de fichiers CSS

Vider automatiquement le cache des fichiers js et css

Explication détaillée de la façon de charger des fichiers CSS externes dans jQuery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

php jquery css html JS
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée de l'instance de méthode publique ajax de VueArticle suivant：Explication détaillée de l'instance de méthode publique ajax de Vue

Articles Liés

Voir plus