이 글에서는 Vue 단일 페이지 애플리케이션에서 별도의 스타일 파일을 참조하는 방법을 소개합니다. 이 글에서는 CSS 파일을 예로 들어 두 가지 방법을 매우 자세하게 소개합니다. 필요한 친구는 참고할 수 있습니다.
문제 설명 .vue 파일의 경우에도 구조, 동작, 스타일의 세 부분으로 구성됩니다. 스타일 부분에 범위 속성이 있는데, 이는 현재 페이지가 유효하다는 의미입니다. 스타일 태그에 많은 스타일이 있거나 .vue 파일 사이에 스타일이 있습니다. 반복되면 항상 깔끔해 보이지 않는다는 느낌이 들기 때문에 몇 가지 일반적인 스타일을 도입해야 합니다. 먼저 별도의 스타일 파일을 도입하는 방법에 대해 이야기하겠습니다. 여기서는 CSS 파일을 예로 들어 보겠습니다. 그런 다음 내 프로젝트의 스타일 파일 구분에 대해 이야기하겠습니다
별도의 스타일 파일 소개
방법 1main.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 } })
스타일 파일을 특정 .vue
<template> ... </template> <script> export default { name: "test" } </script> <style scoped> @import "style.css"; </style>
파일 구성 형태는 다음과 같습니다.
프로젝트 내 응용 프로그램
내 프로젝트에서는 두 가지 방법을 모두 적용하고 있으며, 프로젝트의 경우 공용 스타일을 각각 참조하고 있습니다. 모듈의 모듈은 두 번째 방법을 채택합니다. 각 모듈에는 이 모듈에 필요한 스타일을 저장하는 스타일 파일이 포함되어 있습니다. 이때 스타일이 상대적으로 적거나 특정 vue 파일만 사용됩니다. 또는 .vue 파일의 스타일 태그에 직접 CSS 스타일을 작성할 수 있습니다. 위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.
관련 기사:
vue의 연결 유지 캐싱 기능 구현
vue-route의 beforeEach를 사용하여 네비게이션 가드 구현(경로 점프) ) 사전인증 로그인) 기능
위 내용은 Vue 단일 페이지 애플리케이션이 별도의 스타일 파일을 참조하는 두 가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!