Vue單頁應用引用單獨的樣式檔案的兩種方式

問題描述

對於.vue的檔案來說，也是由結構、行為、樣式三部分組成，在樣式部分有個scoped的屬性，也就是當前頁面有效，當style標籤內樣式比較多時或者.vue檔案之間有重複的時候，總感覺看起來不夠整潔，所以就需要引入一些公共樣式。下面就先說下如何引入單獨的樣式檔案，這裡就以css檔案為例，之後再說下我的專案中的樣式檔案的劃分

引入單獨的樣式文vnbkbal件

方式一在main.js中引入靜態資源，這種方法使得該樣式檔案被專案中的元件所共享

// the vue build version to load with the `import`vnbkbal 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.cs程式設計客棧s')

/* eslint-disable no-new */

new vue(

})方式二

在某個.vue引入樣式檔案

...檔案組織形式如下：

專案中的應用

在我的專案中，這兩個方式都是應用到的，公共的樣式採用第一種方式引用，對於專案中的每乙個模組的樣式是採用第二種方式的，在每個模組中都是含有乙個樣式檔案的，用來程式設計客棧存放這個模組中需要的樣式，這個時候就需要靈活一些了，如果樣式比較少，或者只是某乙個vue檔案會用到，還是可以將css樣式直接寫在.vue檔案的style標籤中。

總結本文標題: vue單頁應用引用單獨的樣式檔案的兩種方式

本文位址:

Vue 單頁應用的首屏優化

對於單頁應用，要在乙個頁面上為使用者提供產品的所有功能，在這個頁面載入的時候，首先要載入大量的靜態資源，這個載入時間相對比較長。所以我們需要做一些相應的優化，減少響應時間，盡快把首屏顯示出來。1 壓縮 無論是否為單頁應用，的壓縮都是要做的。對於vue cli生成的專案，在webpack配置檔案中使用...

vue單頁應用頁面快取方案

首先我想到的是方案a 方案一 vue的keep alive元件 具體使用如下 這樣所有的頁面都會進行快取。包裹動態元件時，會快取不活動的元件例項，而不是銷毀它們。和 相似，是乙個抽象元件 它自身不會渲染乙個 dom 元素，也不會出現在父元件鏈中。當元件在 內被切換，它的 activated 和 de...

vue router 建立 vue 單頁應用示例

1 doctype html 2 html lang en 3 head 4 meta charset utf 8 5 title title title 6 link rel stylesheet href css style.css 7 script src js vue.min.js scri...