집 >웹 프론트엔드 >JS 튜토리얼 >Vue 단일 페이지 애플리케이션을 사용할 때 별도의 스타일 파일을 참조하는 방법

Vue 단일 페이지 애플리케이션을 사용할 때 별도의 스타일 파일을 참조하는 방법

php中世界最好的语言원래의: 2018-05-26 10:05:191617검색

이번에는 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!