精华内容
下载资源
问答
  • 组件是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。这篇文章通过实例代码给大家介绍了Vue加载组件、动态加载组件的几种方式,需要的朋友参考下吧
  • Vue加载组件的几种方式

    千次阅读 2018-08-29 20:41:50
    //正常加载 import index from '../pages/index.vue' import view from '../pages/view.vue' //懒加载 const index = resolve => require(['../pages/index.vue'], resolve) const view = resolve => ...
    //正常加载
    import index from '../pages/index.vue'
    import view from '../pages/view.vue'
    //懒加载
    const index = resolve => require(['../pages/index.vue'], resolve)
    const view = resolve => require(['../pages/view.vue'], resolve)
    //懒加载 - 按组
    const index = r => require.ensure([], () => r(require('../pages/index.vue')), 'group-index')
    const view = r => require.ensure([], () => r(require('../pages/view.vue')), 'group-view')
    // 懒加载 - 按组 import,基于ES6 import的特性
    const index = () => import('../pages/index.vue')
    const view = () => import('../pages/view.vue')
    展开全文
  • Vue SSR 组件加载问题

    2020-08-27 14:53:48
    主要介绍了Vue SSR 组件加载问题,非常不错,具有参考借鉴价值,需要的朋友可以参考下
  • vue加载天气组件

    千次阅读 2020-07-07 18:32:21
    vue中使用 首先我们进入中国天气网生成一段代码 根据需要设置天气样式 复制并修改生成的这段代码到vue中 将script引入 修改为vue的动态引入方法 <template> <div id="weater"> <div id=...

    天气插件

    中国天气网

    vue中使用

    首先我们进入中国天气网生成一段代码
    根据需要设置天气样式
    在这里插入图片描述
    在这里插入图片描述
    复制并修改生成的这段代码到vue中

    将script引入 修改为vue的动态引入方法

    <template>
        <div id="weater">
            <div id="weather-view-he" ref="weather"></div>
            <remote-script src="天气网生成代码中script的src"></remote-script>
        </div>
    </template>
    <script>
    window.WIDGET = {ID: '123456'};   // 将WIDGET前边加上window 否则读取不到此变量
    import Vue from 'vue'
    Vue.component('remote-script', {   // vue动态生成script (在html中当成组件来用)
        render: function (createElement) {
            var self = this;
            return createElement('script', {
                attrs: {
                    type: 'text/javascript',
                    src: this.src
                },
                on: {
                    load: function (event) {
                        self.$emit('load', event);
                    },
                    error: function (event) {
                        self.$emit('error', event);
                    },
                    readystatechange: function (event) {
                        if (this.readyState == 'complete') {
                            self.$emit('load', event);
                        }
                    }
                }
            });
        },
        props: {
            src: {
                type: String,
                required: true
            }
        }
    })
    export default {
        name:"Weather",
        data(){
            return {
               
            }
        },
    }
    </script>
    
    展开全文
  • 1. 需求描述 最近开发的一个项目,涉及到这样一个需求:随着项目的不断推进,后台管理...Vue加载组件主要有正常加载和懒加载,示例代码如下: //正常加载 import index from '../pages/index.vue' import view from '

    1. 需求描述

    最近开发的一个项目,涉及到这样一个需求:随着项目的不断推进,后台管理功能逐渐增多,与此同时,静态路由表也逐渐扩大,需要把静态路由方式转换为动态路由方式。要完成这样一个转换,有几个技术要点需要解决,其中一个就是需要Vue动态加载组件,那么,Vue动态加载组件的常用方式有哪些呢?

    2. Vue动态加载组件的两类方式

    Vue加载组件主要有正常加载懒加载,示例代码如下:

    //正常加载
    import index from '../pages/index.vue'
    import view from '../pages/view.vue'
    //懒加载
    const index = resolve => require(['../pages/index.vue'], resolve)
    const view = resolve => require(['../pages/view.vue'], resolve)
    //懒加载 - 按组
    const index = r => require.ensure([], () => r(require('../pages/index.vue')), 'group-index')
    const view = r => require.ensure([], () => r(require('../pages/view.vue')), 'group-view')
    // 懒加载 - 按组 import,基于ES6 import的特性
    const index = () => import('../pages/index.vue')
    const view = () => import('../pages/view.vue')
    

    组件懒加载指的是在组件需要使用的时候才加载,即下文中指的组件的动态加载,Vue动态加载组件的方式主要有四种

    (1)使用import导入组件,可以获取到组件

    var name = 'system';
    var myComponent =() => import('../components/' + name + '.vue');
    var route={
        name:name,
        component:myComponent
    }
    

    (2)使用import导入组件,直接将组件赋值给componet

    var name = 'system';
    var route={
        name:name,
        component :() => import('../components/' + name + '.vue');
    }
    

    (3)使用require 导入组件,可以获取到组件

    var name = 'system';
    var myComponent = resolve => require.ensure([], () => resolve(require('../components/' + name + '.vue')));
    var route={
        name:name,
        component:myComponent
    }
    

    (4)使用require 导入组件,直接将组件赋值给componet

    var name = 'system';
    var route={
        name:name,
        component(resolve) {
            require(['../components/' + name + '.vue'], resolve)
        }
    }
    

    或者

    var name = 'system';
    var route={
        name:name,
        component:(resolve) => require(['../components/' + name + '.vue'], resolve)
    }
    

    注意观察以上四种方式,不难发现,四种方式可以归为两类:

    2.1 使用import导入组件

    在这里插入图片描述
    如上图所示,红色方框内的,可以写在组件上,当然也可以用一个变量保存,然后直接引用变量。

    2.2 使用require导入组件

    在这里插入图片描述
    或者
    在这里插入图片描述
    上2个图中,只是不同的写法形式而已。上图中,红色方框内的,可以写在组件上,当然也可以用一个变量保存,然后直接引用变量。

    3. 测试

    测试的代码样例,Vue动态加载组件使用import导入组件,截图如下:
    在这里插入图片描述

    测试的代码样例,Vue动态加载组件使用require导入组件,截图如下:
    在这里插入图片描述

    4. 结语

    Vue动态加载组件主要有两类方式,即import方式和require方式。这些应该是js方面的基本知识点,本文在此不作展开,仅因为工作需要,顺带记录整理。后续研究JS相关的知识的时候,再做进一步拓展。

    5. 参考资源

    Vue加载组件、动态加载组件的几种方式
    vue实现路由懒加载及组件懒加载的方式

    展开全文
  • vue 远程js 组件加载 提示加载 (vue-... 一个vuejs加载组件。 View demo 查看演示 Download Source 下载源 安装 (Install) npm i @nulldreams/vue-loading npm i @nulldreams/vue-loading 如何使用 (How ...

    vue 远程js 组件加载

    提示加载 (vue-loading)

    A vuejs loading component.

    一个vuejs加载组件。

    vue-loading

    安装 (Install)

    npm i @nulldreams/vue-loading

    npm i @nulldreams/vue-loading

    如何使用 (How to use)

    <template>
      <div>
        <vue-loader direction="middle" image="https://loading.io/spinners/coolors/lg.palette-rotating-ring-loader.gif" text="Loading..." text-color="#786fa6" />
        <loader :color="'#cf6a87'" :borderWidth="5" :duration="1.5" :size="25" :background="'#f5cd79'" />
        <loader :color="'#f5cd79'" :borderWidth="10" :duration="1" :size="70" :background="'#778beb'" />
        <loader :color="'#778beb'" :borderWidth="20" :duration=".5" :size="100" :background="'#cf6a87'" />
        <loader-dots :color="'#f5cd79'" :background="'#ea8685'" :duration="1" :size="15" />
      </div>
    </template>
    
    <script>
    import vueLoader from '@nulldreams/vue-loading/src/vue-loading'
    import loader from '@nulldreams/vue-loading/src/components/loader'
    import loaderDots from '@nulldreams/vue-loading/src/components/dots'
    
    export default {
        components: {
            vueLoader,
            loader,
            loaderDots
        }
    }
    </script>

    翻译自: https://vuejsexamples.com/a-vuejs-loading-component/

    vue 远程js 组件加载

    展开全文
  • 本篇文章主要介绍了vue2组件实现懒加载浅析,运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力.
  • vue动态加载组件

    千次阅读 2019-07-08 18:23:15
    利用component is 属性动态加载组件:点击button分别加载A、B组件 <template> <div> <button @click="show('A')">点击加载A组件</button> <button @click="show('B')">点击加载B...
  • 主要介绍了Vue异步组件处理路由组件加载状态的解决方案,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • Vue组件分割 动态加载组件

    千次阅读 2018-05-22 11:54:30
    vue官网有异步加载组件,我在laravel里面试了下,没成功,可能是laravel的webpack配置问题。laravel的webpack配置太长不看。(可以的话laravel+vue的项目,可以考虑不用laravel自带的vue配置,自己重新弄个vue的前端...
  • 组件是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。这篇文章主要介绍了vue组件(全局,局部,动态加载组件),需要的朋友可以参考下
  • 开发vue延迟加载组件

    万次阅读 2018-03-16 14:00:14
    vue的单页面应用访问速度一般情况下已经很快了,...2、多数首次不显示的的dom元素,或者子组件加载时会调用ajax请求加载数据,这时候首次加载的请求可能有5个、10个甚至更多,这时候并发请求就会带来竞争,首次加载...
  • vue 根据组件地址动态加载异步组件

    千次阅读 2019-05-05 18:15:48
    要求:根据列表中配置的组件地址,动态加载组件(webpart) vue 根据组件地址动态加载异步组件目录结构index.htmlcomponents/component1components/component2components/component3 目录结构 index.html components...
  • Vue异步加载about组件

    2020-08-28 23:28:18
    主要为大家详细介绍了Vue异步加载about组件的相关方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要介绍了vue loadmore 组件滑动加载更多源码解析,需要的朋友可以参考下
  • 主要介绍了vue实现按需加载组件和异步组件,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
  • 需求: 点击按钮,异步加载组件先放效果图,直观感受下。 目录结构:直接上代码:注意点:1. 如果只是需要异步加载,不用点击按钮的话,即先下载其他组件,再下载异步组件的话,直接使用官网setTimeOut的写法即可:...
  • Vue异步加载组件(报错)

    千次阅读 2019-04-19 17:15:30
    异步加载组件: 报错:Syntax Error: Unexpected token (10:25) 8 | el: ‘#app’, 9 | components: { 10 | ‘example’: () => import(’./components/example’) | ^ 11 | } 1...
  • Vue加载组件 路径不对

    千次阅读 2017-07-18 21:19:38
    最近在使用VueRouter的懒加载组件的时候.const routes = [ { path: '/', component: App }, { path: '/category', component: resolve => {require(['./components/Category.vue'], res
  • vue动态组件加载

    千次阅读 2018-05-31 12:11:38
    lt;component :is="...2.jsVue.component("child1", { template: '&lt;p&gt;hell child1&lt;/p&gt;' }) Vue.component("child2", { template: '&lt;p&gt;
  • 下面小编就为大家分享一篇vue 页面加载进度条组件实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue路由组件加载介绍及使用

    千次阅读 2018-11-04 17:55:30
    vue组件加载又称为代码分割,也叫延迟加载,即在需要的时候进行加载,随用随载。 二、为什么要使用路由组件加载vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 71,588
精华内容 28,635
关键字:

vue加载组件

vue 订阅