Home > Article > Web Front-end > 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 id="app"> <p 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> </p> <router-view></router-view> </p> </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. 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
<!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. 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='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> </p> <router-view></router-view> </p> </template> <script> export default { name: 'app' } </script> <style> @import './assets/css/reset.css'; /*引入公共样式*/ </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!