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)文章
vue基于element-china-area-data插件實(shí)現(xiàn)省市區(qū)聯(lián)動(dòng)
省市區(qū)聯(lián)動(dòng)在日常開發(fā)中用的非常多，本文就介紹一下vue基于element-china-area-data插件實(shí)現(xiàn)省市區(qū)聯(lián)動(dòng)，具有一定的參考價(jià)值，感興趣的可以了解一下2022-04-04
Vue 使用iframe引用html頁(yè)面實(shí)現(xiàn)vue和html頁(yè)面方法的調(diào)用操作
這篇文章主要介紹了Vue 使用iframe引用html頁(yè)面實(shí)現(xiàn)vue和html頁(yè)面方法的調(diào)用操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
vue元素樣式實(shí)現(xiàn)動(dòng)態(tài)改變方法介紹
vue通過(guò)js動(dòng)態(tài)修改元素的樣式，如果是固定的幾個(gè)樣式，我常用的是綁定元素的calss,給不同的class寫好需要的樣式，js控制是否使用這個(gè)class2022-09-09
這篇文章主要介紹了Vue中的slot使用插槽分發(fā)內(nèi)容的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
Vue.js每天必學(xué)之內(nèi)部響應(yīng)式原理探究
Vue.js每天必學(xué)之內(nèi)部響應(yīng)式原理探究，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要給大家介紹了關(guān)于如何利用vue3開發(fā)一個(gè)打磚塊小游戲的相關(guān)資料,通過(guò)一個(gè)小游戲?qū)嵗梢钥焖倭私鈜ue3開發(fā)小游戲的流程,需要的朋友可以參考下2021-07-07
vue中實(shí)現(xiàn)移動(dòng)端的scroll滾動(dòng)方法
下面小編就為大家分享一篇vue中實(shí)現(xiàn)移動(dòng)端的scroll滾動(dòng)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
vue項(xiàng)目打包后提交到git上為什么沒有dist這個(gè)文件的解決方法
這篇文章主要介紹了vue項(xiàng)目打包后提交到git上為什么沒有dist這個(gè)文件的解決方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-09-09
vue打包通過(guò)image-webpack-loader插件對(duì)圖片壓縮優(yōu)化操作
這篇文章主要介紹了vue打包通過(guò)image-webpack-loader插件對(duì)圖片壓縮優(yōu)化操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
vue實(shí)現(xiàn)pdf文檔在線預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)pdf文檔在線預(yù)覽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11