Vue シングルページ アプリケーションが個別のスタイル ファイルを参照する 2 つの方法

この記事では、Vue のシングルページ アプリケーションで個別のスタイル ファイルを参照する方法を紹介します。CSS ファイルを例として、必要な方は 2 つの方法を詳しく説明します。

問題の説明 .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: &#39;<App/>&#39;,
 components: { App }
})

方法 2

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

<template>
  ...
</template>

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

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

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

私のプロジェクトでは、両方のメソッドが適用され、プロジェクトの最初のメソッドでパブリックスタイルが参照されます。モジュール内のモジュールは 2 番目の方法を採用します。この時点で、スタイルが比較的少ない場合、または特定の vue ファイルのみを使用する場合は、より柔軟にする必要があります。または、.vue ファイルの style タグに CSS スタイルを直接記述することもできます。

上記をあなたのためにまとめました。将来お役に立てば幸いです。 関連記事:

vueのキープアライブキャッシュ機能の実装

フロントエンド面接の質問url、href、srcを収集

vue-routeのbeforeEachを利用してナビゲーションガード(ルートジャンプ)を実装) 事前認証ログイン) 機能

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