¿Cómo hacer referencia a archivos de estilo personal cuando se utiliza la aplicación de una sola página Vue?

Lo que les traeré esta vez es cómo hacer referencia a un archivo de estilo único cuando se usa la aplicación de una sola página de Vue y a qué prestar atención cuando se usa la aplicación de una sola página de Vue para hacer referencia a un archivo de estilo único. A continuación se muestra un caso práctico. vamos a ver.

Descripción del problema

Porque. vue, también consta de tres partes: estructura, comportamiento y estilo. En la sección de estilos, hay un atributo de alcance, que es válido para la página actual. Cuando hay muchos estilos en la etiqueta de estilo o. El archivo vue siempre se siente desordenado, por lo que es necesario introducir algunos estilos comunes. Permítanme hablar primero sobre cómo introducir un archivo de estilo separado, tomando archivos CSS como ejemplo, y luego hablar sobre la división de los archivos de estilo en mi proyecto.

Introduzca un archivo de estilo separado

Modo 1

Al introducir recursos estáticos en main.js, el archivo de estilo es compartido por los componentes del proyecto.

//La compilación de Vue que se cargará con el comando "importar"

//(solo en tiempo de ejecución o independiente) se ha configurado con un alias en webpack.base.conf.

Importar Vue desde 'vue'

Importar aplicación desde '. /App '

Importar enrutador desde '. /router'

Importar ElementUI desde 'element-ui'

Importar 'element-ui/lib/theme-chalk/index.CSS'

Desde " axios" import axios

//Aquí presentamos recursos estáticos.

require('./assets/css/style.css ')

/* eslint-disable no-new */

new Vue({

El: '#app',

Enrutador,

Plantilla: '<app/>',

Componente: { Aplicación }

}) Modo 2

Introducir un archivo de estilo en .vue

& lttemplate>

.. .

</template>

<script>

Exportar valor predeterminado {

Nombre: "prueba"

}

& lt/script>

& ltstyle alcance>

@import "style . CSS"

& lt/style & gt;

Aplicación en proyectos

En mi proyecto se aplican estos dos métodos. El primer método se refiere al estilo público y el segundo método se refiere al estilo de cada módulo del proyecto. Cada módulo contiene un archivo de estilo para almacenar los estilos necesarios en el módulo. Si rara vez o solo usa un archivo vue, el estilo CSS aún se puede escribir directamente en el archivo vue. Al leer este caso, domina el método. Preste atención a otros artículos relacionados en Gxl.

Lectura recomendada:

Cómo resolver el problema de error al actualizar RxJS de Angular5 a 5.5. .3?

Descripción detallada de los pasos de análisis y actualización automática mediante webpack