問(wèn)題描述

對(duì)于.vue的文件來(lái)說(shuō)，也是由結(jié)構(gòu)、行為、樣式三部分組成，在樣式部分有個(gè)scoped的屬性，也就是當(dāng)前頁(yè)面有效，當(dāng)style標(biāo)簽內(nèi)樣式比較多時(shí)或者.vue文件之間有重復(fù)的時(shí)候，總感覺看起來(lái)不夠整潔，所以就需要引入一些公共樣式。下面就先說(shuō)下如何引入單獨(dú)的樣式文件，這里就以CSS文件為例，之后再說(shuō)下我的項(xiàng)目中的樣式文件的劃分

引入單獨(dú)的樣式文件

方式一

在main.js中引入靜態(tài)資源，這種方法使得該樣式文件被項(xiàng)目中的組件所共享

// 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'// 此處引入靜態(tài)資源require('./assets/css/style.css')/* eslint-disable no-new */new Vue({ el: '#app', router, template: '<App/>', components: { App }})

方式二

在某個(gè).vue引入樣式文件

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

文件組織形式如下：

項(xiàng)目中的應(yīng)用

在我的項(xiàng)目中，這兩個(gè)方式都是應(yīng)用到的，公共的樣式采用第一種方式引用，對(duì)于項(xiàng)目中的每一個(gè)模塊的樣式是采用第二種方式的，在每個(gè)模塊中都是含有一個(gè)樣式文件的，用來(lái)存放這個(gè)模塊中需要的樣式，這個(gè)時(shí)候就需要靈活一些了，如果樣式比較少，或者只是某一個(gè)vue文件會(huì)用到，還是可以將css樣式直接寫在.vue文件的style標(biāo)簽中。

總結(jié)

以上所述是小編給大家介紹的Vue單頁(yè)應(yīng)用引用單獨(dú)的樣式文件的兩種方式 ，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！