瑣瑣碎碎三五點

webpack 配置全局變量

webpack中alias配置

//例如
src
 - components
   - a.vue
 - router
   - home
     - index.vue


index.vue 裏，正常引用 A 組件：

import A from '../../components/a.vue'

若是設置了 alias 後。
alias: {
  'vue$': 'vue/dist/vue.esm.js',
  '@': resolve('src')
}

引用的地方路徑就能夠這樣了

import A from '@/components/a.vue'

這裏的 @ 就起到了【resolve('src')】路徑的做。
複製代碼

靈活使用Iconfont

在項目中以連接的方式使用Iconfont

使用(開發中) Iconfont 時，爲避免常常性修改致使重複下載字體文件，最好使用連接，具體操做以下：

• 進入Iconfont 選好字體，而後選擇Symbol複製連接

  

• 在項目中的全局變量文件中定義變量存儲上一步複製的連接，例如此處在defaultSettings.jsx中iconFontScriptUrl存儲連接(也能夠放在其餘地方，例如直接掛在window下面，甚至不存儲於這一步)

• 添加一個Iconfont組件

  import { Icon } from 'antd';
  import { iconFontScriptUrl } from '../../defaultSettings';
  
  // iconFontScriptUrl 修改爲本身的iconfont圖標項目地址
  // 注意：若是須要圖標多色，Iconfont圖標項目裏要進行批量去色處理
  // 使用：
  // import IconFont from '@/components/IconFont';
  // <IconFont type='icon-demo' className='xxx-xxx' />
  export default Icon.createFromIconfontCN({
    scriptUrl: iconFontScriptUrl,
  });
  複製代碼

• 組件使用