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