vue項(xiàng)目中路徑使用@和~的區(qū)別及說(shuō)明
vue路徑使用@和~的區(qū)別
首先：@和~ 都是在路徑訪問(wèn)時(shí)使用的。
1. @ 使用說(shuō)明
@這是webpack設(shè)置的路徑別名。
在build/webpack.base.conf這個(gè)文件里面定義。
vue項(xiàng)目中默認(rèn)定義了@（最常用）和vue$兩個(gè)別名，如果需要，可以自己添加。
默認(rèn)定義：@這東西代表著到src這個(gè)文件夾的路徑
自己添加：
2. ~ 使用說(shuō)明
~ 是 stylus-loader 的東西，參考 https://github.com/shama/stylus-loader（但是好像不引入這個(gè)庫(kù)，也可以用~）
~是相對(duì)于其他路徑（文件）的，類(lèi)似于相對(duì)路徑
示例：
~@/assets/scss/_variables.scss ==>>表示相對(duì)于@（別名，一般是src目錄）下的 assets/scss/_variables.scss；
注意：~@/assets/scss/_variables.scss 給人的感覺(jué)就是 src下面的 assets/scss/_variables.scss; 但是如果在這樣去引入樣式，會(huì)報(bào)錯(cuò)。
@和~@符號(hào)路徑解決
@和~@的用處不同，前者用于js文件路徑，后者用于css文件路徑
@路徑別名的學(xué)習(xí)
@代表項(xiàng)目的src路徑，是vue-cli給我們提供的，解決路徑比較長(zhǎng)，找文件比較麻煩的問(wèn)題
證明@是src并且是vue-cli通過(guò)webpack設(shè)置的,通過(guò)審查項(xiàng)目的 webpack 配置
通過(guò)命令vue inspect > output.js
如果讓編輯器支持@
方式1-去百度搜索vscode當(dāng)中使用@
方式2-去最好的半成品復(fù)制配置
復(fù)制jsconfig.json
~@路徑的解決
~@路徑和js當(dāng)中@類(lèi)似,當(dāng)時(shí)這里要依靠擴(kuò)展來(lái)解決問(wèn)題
(1)安裝擴(kuò)展Path Autocomplete
(2)在vscode配置中添加下面設(shè)置
? ? "path-autocomplete.extensionOnImport": true,
? ? "path-autocomplete.pathMappings": {
? ? ? ? "@": "${workspace}/src",
? ? ? ? "~@": "${workspace}/src"
? ? },總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue.js實(shí)現(xiàn)微信過(guò)渡動(dòng)畫(huà)左右切換效果
這篇文章主要給大家介紹了利用Vue.js仿微信過(guò)渡動(dòng)畫(huà)左右切換效果的相關(guān)資料，需要用到的技術(shù)棧是Vue+Vuex。文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家具一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-06-06
vue中for循環(huán)更改數(shù)據(jù)的實(shí)例代碼(數(shù)據(jù)變化但頁(yè)面數(shù)據(jù)未變）
這篇文章主要介紹了vue中for循環(huán)更改數(shù)據(jù)的實(shí)例代碼(數(shù)據(jù)變化但頁(yè)面數(shù)據(jù)未變）的相關(guān)資料,需要的朋友可以參考下2017-09-09
這篇文章主要介紹了在vue-cli3中使用axios獲取本地json操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
vue 中基于html5 drag drap的拖放效果案例分析
本文通過(guò)三個(gè)案例給大家介紹了vue 中基于html5 drag drap的拖放效果 ,需要的朋友可以參考下2018-11-11
vue 實(shí)現(xiàn)強(qiáng)制類(lèi)型轉(zhuǎn)換 數(shù)字類(lèi)型轉(zhuǎn)為字符串
今天小編就為大家分享一篇vue 實(shí)現(xiàn)強(qiáng)制類(lèi)型轉(zhuǎn)換 數(shù)字類(lèi)型轉(zhuǎn)為字符串，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
這篇文章主要介紹了vue中的總線機(jī)制(EventBus)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue引入高德地圖并觸發(fā)實(shí)現(xiàn)多個(gè)標(biāo)點(diǎn)的示例詳解
這篇文章主要介紹了Vue引入高德地圖并觸發(fā)實(shí)現(xiàn)多個(gè)標(biāo)點(diǎn),主要是在public下的index.html中引入地圖，引入組件設(shè)置寬高100%，本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-05-05
vue中點(diǎn)擊按鈕下載文件的實(shí)現(xiàn)方式
這篇文章主要介紹了vue中點(diǎn)擊按鈕下載文件的實(shí)現(xiàn)方式,具有很的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
前端插件庫(kù)之vue3使用vue-codemirror插件的步驟和實(shí)例
CodeMirror是一款基于JavaScript、面向語(yǔ)言的前端代碼編輯器,下面這篇文章主要給大家介紹了關(guān)于前端插件庫(kù)之vue3使用vue-codemirror插件的步驟和實(shí)例,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
vue3.0如何使用computed來(lái)獲取vuex里數(shù)據(jù)
這篇文章主要介紹了vue3.0如何使用computed來(lái)獲取vuex里數(shù)據(jù)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04