Comment séparer les CSS dans vue

Comment séparer les CSS dans vue : définissez d'abord "" dans le fichier vue puis créez un nouveau fichier index.js ; enfin créer Les fichiers html, js et css correspondants suffisent.

L'environnement d'exploitation de ce tutoriel : Système Windows 7, Vue version 2.9.6 Cette méthode convient à toutes les marques d'ordinateurs.

Articles connexes recommandés : vue.js

Dans la création et la référence normales de fichiers vue, html, css et js sont tous ensemble, bien qu'il soit facile à écrire. comme ça C'est pratique, mais lorsque la page est relativement volumineuse ou qu'il y a beaucoup de code, même si vous utilisez des composants, parfois le code est relativement volumineux, la recherche n'est pas propice à la programmation, et en termes de. performances d’optimisation des images. C'est un bon choix de séparer le html, le css et le js dans le code.

Tout d'abord, définissez ce qui suit dans le fichier .vue :

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

Créez un nouveau fichier index.js, comme suit :

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

Créez le record.html correspondant, enregistrez .js, Le fichier record.scss est suffisant. Prenons .js comme exemple :

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

Une autre méthode peut être citée directement :

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

Il existe différentes formes, mais l'idée de base est de fichiers indépendants séparés. Introduisez le chargement

.

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!