琐琐碎碎三五点

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,
  });
  复制代码

• 组件使用