Vue는 별도의 스타일 파일을 참조합니다.

이번에는 Vuereference별도 스타일 파일을 가져왔습니다. 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

위 내용은 Vue는 별도의 스타일 파일을 참조합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!