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

이 글에서는 Vue 단일 페이지 애플리케이션에서 별도의 스타일 파일을 참조하는 방법을 소개합니다. 이 글에서는 CSS 파일을 예로 들어 두 가지 방법을 매우 자세하게 소개합니다. 필요한 친구는 참고할 수 있습니다.

문제 설명 .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 파일만 사용됩니다. 또는 .vue 파일의 스타일 태그에 직접 CSS 스타일을 작성할 수 있습니다. 위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

vue의 연결 유지 캐싱 기능 구현

프론트 엔드 인터뷰 질문 url, href, src

vue-route의 beforeEach를 사용하여 네비게이션 가드 구현(경로 점프) ) 사전인증 로그인) 기능

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