如何使用 SVG 在 vue.js spa 应用程序中添加预加载动画

【问题标题】：How to add preloading animation in vue.js spa application using SVG如何使用 SVG 在 vue.js spa 应用程序中添加预加载动画
【发布时间】：2019-07-01 14:59:30
【问题描述】：

我需要为 vue.js SPA 应用程序添加预加载动画，同时使用 SVG 和进度条加载后台文件。因此，用户可以看到动画，而不是看到空白屏幕。 gmail加载动画或https://jsfiddle.net/之类的东西谢谢你的建议

【问题讨论】：

标签： laravel vue.js single-page-application

【解决方案1】：

VueJS 有生命周期。最重要的是： beforeCreate, created, beforeMount, mounted.
因此，在您的组件中，在data 下方，您可以在这些生命周期中编写一些逻辑。因此，例如在 beforeCreate 或 created 挂钩中，您可以显示 SVG 加载器，然后在 mounted（插入 DOM）中隐藏它。

例子：

 //MyComponent.vue
      <template>
         ...
      </template

    <script>
      export default {
        data() {
            return {
            article : {},
            user_id: null
        },
        created() {
         //Display your SVG
        },
        mounted() {
        //Hide your SVG
        },
        methods: {
        //etc,etc
        }
    </script>

【讨论】：