使用Vue單頁應用時如何引用個人風格文件？

這次給大家帶來的是使用Vue的單頁應用時如何引用單個樣式文件，以及使用Vue的單頁應用時引用單個樣式文件有哪些註意事項。下面是壹個實際案例。讓我們來看看。

問題描述

因為。vue文件，它也是由三部分組成:結構、行為、風格。在樣式部分，有壹個作用域屬性，即當前頁面有效。當樣式標簽中有許多樣式或者。vue文件，總感覺不整潔，有必要介紹壹些公共樣式。先說如何引入壹個單獨的樣式文件，以CSS文件為例，然後說壹下我的項目中樣式文件的劃分。

引入壹個單獨的樣式文件

模式1

通過將靜態資源引入main.js，樣式文件由項目中的組件共享。

//要用“import”命令加載的Vue構建版本

//(僅運行時或獨立)已在webpack.base.conf中用別名設置。

從“vue”導入Vue

從'導入應用程序。/App '

從'導入路由器。/路由器'

從“element-ui”導入ElementUI

導入' element-ui/lib/theme-chalk/index . CSS '

從“axios”導入axios

//這裏介紹靜態資源。

要求('。/assets/css/style.css ')

/* eslint-禁用no-new */

新Vue({

埃爾:' #app '，

路由器，

模板:“& ltapp/>；',

組件:{ App }

})模式2

在. vue中引入壹個樣式文件。

& lt模板& gt

...

& lt/template & gt；

& lt腳本& gt

導出默認值{

名稱:“測試”

}

& lt/script & gt；

& lt樣式範圍& gt

@導入“style . CSS”；

& lt/style & gt；本文檔組織如下:

在項目中的應用

在我的項目中，應用了這兩種方法。第壹種方式引用公共樣式，第二種方式引用項目中每個模塊的樣式。每個模塊都包含壹個樣式文件，用於存儲該模塊中需要的樣式。這時候就需要靈活了。如果樣式很少或者只使用壹個vue文件，css樣式仍然可以直接寫在。vue文件。

相信看完這個案例，妳已經掌握了方法。更多精彩請關註Gxl上其他相關文章！