問題描述
因為。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文件，仍然可以直接在. vue中編寫css樣式。
相信看完這個案例，妳已經掌握了方法。更多精彩請關註Gxl上其他相關文章！
推薦閱讀:
如何解決RxJS從Angular5升級到5.5.3的錯誤問題？
使用webpack的自動刷新和解析步驟的詳細描述