使用Vue单页应用时应该如何引用单独样式文件
这次给大家带来使用Vue单页应用时应该如何引用单独样式文件，使用Vue单页应用时引用单独样式文件的注意事项有哪些，下面就是实战案例，一起来看一下。
问题描述
对于.vue的文件来说，也是由结构、行为、样式三部分组成，在样式部分有个scoped的属性，也就是当前页面有效，当style标签内样式比较多时或者.vue文件之间有重复的时候，总感觉看起来不够整洁，所以就需要引入一些公共样式。下面就先说下如何引入单独的样式文件，这里就以CSS文件为例，之后再说下我的项目中的样式文件的划分
引入单独的样式文件
方式一
在main.js中引入静态资源，这种方法使得该样式文件被项目中的组件所共享
// 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'
// 此处引入静态资源
require('./assets/css/style.css')
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})方式二
在某个.vue引入样式文件
<template>
...
</template>
<script>
export default {
name: "test"
}
</script>
<style scoped>
@import "style.css";
</style>文件组织形式如下：
项目中的应用
在我的项目中，这两个方式都是应用到的，公共的样式采用第一种方式引用，对于项目中的每一个模块的样式是采用第二种方式的，在每个模块中都是含有一个样式文件的，用来存放这个模块中需要的样式，这个时候就需要灵活一些了，如果样式比较少，或者只是某一个vue文件会用到，还是可以将css样式直接写在.vue文件的style标签中。
相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
推荐阅读：
怎么解决Angular5升级RxJS到5.5.3报错问题
使用webpack自动刷新与解析步骤详解
绛旓細浣犳槸涓嶆槸璁や负锛屸滃紩鐢ㄢ濅細瀵艰嚧浠ｇ爜鍑虹幇涓ゆ锛烠缁勪欢鏄竴娈典唬鐮侊紝瀹冮氳繃export鏆撮湶鍑哄畠鐨勫彲鐢ㄩ儴鍒嗭紝浣犳墍鏈変唬鐮佸c缁勪欢鐨勫紩鐢ㄩ兘鏄皟鐢–缁勪欢鐨勫姛鑳借屽凡锛孋缁勪欢鍦ㄦ渶鍚庢墦鍖呯殑浠ｇ爜涓彧瀛樺湪鍦ㄤ竴澶勶紝鎵鏈夊c鐨勮皟鐢ㄩ兘浼氬湪閭ｉ噷杩愯銆傝繖鍜孋璇█鐨刬nclude锛孞ava鐨刬mport锛屼互鍙奀#鐨剈sing鏄竴鍥炰簨銆傛墍浠ヤ綘寮曠敤澶氬皯娆★紝c...
绛旓細杩樻湁灏辨槸瀹氫綅鍦ㄤ腑閮ㄦ垨搴曢儴鐨勮緭鍏ユ锛岀悊搴斿湪寮瑰嚭杞敭鐩樻椂鑷姩灏嗛敭鐩橀《涓婂幓鐨勶紝杩欎釜涔熷簲璇ョ敱绉诲姩绔紑鍙戦偅杈规潵鍋氱浉鍏宠缃3.鍗曢〉搴旂敤涓嶉噸杞介〉闈㈠鑷存棤娉曡皟鐢↖OS鐨勬煇浜涘洖璋冨嚱鏁 杩欎釜鏄湡鐨勫潙銆傚湪娴忚鍣ㄤ笂璺戦兘濂藉ソ鐨勶紝鍐呭祵杩沘pp鐨勬椂鍊鍙戠幇ios鎵撳紑椤甸潰鍚庝竴鐩存湁涓鏈靛皬鑿婅姳鍦╨oading锛屽敖绠℃暟鎹凡缁忓姞杞藉畬鎴愪簡銆
绛旓細鍓嶈█浼楁墍鍛ㄧ煡锛寁uex 鏄竴涓笓涓 vue.js 搴旂敤绋嬪簭寮鍙戠殑鐘舵佺鐞嗘ā寮忥紝鍦ㄦ瀯寤轰竴涓腑澶у瀷鍗曢〉搴旂敤涓浣跨敤vuex鍙互甯姪鎴戜滑鏇村ソ鍦板湪缁勪欢澶栭儴绠＄悊鐘舵併傝寁ue-cli鏄痸ue鐨勫畼鏂硅剼鎵嬫灦锛屽畠鑳藉府鍔╂垜浠柟渚跨殑閰嶇疆webpack銆傝繖鏍风湅鏉ワ紝鏈夊緢澶х殑鍙兘鎴戜滑闇瑕佸悓鏃朵娇鐢╲ue-cli涓巚uex濡備綍鍦╲ue-cli涓娇鐢╲uex椤圭洰鎼缓鍙...
绛旓細棣栭〉浣犲緱鐭ラ亾鈥鍗曢〉搴旂敤鈥濈畝绉扳淪PA鈥濊繖涓笢瑗挎槸浠涔堛傜劧鍚庝綘闇瑕佷簡瑙ｅ墠鍚庣鍒嗙鐨勫紑鍙戞ā寮忋備笅闈㈠洖绛斾綘鐨勯棶棰橈細vue-cli 鏄惌寤Vue SPA d 鑴氭墜鏋讹紝灏辨槸涓涓敓鎴愬伐绋嬫ā鏉跨殑宸ュ叿銆係PA鍙礋璐ｅ墠绔紝鎵鏈変笟鍔￠昏緫鐢卞悗绔礋璐ｅ鐞 鍓嶅悗绔氦浜掗氳繃鎺ュ彛锛圧EST锛夛紝ajax涔熷ソ锛宎xios涔熻锛岄兘鏄竴绉嶅伐鍏凤紝娌℃湁鍏蜂綋鐨...
绛旓細vue妗嗘灦涓姸鎬佺鐞嗐傚湪main.js寮曞叆store锛屾敞鍏ャ傛柊寤轰簡涓涓洰褰晄tore锛屸.. export 銆傚満鏅湁锛鍗曢〉搴旂敤涓紝缁勪欢涔嬮棿鐨勭姸鎬併傞煶涔愭挱鏀俱佺櫥褰曠姸鎬併佸姞鍏ヨ喘鐗╄溅
绛旓細Vue.js寰堢畝鍗曘傛鍥犱负濡傛绠鍗曪紝浜轰滑甯稿父璁や负鍏堕傚悎浜庡皬椤圭洰銆傝櫧鐒剁湡姝ｇ殑Vue.js鏍稿績鐭ヨ瘑鍙槸涓涓鍥惧眰搴擄紝瀹為檯涓婃湁涓缁勫伐鍏凤紝灏嗕娇鎮ㄨ兘澶浣跨敤Vue.js鏋勫缓瀹屾暣鐨勫ぇ瑙勬āSPA锛鍗曢〉搴旂敤绋嬪簭锛夈 SPA搴旂敤鍙互鍦ㄤ笉瀹屽叏閲嶆柊鍔犺浇缃戦〉锛屼骇鐢熶竴涓洿娴佺晠鐨勭敤鎴蜂綋楠屽埌鐨勭敤鎴蜂氦浜掑搷搴斻傝繕鏈夊ソ鐨勫壇浣滅敤锛孲PA杩橀紦鍔卞悗绔...
绛旓細鎮ㄥソ锛屾垜鎯虫偍闂殑涓瀹氭槸鍗曢〉搴旂敤鍋歋EO鐨勬妧鏈妧宸ц屼笉鏄悗缁帹骞 鍗曢〉搴旂敤锛圫PA锛夋槸鍒╃敤濡vue js銆乺eact js杩欎簺鍓嶇妗嗘灦鍋氬嚭鏉ョ殑鏃犲埛鏂拌烦杞殑涓涓狧TML鏂囦欢鐨勫簲鐢 铏界劧瀹冧紭鐐瑰緢澶氫絾瀵规悳绱㈠紩鎿庝笉鍙嬪ソ锛岃櫄鎷烡OM鏃犳硶鎶撳彇 鍥犳瑕侀噰鍙栫壒娈婃柟寮忓畬鎴怱EO鐨勬妧鏈敮鎸 鏈汉寮鍙戜簡涓涓函JS缃戠珯锛屽綋鏃朵负浜嗚В鍐充篃鏄垂浜嗗緢澶...
绛旓細Vue 鐢熸佺郴缁熸敮鎸佺殑搴撳紑鍙戠殑澶嶆潅鍗曢〉搴旂敤锛屽疄鐜癙C绔崟椤靛紡鐨勫墠绔紑鍙戙2銆丳C绔綉绔欏湪涓嶉渶瑕佷紭鍏堣冭檻SEO鍜岄灞忔覆鏌撴椂闂存椂锛屽崟椤靛紡鍦ㄧ敤鎴蜂綋楠屽拰寮鍙戜綋楠(寮鍙戞晥鐜)涓婃槸瀹岃儨澶氶〉寮忕殑銆3銆vue.js浣滀负涓绘祦妗嗘灦涔嬩竴锛屽悓鏍锋敮鎸丼SR锛寁ue.js鐨凱C绔綉绔欏紑鍙戞椂鏈嶅姟绔覆鏌撶紪璇戞瘮杈冩參锛浣跨敤鐢ㄥ崟椤靛紡鏁堢巼鏇撮珮銆
绛旓細閭ｄ箞杩欎釜b鐨勫煎氨鍜宎鎸傞挬,濮嬬粓绛変簬a鐨勫+1,淇敼a鐨勫鐨勬椂鍊涔熶細鍙 vue 鐨 ajax 搴撴帹鑽浣跨敤 vue-resource,涓鑸潪鍗曢〉搴旂敤鍦╮eady閲岃幏鍙栨暟鎹氨琛,濡傛灉鏄崟椤靛簲鐢ㄦ牴鎹矾鐢辩敓鍛藉懆鏈熸潵鑾峰彇,姣斿 route: { data: function (transition) { //鏁版嵁鑾峰彇,淇敼data transition.next() } } 涓婇潰鏄垜鏁寸悊缁欏ぇ瀹...
绛旓細鍙互浣跨敤绗笁鏂瑰紑鍙戝钩鍙版垨鏈湴寮鍙戝伐鍏凤紝姣斿appcan,涓闂ˋPP寮鍙戝埗浣滃钩鍙帮紝灏vue鐨勫墠绔洿鎺ュ湪绾挎墦鍖呰繘APK澹冲瓙閲岄潰銆備綘鍙互璇曚竴璇曚竴闂ˋPP寮鍙戝钩鍙帮紝鐩存帴涓婁紶鍓嶇椤甸潰HTML鏂囦欢鍦ㄧ嚎鎵撳寘鎴怉PK鎴栬匢PA鎴栬匛XE鎴栬匘MG
