공개 CSS 파일을 Vue에 도입하는 간단한 구현 방법
- 小云云원래의
- 2018-01-24 10:26:012185검색
이 기사는 주로 Vue에 공개 CSS 파일을 도입하는 간단한 방법(권장)을 공유합니다. 이는 좋은 참조 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다. 편집자를 따라가서 모두에게 도움이 되기를 바랍니다.
이렇게 단일 파일 구성 요소에 CSS를 작성하고 싶지 않은 경우:
<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>
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> <p id="app"></p> <!-- built files will be auto injected --> </body> </html>
3. app.vue에 도입하세요. 그런데 이 도입에는 문제가 있습니다. 즉, index.html의 HEADH에
<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>
가 비어 있다는 것입니다. 관련 권장사항:
PHP는 CSS 파일 공유에 웹사이트 사용자 비밀번호 저장을 구현합니다
jQuery에서 외부 CSS 파일을 로드하는 방법에 대한 자세한 설명
위 내용은 공개 CSS 파일을 Vue에 도입하는 간단한 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.