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