欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue中引入路徑@的用法及說明

 更新時(shí)間：2022年09月22日 09:00:03   作者：貓人谷  
這篇文章主要介紹了vue中引入路徑@的用法及說明，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

引入路徑@的用法及說明

Vue文件中引用路徑的介紹

1、路徑 ./

./當(dāng)前文件同級目錄

2、路徑 …/

…/當(dāng)前文件上一級目錄

3、@符號

@ 的作用是在你引入模塊時(shí)，可以使用 @ 代替 /src 目錄，避免易錯(cuò)的相對路徑。

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）才能找到該圖片，但如果你配置了就可以這樣簡寫（src/assets/setLarge.png）

vue項(xiàng)目路徑使用@的原因

@是webpack設(shè)置的路徑別名

在vue項(xiàng)目中我們會(huì)引入文件或者組件，在引用的時(shí)候會(huì)用@符號

因?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目錄，還可以添加自定義別名。

使用場景

1. js，也是最為常用的使用場景

js引用方式

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)文章

最新評論