Vue에서 CSS를 분리하는 방법

vue에서 CSS를 분리하는 방법: 먼저 vue 파일에 ""을 설정한 다음 마지막으로 해당하는 index.js 파일을 만듭니다. html, js 및 css 파일.

이 튜토리얼의 운영 환경: Windows 7 시스템, Vue 버전 2.9.6 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

추천 관련 글 : vue.js

일반적인 vue 파일 생성 및 참조에서는 html, css, js가 모두 함께 들어있어 이렇게 작성하면 편리하지만 페이지가 커지거나 있을 수 있습니다. 이 경우에는 컴포넌트를 사용하더라도 코드가 많아지는 경우가 있습니다. 간단히 말해서 검색이 프로그래밍에 도움이 되지 않으며, 크게 보면 이미지 최적화 성능에도 도움이 되지 않습니다. 코드에서 html, css, js를 분리하는 것이 좋은 선택입니다.

먼저 .vue 파일에서 다음을 설정합니다.

<template src="./record.html"></template>
<script src="./record.js"></script>
<style src="./record.scss"></style>

다음과 같이 새 index.js 파일을 만듭니다.

import record from './record.vue';
export default record;

해당 Record.html, Record.js, Record.scss 파일을 만듭니다. 그게 전부입니다. js의 경우:

// -- NAME --
const name = 'record';
// -- DATA --
const data = function () {
  return {
    
  };
};
// -- COMPUTED --
const computed = {
 
};
// -- COMPONENTS -- 
const components = {
}
// -- WATCH --
const watch = {
  
};
// -- METHODS --
const methods = { 
  
};
// -- HOOKS --
function mounted() {
}
// == EXPORT ==
export default {
  name: name,
  data: data,
  components: components,
  computed: computed,
  watch: watch,
  methods: methods,
  mounted: mounted
};

또 다른 방법을 직접 인용할 수 있습니다:

<template>
  <div>html</div>
</template>
<script src="./***.js"></script>
<style src="./***.css"></style>

다양한 형태가 있지만 기본 아이디어는 독립된 파일을 분리하고 로딩을 도입하는 것입니다

위 내용은 Vue에서 CSS를 분리하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!