Vue 단일 페이지 참조 스타일 파일 방법 요약

이번에는 Vue에서 단일 페이지에서 스타일 파일을 참조하는 방법에 대해 요약해 보겠습니다. Vue에서 단일 페이지에서 스타일 파일을 참조할 때 주의 사항은 무엇입니까?

문제 설명

.vue 파일의 경우에도 구조, 동작, 스타일의 세 부분으로 구성됩니다. 스타일 부분에 범위 속성이 있는데, 이는 현재 페이지가 유효하다는 의미입니다. 스타일 태그의 스타일을 비교하는 경우가 많거나, .vue 파일 간에 중복이 있는 경우 항상 깔끔해 보이지 않는 것처럼 느껴지므로 몇 가지 공통 스타일을 도입해야 합니다. 먼저 별도의 스타일 파일을 도입하는 방법에 대해 이야기하겠습니다. 여기서는 CSS 파일을 예로 들어 보겠습니다. 그런 다음 내 프로젝트의 스타일 파일 구분에 대해 이야기하겠습니다

별도의 스타일 파일 소개

방법 1

main.js에 정적 리소스를 도입하는 방법입니다. 프로젝트의 구성 요소에서 스타일 파일을 공유하게 만드는 방법

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'
// 此处引入静态资源
require('./assets/css/style.css')
/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 template: '<App/>',
 components: { App }
})

방법 2

스타일 파일을 특정 .vue

<template>
  ...
</template>
<script>
  export default {
    name: "test"
  }
</script>
<style scoped>
 @import "style.css";
</style>

파일 구성 형식은 다음과 같습니다.

프로젝트 적용

내 프로젝트에서는 이 두 가지 방법을 적용했는데, 프로젝트의 각 모듈에 대한 스타일은 두 번째 방법을 사용하는 것입니다. 모듈에는 이 모듈에 필요한 스타일을 저장하는 스타일 파일이 포함되어 있습니다. 스타일이 상대적으로 적거나 특정 vue 파일만 사용하는 경우에도 CSS 스타일을 직접 작성할 수 있습니다. .vue 파일의 스타일 태그에 있습니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

vue 구성 요소 캐시 사용

JS를 사용하여 바인딩을 동적으로 로드하는 방법

위 내용은 Vue 단일 페이지 참조 스타일 파일 방법 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!