Vue シングルページ アプリケーションを使用するときに個別のスタイル ファイルを参照する方法

今回は、Vue の単一ページ アプリケーションを使用する際に、個別のスタイル ファイルを参照する方法を紹介します。Vue の単一ページ アプリケーションを使用して、個別のスタイル ファイルを参照する場合の 注意事項は何ですか?一見。

問題の説明 .vue ファイルの場合、構造、

動作

、スタイルの 3 つの部分からも構成されます。スタイル部分にはスコープ付き属性があり、現在のページが有効であることを意味します。 . style タグが内側にある場合 スタイルが多かったり、.vue ファイル間に重複があったりすると、常に見た目が十分に整っていないように感じられるため、いくつかの共通のスタイルを導入する必要があります。まず、個別のスタイル ファイルを導入する方法について説明します。ここでは CSS ファイルを例に挙げて、プロジェクト内のスタイル ファイルの分割について説明します

方法 1。 静的リソースを main.js に導入する この方法は、プロジェクト内のコンポーネントで共有されるスタイル ファイルを作成します

// 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></app>',
 components: { App }
})

方法 2

特定の .vue にスタイル ファイルを導入します

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

ファイル構成形式は次のとおりです。

プロジェクト内のアプリケーション

私のプロジェクトでは、これら 2 つのメソッドが最初のメソッドで参照され、プロジェクト内の各モジュールのスタイルはそれぞれ 2 番目のメソッドを使用します。モジュールには、このモジュールに必要なスタイルを保存するためのスタイル ファイルが含まれています。このとき、スタイルの数が比較的少ない場合、または特定の vue ファイルのみを使用する場合でも、CSS スタイルを直接記述することができます。 .vue ファイルの style タグ内。

この記事の事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨書籍:

Angular5 が RxJS を 5.5.3 にアップグレードする際のエラー問題を解決する方法

webpack を使用した自動更新と解析手順の詳細な説明

以上がVue シングルページ アプリケーションを使用するときに個別のスタイル ファイルを参照する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。