精华内容
下载资源
问答
  • 今天小编就为大家分享一篇解决vue 引入组件报错的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 前端框架vue,在利用脚手架工具vue-cli创建前端项目时候,怎么引入组件呢?下面是详细的写法。 1、第一步,利用vue-cli创建一个vue前端项目,文件夹如下图 2、第二步,例子是在hom.vue界面引入子组件header.vue,...
  • 主要给大家介绍了关于利用vue+elementUI实现部分引入组件的相关资料,以及介绍了vue引入elementUI报错的解决方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧。
  • vue项目中引入组件

    千次阅读 2019-08-10 15:50:00
    vue组件化的开发。一个页面中,是一个组件,他也是由多个组件构成的。 第一个问题,项目中怎么引入页面? 使用v-cli自动搭建脚手架,他已经给我们配好了路由,还做好了一个HelloWorld的界面。 那么这个界面是怎么...

    最近在重构一个vue项目,恨自己当初第一次学的时候没有写博客。现在翻以前自己做的纸质版笔记,不能看,太混乱。所以趁这个时间总结一下。

    vue是组件化的开发。一个页面中,是一个组件,他也是由多个组件构成的。

    第一个问题,项目中怎么引入页面?

    使用v-cli自动搭建脚手架,他已经给我们配好了路由,还做好了一个HelloWorld的界面。
    那么这个界面是怎么被引用到的?

    首先我们知道,项目中main.js是整个项目的入口

    import Vue from 'vue'
    import App from './App'
    import router from './router'
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      components: { App },
      template: '<App/>'
    })
    

    可以看到就在这里它创建了一个根组件,然后根组件引入了
    router:路由
    App.vue:组件
    等等
    顺着这里我们再看一下App.vue

    <template>
      <div id="app">
        <router-view/>
      </div>
    </template>
    
    <script>
    export default {
      name: 'App'
    }
    </script>
    
    <style>
    </style>
    

    这里也没有样式。但是我们看到了蹊跷!<router-view/>。路由匹配到的组件将渲染在这里。

    我们再看路由router文件夹下的index.js。这个是项目的路由文件

    import Vue from 'vue'
    import Router from 'vue-router'
    import HomeA from '@/pages/Home/Home.vue'
    
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'HomeG',
          component: HomeA
        }
      ]
    })
    

    所以我们的页面是放在这里让用户可以访问到他。
    解释一下:
    HomeG就是我们组件的对外出口姓名
    HomeA就是我们从路径下引入的姓名

    第二个问题:页面中的小组件是怎样放进页面并使用的呢?

    1.了解目录结构


    18774841-5f861ced9e95645f.png
    图片.png

    pages文件夹存放我们这个项目所有的页面
    home文件夹存放home页面的组件
    home.vue是home页
    components文件夹存放组成home页的小组件

    例子:把swiper.vue放入home.vue
    1.每一个组件都有一个“出口名字”(在外面引用这个组件就会用他这个名字)

    export default {
      name: 'swiper',
    }
    

    2.home.vue
    ①script标签中引入这个组件

    import swiper from './components/swiper'
    

    ②在home.vue注册这个组件

    export default {
      components:{
          swiper
      }
    }
    

    ③就可以在home中使用了,像div标签那样使用了

    <swiper></swiper>
    
    展开全文
  • vue 引入组件方式

    千次阅读 2019-05-19 10:44:46
    这里提供两种方式引入组件; 1 import导入所需组件(正常加载) 2 require方法导入组件 用于路由配置页面: (1)实现(懒加载) 注意:这里的@ 相当于.. (2)路由配置页面使用require引用组件 1)...

    vue开发,单页面应用,即一个组件就是一个模块,可以互相引入;

    这里提供两种方式引入组件;

    1 import导入所需组件(正常加载)

     

    2 require方法导入组件

    用于路由配置页面:

    (1)实现(懒加载)

    注意:这里的@ 相当于..

    (2)路由配置页面使用require引用组件

    1)原因:

    import:打包后,会将路由配置里面的所有component打包到一个js文件中,导致部署后,跳转时加载的文件太大,加载缓慢;

    require:打包后, 每个组件都是单独的文件,可实现按需加载,提高性能

    2)如此,只有当用户点击了某页面,才会加载对应页面的 js 文件,实现了按需加载的功能。

    加载了几个js文件,代表此项目中有几个组件

    (3)require懒加载,按组

    (4)import 懒加载,按组

    ...

    可参考文章:

    https://router.vuejs.org/zh/guide/advanced/lazy-loading.html

    https://cn.vuejs.org/v2/guide/components-dynamic-async.html#%E5%BC%82%E6%AD%A5%E7%BB%84%E4%BB%B6

     

     

    展开全文
  • vue(三)[引入组件]

    千次阅读 2020-04-07 14:03:54
    App.vue引入全局组件 @符号 先说下vue项目中的@符号,我们在build/webpack.base.conf这个文件下可以看到webpack把@定义成 src 文件路径。 所以@符号跟vue没有什么关系,他是基于webpack的,有很多人把这个给误解了。...

    App.vue引入全局组件

    @符号

    先说下vue项目中的@符号,我们在build/webpack.base.conf这个文件下可以看到webpack把@定义成 src 文件路径。
    所以@符号跟vue没有什么关系,他是基于webpack的,有很多人把这个给误解了。
    . 是代表绝对路径。
    在这里插入图片描述

    App.vue全局引入

    App.vue是全局显示的组件,所以把组件引入到App显示每个页面都会有。
    使用import 别名 “@/components/组件名”进行组件引用,然后在components 中注册,在html输出别名标签即可,千万不要在@后面跟src。
    目前看到有Hello和index两个组件,我们在App中引入Hello:
    在这里插入图片描述
    HTML:

    <div id="app">
    	<hello></hello>
    </div>
    

    JS:

    	//全局引入
    	import hello from "@/components/HelloWorld.vue"
    	export default {
    		components: {
    			hello
    		},
    		name: 'App'
    	}
    

    Hello内容:

    <div id="hello">
    	<p>hello world</p>
    </div>
    

    页面内容:
    在这里插入图片描述

    局部引入

    局部引入和全局引入方法是一致的,只不过是在components下单组件之间互相引用,如下例子只能在index页面显示hello页面的内容。
    html:

    <div id="index">
        <p>你好</p>
        <hello></hello>
    </div>
    

    JS:

      import hello from "./HelloWorld.vue"
      export default {
        components:{
          hello
        }
    };
    

    页面效果:
    在这里插入图片描述

    展开全文
  • 主要介绍了Vue一次性简洁明了引入所有公共组件的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue动态引入组件

    千次阅读 2019-09-27 17:28:12
    vue动态引入组件 <el-main> <component :is="selectIndex" @changeMenu="selectMenu" :id="componentId" ></component> </el-main> <script> i...

    vue动态引入组件

    	<el-main>
          <component
            :is="selectIndex"
            @changeMenu="selectMenu"
            :id="componentId"
          ></component>
        </el-main>
    
    
    <script>
    import Vue from "vue";
    export default {
      name: "Index",
      components: {
        cardList: resolve => require(["@/components/memberCard/cardList"], resolve),
        addCard: resolve => require(["@/components/memberCard/addCard"], resolve),
        postList: resolve => require(["@/components/message/postList"], resolve),
        sotreAdd: resolve => require(["@/components/storeAdmin/serviceItem/add"], resolve),
        sotreList: resolve => require(["@/components/storeAdmin/serviceItem/list"], resolve),
      },
      data() {
        return {
          loading:true,
          componentId: 0,
          menus: [],
          currentComponent:"cardList",
          selectIndex: "cardList",
        };
      },
      methods: {
        selectMenu(index, value) {  
          console.log(index,value,"vave")
          this.selectIndex = index;
          if( value != undefined ){
            this.componentId = value.id
          }
          
        },
        
      },
      created() {
        //this.test();
        this.loading = true;
        this.$ajax
          .get("/api/home")
          .then(result => {
            console.log("api-home", result);
            this.siteName = result.data.siteName;
            this.userName = result.data.userName;
            this.menus = result.data.menus;
            //注册组件
            result.data.menus.forEach(menu => {
              menu.items.forEach(item => {
                console.log("222222",item);
                Vue.component(item.index, function(resolve) {
                  console.log("1111111",item.path);
                  require([`${item.path}`], resolve);
                });
              });
            });
          })
          .finally(res => {
            console.log(res);
            this.loading = false;
          });
      }
    };
    </script>
    
    
    展开全文
  • vue 异步引入组件

    千次阅读 2020-02-21 10:57:37
    // 异步操作 const LRC = Vue.component("lrc",(resolve)=>require(["../components/LRC"],resolve)) 在引入组件的script中操作
  • vue-cli3组件import引入

    千次阅读 2018-12-03 16:24:57
    vue-cli3 更新之后,引入组件import chezhuliebiao from ‘…/owner/owner_list’ 会报错:Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide ...
  • 今天小编就为大家分享一篇在vue项目中引入高德地图及其UI组件的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了vue组件内部引入外部js文件的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • Vue引入组件的步骤?

    千次阅读 2020-05-07 16:35:37
    CommonJS的require()方法引入组件 2.对组件进行注册,代码如下 注册 Vue.component('my-component', { template: '<div>A custom component!</div>'}) 3.使用组件 <my-component></my-com...
  • 如图:两个组件在页面上不显示 ...在App.vue引入一个组件 App.vue <template> <div> <addition></addition> <p>--------------------</p> </div> </template&g
  • vue怎么引入组件

    千次阅读 2019-12-12 09:44:28
    第一步:例子是在aboutUs.vue界面引入组件sideFloating.vue,如下图 第二步:给子组件sideFloating.vue命名一个全局的id <script type="text/ecmascript-6"> export default { name:'indexFloating', } ...
  • VUE项目中组件的创建-引入-注册-使用

    千次阅读 多人点赞 2020-05-31 08:49:08
    什么是组件化? 组件化就是将一个完整的页面根据功能拆分成多个小的功能块,每个功能块独立的完成自己的功能 不同组件的组合就构成了我们一个...2、引入组件—在需要引入这个组件的vue文件中引入新建的文件(Header.v
  • vue批量引入全局组件

    千次阅读 2020-05-14 14:26:26
    1 -「全局组件注册」 组件是我们非常常用的东西,很多人使用组件都是通过一个一个文件去引用和注册。如果一个组件在整个项目里面的使用次数较多,每一次使用都需要引用并注册,就会显得特别麻烦 <template> &...
  • /views${data.path}.vue`], resolve) 在vue cli4.x , Router4创建的项目。 在做按需加载组件时,component: (resolve) => require([`@/views${data.path}.vue`], resolve),...
  • vuecli3创建的组件库工程实现按需引入

    千次阅读 热门讨论 2019-08-26 14:31:48
    工程地址 创建一个vuecli3项目:vue create demo-vuecli3-ui 手动选择特性,我这里只要Babel以及Css-Professor; 然后选择Sass/SCSS,开发者按照自己的喜好来选择css预处理语言; ...
  • 今天做一个vue项目,我引的是elementUI组件库,首先 npm install element-ui -S 下载完成后 main.js文件中引入elementUI,并使用这个组件库 然后写了一个测试组件,看看elementUI是否引入成功了 但是出来是这种...
  • vue组件引入另一vue组件

    千次阅读 2019-05-17 18:08:17
    组件引入另一组件 组件化开发,最重要的特点就是其复用性。...在当前组件card.vue引入barBottom.vue的步骤如下: 在card.vue引入barBottom.vue: import barBottom from './barBottom.vue...
  • vue引入组件失效问题

    千次阅读 2019-07-07 11:48:08
    vue引入自定义组件失效,效果同未引入组件前 解决方法 组件标签如上图,也可写为如… 如上图,引入组件,组件名必须为Xxxx或xxxXxxx,同xxxXxxx的标签可写为或 注:小问题,但是困扰了我小半天 ...
  • vue引入组件正确命名方式

    千次阅读 2020-12-30 16:21:08
    https://www.cnblogs.com/e0yu/p/10795176.html
  • vue引入组件的方法

    千次阅读 2018-10-11 14:47:52
    import FormData from './add_student.vue';// 第一步 先使用import导入你要在该组件中使用的子组件   components:{ FormData },  //第二步 在components 注册这个组件 &lt;template&gt; &lt;...
  • vue全局组件引入

    千次阅读 2020-06-18 09:33:18
    1,创建组件 在自定义组件的文件夹下(layout)创建组件,并创建index.js文件, 2,导出组件 在index.js内导出组件(可以同时注册多个组件),代码如下: import QRcode from '@/components/layout/QRcode....
  • VUE3.0引入vant组件

    千次阅读 2020-09-10 15:33:05
    VUE3.0引入vant组件引入通过 npm 安装通过 yarn 安装组件挂载组件使用 目前Vant 3 是基于 Vue 3 开发的,在使用 Vant 3 前,请将项目中的 Vue 升级到 3.0 以上版本。 引入 通过 npm 安装 在现有项目中使用 Vant 时...
  • VUE引入自定义组件的方法

    千次阅读 2020-06-15 20:15:10
    第一步:引入组件 import Wert from "../components/HelloWorld.vue"; 第二不:挂载组件 components: { "v-wert": Wert} 第三步 使用 <v-wert></v-wert>
  • Vue引入公共组件

    千次阅读 2019-05-09 12:51:58
    Vue引入公共组件vue页面1需要引入子组件vue页面2子组件vue页面2内容为正常的vue页面,无需任何修改 vue页面1需要引入子组件vue页面2 1.在Vue页面1中添加 <template> <Header></Header>//直接...
  • Vue 引入组件、引入图片

    千次阅读 2020-03-31 16:07:36
    引入组件的两种方法 1、全局引入(在App.vue的script标签中) 1、引入(Import 变量 from 路径) import head form '@/components/head' import footer form '@/components/footer' 2、注册(注册的名字不能是html...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 92,576
精华内容 37,030
关键字:

vue3引入组件

vue 订阅