Comment référencer des fichiers de style distincts lors de l'utilisation de l'application Vue monopage

Cette fois, je vais vous montrer comment référencer un fichier de style distinct lors de l'utilisation d'une application Vue monopage. Quelles sont les précautions pour référencer un fichier de style distinct lors de l'utilisation d'un. Application Vue monopage ? Ce qui suit est un cas pratique, jetons un coup d'œil.

Description du problème

Pour les fichiers .vue, il se compose également de trois parties : la structure, le comportement et le style. . , il y a un attribut scoped dans la partie style, ce qui signifie que la page actuelle est valide. Lorsqu'il y a beaucoup de styles dans la balise de style ou qu'il y a des doublons entre les fichiers .vue, on a toujours l'impression que cela n'a pas l'air assez soigné, vous devez donc introduire des styles communs. Parlons d'abord de la façon d'introduire un fichier de style séparé. Ici, nous prenons les fichiers CSS comme exemple, puis parlons de la division des fichiers de style dans mon projet

Présentation de fichiers de style séparés

Méthode 1

Introduire des ressources statiques dans main.js Cette méthode permet au fichier de style d'être partagé par les composants du projet

.

// 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 }
})

Méthode 2

Introduire les fichiers de style dans un certain .vue

<template>
  ...
</template>
<script>
  export default {
    name: "test"
  }
</script>
<style scoped>
 @import "style.css";
</style>

Le format d'organisation des fichiers est le suivant :

Application dans le projet

Dans mon projet, ces deux méthodes sont appliquées, et le style public est adopté La première méthode est utilisé pour référencer le style de chaque module du projet. La deuxième méthode est utilisée. Chaque module contient un fichier de style pour stocker les styles nécessaires à ce moment. C'est plus flexible. peu de styles, ou seul un certain fichier vue l'utilisera, vous pouvez toujours écrire le style css directement dans la balise style du fichier .vue.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment résoudre le problème d'erreur lorsque Angular5 met à niveau RxJS vers 5.5.3

Utilisez Webpack pour actualiser et analyser automatiquement Explication détaillée des étapes

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!