vue-pc パフォーマンスの最適化 - css スタイルのコード抽出

序文

• vueページにhtml、css、jsを書くとコードが頭を悩ませますが、実はcssコードも抜き出せます。

• src/assets ファイルの下に新しいスタイル ファイルを作成し、そのスタイル ファイルをここに配置して、vue ファイルにインポートできます。

• このようにコードを抽出した後は、コードをローカルで実行する場合でも、オンラインでテストする場合でも、パッケージが既に入力されているため、問題はありません。

実装手順 - 例として、dashboard.vue を取り上げます。

新しいフォルダーは src/assets/style/dashboard/dashboard.scss ファイルにあります

ホームページのスタイルをコピーする

ホームページでスタイルファイルを紹介

<style lang="scss" scoped>
@import '~@/assets/style/dashboard/dashboard.scss';
</style>

な

詳細

1.スタイルファイルにスタイルファイルを入れる場合は、構造が一目でわかるように、別のモジュールフォルダー（つまり、もう1つのディレクトリ）を作成することをお勧めします。

2. .vue ファイルをインポートするときは、~@/ を使用するのが最善です。そうしないと、スタイルが出ない可能性があります。

要約:

このプロセスの後、vue-pc 側での css スタイル コードの抽出についても予備的な深い印象を持っていると思いますが、実際の開発で遭遇する状況は異なるはずですので、その原理を理解する必要があります。オリジナルと切り離せない。さあ、労働者を攻撃してください！

不備があれば指摘してください、ありがとうございます -- Fengguowuhen