svg图标

  • svg-sprite-loader包
1
2
3
4
5
6
7
8
9
10
11
12
// vue.config.js
module.exports = {
  chainWebpack: config => {
    const svgRule = config.module.rule('svg')
    svgRule.uses.clear()
    svgRule
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
  },
  • 组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>
</template>

<script>
export default {
  name: 'svg-icon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String
    }
  },
  computed: {
    iconName () {
      return `#icon-${this.iconClass}`
    },
    svgClass () {
      if (this.className) {
        return 'svg-icon ' + this.className
      } else {
        return 'svg-icon'
      }
    }
  }
}
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  overflow: hidden;
}
</style>
  • 配置
1
2
3
4
5
6
7
8
9
// 配置
import Vue from 'vue'
import SvgIcon from '@/components/svg-icon'// svg组件
// register globally
Vue.component('svg-icon', SvgIcon)

const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)
  • 使用
1
<svg-icon :iconClass="item.icon"></svg-icon>

动态路由注意

1
2
3
4
5
6
7
8
store.dispatch('GenerateRoutes', roles).then(() => {
    router.addRoutes(store.getters.addRouters)

    // 动态路由 刷新致命点
    router.addRoutes([{ path: '*', redirect: '/', hidden: true }])

    next({ ...to, replace: true })
})

vue-router History模式

文件路径 ./ 与 /

1
2
publicPath: '/', // 其默认即可，history模式
publicPath: './', // 这是为了直接浏览可见而走的相对路径

网页刷新过快的问题

1
2
3
4
5
6
7
8
router.onError((error) => {
  const pattern = /Loading chunk (\d)+ failed/g
  const isChunkLoadFailed = error.message.match(pattern)
  const targetPath = router.history.pending.fullPath
  if (isChunkLoadFailed) {
    router.replace(targetPath)
  }
})

服务器处理

这里只举例nginx处理

1
2
3
location / {
  try_files $uri $uri/ /index.html;
}

兼容性

第一种方式

  • babel.config.js文件内添加 
1
2
3
4
5
6
7
8
9
'presets': [
  // 兼容配置
  [
    '@babel/preset-env',
    {
      'useBuiltIns': 'entry'
    }
  ]
]
  • main.js入口文件引入
1
2
// 引入@babel/polyfill处理兼容
import '@babel/polyfill'

第二种方式

  • 直接在babel.config.js写入
1
2
3
4
5
6
7
8
9
10
module.exports = {
  presets: [
    ['@vue/app', {
      polyfills: [
        'es6.promise',
        'es6.symbol'
      ]
    }]
  ]
}

服务端渲染

服务端渲染是在express每次都创建一个vue实例（虽然有缓存机制，但每个客户端请求，都会重新创建，不然每个用户看到的都是一样的），渲染成html后响应给客户端，后续还得将页面控制权转交给客户端。

其对服务器方面要求高。

react + radux

  • react 是开发环境依赖

  • 元素class得换成className（类似的还有其他）

  • 变量不能双向绑定 （之前就有耳闻），不过实现双向也不是太复杂

  • 个人理解：

无论是从代码客观性，还是功能代码复杂度，vue + vuex都要略胜于react + radux，react的JSX语法确实新奇，vue的.vue文件也不赖

可能这只是在入门阶段的偏见吧，也可能这就是为什么说入门vue比react要简单吧

希望以后在大型复杂项目中体会两者的优势劣势吧