时间:2021-05-26
如果不想把css写在单文件组件里如这样:
<template> <div id="app"> <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>可以将css样式写在外部,再通过下面三种方法中的一种引入:
1、在入口js文件main.js中引入,一些公共的样式文件,可以在这里引入。
import Vue from 'vue'import App from './App' // 引入App这个组件import router from './router' import axios from 'axios'import '@/assets/css/reset.css'2、在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> <div id="app"></div> <!-- built files will be auto injected --> </body></html>3、在app.vue中引入,但是这样引入有一个问题,就是在index.html的HEADH上会多出一个空的
<template> <div id="app"> <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> @import './assets/css/reset.css'; </style>以上这篇vue 引入公共css文件的简单方法(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
我们在做Vue+webpack的时,难免会引入各种公共css样式文件,那么我们改如何引入呢?引入时会有那些坑呢?首先,引入公共样式时,我们在“main.js”里
学习Vue.js动画时,需要引入一个animate.css,如何全局引入外部文件呢?一.引入外部CSS样式文件1.在app.vue中下直接引入对应的路径使用@i
一、全局引入文件1、先定义共用组件common.vue//定义一些公共的属性和方法consthttpUrl='http://39.105.17.99:8080/
开发场景当使用Vue框架进行项目开发时,在vue.config.js中配置好了路径别名后,到其他页面引入组件、引入css、引入静态文件路径时,使用路径别名不会智
这两天学习了Vue.js,正好了解了如何引入外部文件的方法,而且很重要,所以,今天添加一点小笔记。例子中css文件采用bootstrap.css,js文件采用j