(湖州房)屋出租:使用vant的时刻,报错:component has been registered but not used以及vant的使用方法总结

2020-04-11 27 views 0

扫一扫用手机浏览

“使用”vant『的时刻』,报错:component has been registered but not used『以及』vant的“使用”方法总结

在“使用”vant『的时刻』。 《想按需引入》,于是安装了babel-plugin-import『插件』。

〖文档〗:https://youzan.github.io/vant/#/zh-CN/quickstart

然则遇到了上述报错。 不在components中注册,“【或者】”用这种常用的方式注册,都市报错:

//示例
import { Button } from 'vant'//引入
components:{ Button } //注册

{注重}:〖文档〗都没有写引入的组件的注册部门,没有完整的“使用”实例。

详细报错「如」下:

「解决方案」1(只有少量“使用”vant组件『的时刻』,【可以思量这个】,『由于』一个个引入有些贫苦)

手动引入,‘需要单独引入组件和’css。 组件的路径文件夹名称有时刻还需要自己找。

路径是:node_modules_vant@2.6.0@vant\lib
{还要单独的引入“((‘对应’))”的}css样式。

稀奇需要{注重}的是注册方式需要是:

[【组件】名.name]:【组件】名

<template>
  <div>
    this is for test words!
    <van-swipe-cell>
      <template #left>
        <van-button square type="primary" text="〖“选择”〗" />
      </template>
      <van-cell :border="true" title="『单元格』" value="「内容」" />
      <template #right>
        <van-button square type="danger" text="删除" />
        <van-button square type="primary" text="珍藏" />
      </template>
    </van-swipe-cell>

    <van-button type="default">【<默认按钮>】</van-button>
    <van-button type="primary">“{<主>要按钮}”</van-button>
    <van-button type="info"><「信息按钮」></van-button>
    
  </div>
</template>
<script>
import Button from 'vant/lib/button';
import SwipeCell from 'vant/lib/swipe-cell';
import Cell from 'vant/lib/cell';

import 'vant/lib/swipe-cell/style';
import 'vant/lib/cell/style';
import 'vant/lib/button/style';
export default {
  name: "Login",
  components: {
      [Button.name]:Button,
      [SwipeCell.name]:SwipeCell,
      [Cell.name]:Cell
  }
};
</script>

需要引入露出的【组件】名。‘然则测试发现可’以是随便的,
『由于』swipe-cell 中没有搜索到找到[SwipeCell。
(然则在)button{中有}export“Button”
例「如」:

import XButton from 'vant/lib/button';//引入
[XButton.name]:XButton//注册

以是只需要保持一致就行。

{该「解决方案」参考了}:

在官方在github中提供的demo中,《发现局部注册有像》这样写的。
https://github.com/youzan/vant-demo/blob/master/vant/base/src/view/cart/index.vue

「解决方案」2 (这会让打包后的文件体积大一点,{然则确实是最利}便的方式。(若是不思量模块化),“工程化开发而不介意把它挂载到”vue原型的话)

main.js

import Vue from 'vue'
import App from './App.vue'
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

demo.vue

<template>
  <div>
    this is for test words!
    <van-swipe-cell>
      <template #left>
        <van-button square type="primary" text="〖“选择”〗" />
      </template>
      <van-cell :border="true" title="『单元格』" value="「内容」" />
      <template #right>
        <van-button square type="danger" text="删除" />
        <van-button square type="primary" text="珍藏" />
      </template>
    </van-swipe-cell>

    <van-button type="default">【<默认按钮>】</van-button>
    <van-button type="primary">“{<主>要按钮}”</van-button>
    <van-button type="info"><「信息按钮」></van-button>

  </div>
</template>
<script>

export default {
  name: "Login",
  components: {

  }
};
</script>

(不用导入),不用注册,【直接用】.

「解决方案」3(「推荐」)也是开篇“使用”babel-plugin-import『插件』遇到的「问题」的解决方法

实在这不算「解决方案」。〖只是以前用〗vue『的时刻』,组件注册这里有个小细节一直没有{注重}导致的。
{快速查看}示例代码:

<template>
  <div>
    this is for test words!
    <van-swipe-cell>
      <template #left>
        <van-button square type="primary" text="〖“选择”〗" />
      </template>
      <van-cell :border="true" title="『单元格』" value="「内容」" />
      <template #right>
        <van-button square type="danger" text="删除" />
        <van-button square type="primary" text="珍藏" />
      </template>
    </van-swipe-cell>

    <van-button type="default">【<默认按钮>】</van-button>
    <van-button type="primary">“{<主>要按钮}”</van-button>
    <van-button type="info"><「信息按钮」></van-button>

  </div>
</template>
<script>
import { Button,SwipeCell,Cell } from 'vant'
export default {
  name: "Login",
  components: {
    'van-button':Button,//“((‘对应’))”<van-button>{《“标签”》}
    'van-swipe-cell':SwipeCell,//“((‘对应’))”<van-swipe-cell>{《“标签”》}
    'van-cell':Cell//“((‘对应’))”<van-cell>{《“标签”》}

    //也可以像这样写
    // vanButton:Button,
    // vanSwipeCell:SwipeCell,
    // vanCell:Cell

  }
};
</script>

“之以是”,‘泛起’“component has been registered but not used”这个报错,就是『由于』“使用”了components:{ Button }举行注册。

《这种注册方式注册的是》Button<这个>元素,(然则在)dom上确实没有<这个>元素。 『由于』是van-button<这个>元素。 而<这个>元素又没有被准确注册 。

{也就是说}<van-button>{《“标签”》}、<van-swipe-cell>{《“标签”》}、<van-cell>{《“标签”》}都没有被准确的注册导致的。
你可以像这样来注册组件:

'van-button':Button,//“((‘对应’))”<van-button>{《“标签”》}
'van-swipe-cell':SwipeCell,//“((‘对应’))”<van-swipe-cell>{《“标签”》}
'van-cell':Cell//“((‘对应’))”<van-cell>{《“标签”》}

「还可以用驼峰下令法」,<首字>母大小写都可以,『省略』" - " 来举行注册。「如」:

vanButton:Button,
vanSwipeCell:SwipeCell,
vanCell:Cell
“【或者】”
VanButton:Button,
VanSwipeCell:SwipeCell,
VanCell:Cell

该「解决方案」参考:
https://cn.vuejs.org/v2/guide/components-registration.html (#【组件】名大小写)
总结:
在vue中,带短横线的{《“标签”》}元素的注册。必须是驼峰下令法,“【或者】”用引号括起来。

「如」<van-button>的注册必须是
vanButton:Button
“【或者】”VanButton:Button
再“【或者】”'van-button':Button
,

Sunbet 【申博】

Sunbet 【申博】www.baodingxsls.com Sunbet是菲律宾娱乐的官方网站。Sunbt官网有你喜欢的Sunbet、【申博】APP下载、『菲律宾娱乐最新网址』、『菲律宾娱乐管理网最新网址等』。

Sunbet网站内容转载自互联网,如有侵权,联系Sunbet 删除。

本文链接地址:http://www.shfkgcjxyxgs.com/post/1312.html

相关文章

发表评论