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