vue中引入路徑@的用法及說(shuō)明
引入路徑@的用法及說(shuō)明
Vue文件中引用路徑的介紹
1、路徑 ./
./當(dāng)前文件同級(jí)目錄
2、路徑 …/
…/當(dāng)前文件上一級(jí)目錄
3、@符號(hào)
@ 的作用是在你引入模塊時(shí)，可以使用 @ 代替 /src 目錄，避免易錯(cuò)的相對(duì)路徑。
Vue中使用
1. vue.config.js配置文件中使用
? chainWebpack(config) {
? ? config.resolve.alias
? ? ? .set('@', resolve('src'))
? ? ? .set('assets', resolve('src/assets'))
? ? ? .set('utils', resolve('src/utils'));
? },2. @代表src目錄
如：你在（src/views/pmp/setLarge/index.vue）文件中想引入（src/assets/setLarge.png）的圖片，正常情況下你需要（…/…/…/…/src/assets/setLarge.png）才能找到該圖片，但如果你配置了就可以這樣簡(jiǎn)寫（src/assets/setLarge.png）
vue項(xiàng)目路徑使用@的原因
@是webpack設(shè)置的路徑別名
在vue項(xiàng)目中我們會(huì)引入文件或者組件，在引用的時(shí)候會(huì)用@符號(hào)
因?yàn)檫@利用了到了webpack的 alias 別名
在build/webpack.base.conf.js中配置的別名：
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
}
默認(rèn)會(huì)有‘@’別名，指向src目錄，還可以添加自定義別名。
使用場(chǎng)景
1. js，也是最為常用的使用場(chǎng)景
2. css，在使用的時(shí)候需要加入~，并且不要寫成字符串
{
background: url(~@/static/img/order.jpg);
}
3. html，~ 可加可不加。
<img class="icon" src="@/static/phone.png" alt="綁定手機(jī)"> <img class="icon" src="~@/static/phone.png" alt="綁定手機(jī)">
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
dhtmlxGantt是一個(gè)強(qiáng)大的JavaScript Gantt圖表庫(kù),提供易于使用、高度可自定義的Gantt圖表組件,它支持多項(xiàng)任務(wù)和進(jìn)度條,以及多種列和行布局,可用于創(chuàng)建各種類型的時(shí)間線和計(jì)劃表,本文給大家介紹前端vue實(shí)現(xiàn)甘特圖的相關(guān)知識(shí),感興趣的朋友跟隨小編一起看看吧2024-04-04
這篇文章主要介紹了vue中多附件上傳的實(shí)現(xiàn)示例，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-04-04
axios進(jìn)階實(shí)踐之利用最優(yōu)雅的方式寫ajax請(qǐng)求
之前給大家介紹了jQuery利用最優(yōu)雅的方式寫ajax請(qǐng)求的相關(guān)內(nèi)容，這篇文章主要給大家介紹了關(guān)于axios進(jìn)階實(shí)踐之利用最優(yōu)雅的方式寫ajax請(qǐng)求的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-12-12
這篇文章主要介紹了Vue.js之組件系統(tǒng),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05
vuejs2.0實(shí)現(xiàn)一個(gè)簡(jiǎn)單的分頁(yè)示例
本篇文章主要介紹了vuejs2.0實(shí)現(xiàn)一個(gè)簡(jiǎn)單的分頁(yè)示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-02-02
data屬性是Vue實(shí)例的數(shù)據(jù)對(duì)象,可以綁定的是對(duì)象或者是函數(shù),下面這篇文章主要給大家介紹了關(guān)于VUE中data配置項(xiàng)詳細(xì)解析的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
vue-router判斷頁(yè)面未登錄自動(dòng)跳轉(zhuǎn)到登錄頁(yè)的方法示例
這篇文章主要介紹了vue-router判斷頁(yè)面未登錄自動(dòng)跳轉(zhuǎn)到登錄頁(yè)的方法示例,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2018-11-11
在Vue項(xiàng)目中,防止頁(yè)面被縮放和放大示例
今天小編就為大家分享一篇在Vue項(xiàng)目中,防止頁(yè)面被縮放和放大示例，具有很好的參考 價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2019-10-10
vue中element-ui不能修改el-input框,或是不能修改某些值問題
這篇文章主要介紹了vue中element-ui不能修改el-input框,或是不能修改某些值問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
VueTreeselect?參數(shù)options的數(shù)據(jù)轉(zhuǎn)換-參數(shù)normalizer解析
這篇文章主要介紹了VueTreeselect?參數(shù)options的數(shù)據(jù)轉(zhuǎn)換-參數(shù)normalizer解析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07