A simple implementation method for introducing public css files into vue-JS Tutorial-php.cn

A simple implementation method for introducing public css files into vue

小云云

Release： 2018-01-24 10:26:01

Original

2224 people have browsed it

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

Copy after login

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'/*引入公共样式*/

Copy after login

2. Introduce it into 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>

Copy after login

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

Copy after login

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!