Deux façons pour l'application Vue monopage de référencer des fichiers de style distincts

Cet article vous présentera comment référencer un fichier de style distinct dans une application Vue monopage. Cet article utilise les fichiers CSS comme exemple et vous présente de deux manières en détail. Les amis qui en ont besoin peuvent s'y référer.

Description du problème

Pour les fichiers .vue, il est également composé de trois parties : structure, comportement et style. attribut dans la partie style, c'est-à-dire La page actuelle est valide. Lorsqu'il y a beaucoup de styles dans la balise de style ou qu'il y a des duplications entre les fichiers .vue, on a toujours l'impression qu'elle n'a pas l'air assez soignée, vous devez donc introduire des éléments communs. styles. 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: &#39;<App/>&#39;,
 components: { App }
})

Méthode 2

Introduire des fichiers de style dans un certain .vue

<template>
  ...
</template>

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

Les dossiers sont organisés comme suit :

Applications dans le projet

Dans mon projet, les deux méthodes sont appliquées. Les styles publics sont référencés dans la première méthode, et les styles de chaque module du projet sont référencés dans la seconde méthode. Les modules contiennent tous un fichier de style, qui est utilisé. pour stocker les styles nécessaires dans ce module, pour le moment, vous devez être plus flexible, ou s'il y a relativement peu de styles, ou si seul un certain fichier vue l'utilisera, vous pouvez toujours écrire le style css directement dans la balise de style. du fichier .vue.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Implémentation de la fonction de cache keep-alive de vue

Collecte de l'url et du href de l'interview front-end questions, src

Utilisez beforeEach de vue-route pour implémenter la fonction de garde de navigation (vérifier la connexion avant le saut d'itinéraire)

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!