vue項(xiàng)目中路徑使用@和~的區(qū)別及說明
vue路徑使用@和~的區(qū)別
首先：@和~ 都是在路徑訪問時(shí)使用的。
1. @ 使用說明
@這是webpack設(shè)置的路徑別名。
在build/webpack.base.conf這個(gè)文件里面定義。
vue項(xiàng)目中默認(rèn)定義了@（最常用）和vue$兩個(gè)別名，如果需要，可以自己添加。
默認(rèn)定義：@這東西代表著到src這個(gè)文件夾的路徑
自己添加：
2. ~ 使用說明
~ 是 stylus-loader 的東西，參考 https://github.com/shama/stylus-loader（但是好像不引入這個(gè)庫，也可以用~）
~是相對(duì)于其他路徑（文件）的，類似于相對(duì)路徑
示例：
~@/assets/scss/_variables.scss ==>>表示相對(duì)于@（別名，一般是src目錄）下的 assets/scss/_variables.scss；
注意：~@/assets/scss/_variables.scss 給人的感覺就是 src下面的 assets/scss/_variables.scss; 但是如果在這樣去引入樣式，會(huì)報(bào)錯(cuò)。
@和~@符號(hào)路徑解決
@和~@的用處不同，前者用于js文件路徑，后者用于css文件路徑
@路徑別名的學(xué)習(xí)
@代表項(xiàng)目的src路徑，是vue-cli給我們提供的，解決路徑比較長，找文件比較麻煩的問題
證明@是src并且是vue-cli通過webpack設(shè)置的,通過審查項(xiàng)目的 webpack 配置
通過命令vue inspect > output.js
如果讓編輯器支持@
方式1-去百度搜索vscode當(dāng)中使用@
方式2-去最好的半成品復(fù)制配置
復(fù)制jsconfig.json
~@路徑的解決
~@路徑和js當(dāng)中@類似,當(dāng)時(shí)這里要依靠擴(kuò)展來解決問題
(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)文章
這篇文章主要介紹了詳解element-ui中form驗(yàn)證雜記，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
使用Element+vue實(shí)現(xiàn)開始與結(jié)束時(shí)間限制
這篇文章主要為大家詳細(xì)介紹了使用Element+vue實(shí)現(xiàn)開始與結(jié)束時(shí)間限制，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了vue制作抓娃娃機(jī)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
element-ui?form表單的動(dòng)態(tài)rules校驗(yàn)功能實(shí)現(xiàn)
在vue項(xiàng)目中，有時(shí)候可能會(huì)用到element-ui?form表單的動(dòng)態(tài)rules校驗(yàn)，這篇文章主要介紹了element-ui form表單的動(dòng)態(tài)rules校驗(yàn),我們可以巧妙的運(yùn)用element-ui form表單里面form-item的校驗(yàn)規(guī)則來處理，本文結(jié)合實(shí)例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2023-07-07
.netcore+vue 實(shí)現(xiàn)壓縮文件下載功能
這篇文章主要介紹了.netcore+vue 實(shí)現(xiàn)壓縮文件下載功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-09-09
Vue Element UI 表單自定義校驗(yàn)規(guī)則及使用
這篇文章主要介紹了Vue Element UI 表單自定義效驗(yàn)規(guī)則及使用,文中通過代碼介紹了常見表單效驗(yàn)規(guī)則，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-02-02
這篇文章主要介紹了關(guān)于Vue-cli3煩人的eslint問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了Vue中的errorHandler異常捕獲問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
Vue3.0監(jiān)聽器watch與watchEffect詳解
在 Vue 3 中,watch 仍然是一種用于監(jiān)聽數(shù)據(jù)變化并執(zhí)行相應(yīng)操作的方式,不過在組合式 API 中,watch 的使用方式與選項(xiàng)式 API 略有不同,這篇文章主要介紹了Vue3.0監(jiān)聽器watch與watchEffect,需要的朋友可以參考下2023-12-12
vue-router實(shí)現(xiàn)組件間的跳轉(zhuǎn)（參數(shù)傳遞）
這篇文章主要為大家詳細(xì)介紹了vue-router實(shí)現(xiàn)組件間的跳轉(zhuǎn)，參數(shù)傳遞方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11