Maison > interface Web > js tutoriel > le corps du texte

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

亚连
Libérer: 2018-05-28 10:32:45
original
1413 Les gens l'ont consulté

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 }
})
Copier après la connexion

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>
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal