SoFunction
Updated on 2025-04-07

Vue's simple way to introduce public css files (recommended)

If you don't want to write css in a single file component like this:

<template>
 <div >
   <div class='nav-box'>
    <ul class='nav'>
      <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>
   </div>
   <router-view></router-view>
 </div>
</template>

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

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

You can write the css style externally and then introduce it through one of the following three methods:

1. Introduced in the entry js file, some public style files can be introduced here.

import Vue from 'vue'
import App from './App' // Introduce the App componentimport router from './router' /* Introduce routing configuration */
import axios from 'axios'
import '@/assets/css/'/*Introduce public style*/

2. Introduced in

&lt;!DOCTYPE html&gt;
&lt;html&gt;
 &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width,initial-scale=1.0"&gt;
  &lt;title&gt;y&lt;/title&gt;
  &lt;link rel="stylesheet" type="text/css" href="src/assets/css/" rel="external nofollow" &gt;/*Introduce public style*/
 &lt;/head&gt;
 &lt;body&gt;
  &lt;div &gt;&lt;/div&gt;
  &lt;!-- built files will be auto injected --&gt;
 &lt;/body&gt;
&lt;/html&gt;

3. Introduced, but there is a problem with this introduction, that is, there will be an extra empty place on the HEADH.

&lt;template&gt;
 &lt;div &gt;
   &lt;div class='nav-box'&gt;
    &lt;ul class='nav'&gt;
      &lt;li&gt;
       &lt;a href="#/" rel="external nofollow" rel="external nofollow" &gt;home&lt;/a&gt;
      &lt;/li&gt;
       &lt;li&gt;
       &lt;a href="#/odocument" rel="external nofollow" rel="external nofollow" &gt;document&lt;/a&gt;
      &lt;/li&gt;
       &lt;li&gt;
       &lt;a href="#/about" rel="external nofollow" rel="external nofollow" &gt;about&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
   &lt;/div&gt;
   &lt;router-view&gt;&lt;/router-view&gt;
 &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
 name: 'app'
}
&lt;/script&gt;

&lt;style&gt;
  @import './assets/css/'; /*Introduce public style*/
&lt;/style&gt;

The above simple method (recommended) for introducing public css files in vue is all the content I share with you. I hope you can give you a reference and I hope you can support me more.