A simple implementation method for introducing public css files into vue

This article mainly shares with you a simple method (recommended) for introducing public css files in vue. It has a good reference value and I hope it will be helpful to everyone. Let’s follow the editor to take a look, I hope it can help everyone.

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

<template>
 <p>
   </p>
<p>
    </p>
<ul>
      <li>
       <a>home</a>
      </li>
       <li>
       <a>document</a>
      </li>
       <li>
       <a>about</a>
      </li>
    </ul>
   
   <router-view></router-view>
 
</template>

<script>
export default {
 name: &#39;app&#39;
}
</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. Introduce it into the entry js file main.js. Some public style files can be introduced here.

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

2. Introduce it into index.html

nbsp;html>

 
  <meta>
  <meta>
  <title>y</title>
  <link>/*引入公共样式*/
 
 
  <p></p>
  <!-- built files will be auto injected -->
 

3. Introduce it into app.vue, but there is a problem with this introduction, that is, there will be one more HEADH in index.html Empty

<template>
 <p>
   </p>
<p>
    </p>
<ul>
      <li>
       <a>home</a>
      </li>
       <li>
       <a>document</a>
      </li>
       <li>
       <a>about</a>
      </li>
    </ul>
   
   <router-view></router-view>
 
</template>

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

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

Related recommendations:

PHP implements saving website user passwords to css file sharing

Automatically clean up js, Cache method of css files

Detailed explanation of how to load external css files in jQuery

The above is the detailed content of A simple implementation method for introducing public css files into vue. For more information, please follow other related articles on the PHP Chinese website!