Vue 단일 페이지 애플리케이션에서 스타일 파일을 참조하는 방법

이번에는 Vue의 단일 페이지 애플리케이션이 스타일 파일을 어떻게 참조 참조하는지 보여드리겠습니다. Vue의 단일 페이지 애플리케이션에서 스타일 파일을 인용할 때 주의사항은 무엇인가요?

문제 설명

.vue 파일의 경우 구조, behavior 및 스타일의 세 부분으로 구성됩니다. 스타일 부분에 범위 속성이 있으며 이는 현재 페이지가 유효하다는 것을 의미합니다. 스타일 태그가 들어있는 경우 스타일이 많거나 .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 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

postman+json 및 springmvc가 일괄 추가를 구현하는 방법

jQuery 가시성 필터 사용에 대한 자세한 설명

Postman이 토큰 매개변수를 전송하는 방법

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