xicon 提示未注册

[dmlzj]

"vux": "^2.1.1-rc.11", "vux-loader": "^1.0.56" 在app.vue里面写: <x-icon slot="icon" type="ios-checkmark" size="30"></x-icon> 报错 [Vue warn]: Unknown custom element: <x-icon> - did you register the component correctly? For recursive components, make sure to provide the "name" option. 是不是我哪里搞错了啊

[airyland]

这是 vux-loader 的支持问题。这个组件暂时只支持两个属性 type 和 size，其他属性比如 slot 会导致匹配不到，建议你在把 slot 放到外围。

<span slot="icon">
  <x-icon type="ios-checkmark" size="30"></x-icon>
</span>

下个版本才支持使用其他属性。

[dmlzj]

@airyland <tabbar-item> <span slot="icon"><x-icon type="icon2_tab_me" size="30"></x-icon></span> <span slot="label">Wechat</span> </tabbar-item> 这样也不行。。 我用npm安装的时候有报错，我没管，直接npm run dev的，是不是跟这个有关呢？用别的组件没问题

[airyland]

? 请告诉我 x-icon 什么时候有一个叫 icon2_tab_me 的图标？

[dmlzj]

那个是自己做的svg的图，和这个没关系，我用<x-icon type="ios-checkmark" size="30"></x-icon>也不可以，应该是我npm安装的时候报错有关吧！

node-zopfli@2.0.2 install /home/dml/www/vue/vux_demo/node_modules/node-zopfli
> node-pre-gyp install --fallback-to-build

node-pre-gyp ERR! Tried to download(undefined): https://node-zopfli.s3.amazonaws.com/Release/zopfli-v2.0.2-node-v51-linux-x64.tar.gz 
node-pre-gyp ERR! Pre-built binaries not found for node-zopfli@2.0.2 and node@7.2.1 (node-v51 ABI) (falling back to source compile with node-gyp) 
module.js:472
    throw err;
    ^

Error: Cannot find module 'internal/fs'
    at Function.Module._resolveFilename (module.js:470:15)
    at Function.Module._load (module.js:418:25)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at evalmachine.<anonymous>:17:20
    at Object.<anonymous> (/usr/lib/node_modules/node-gyp/node_modules/graceful-fs/fs.js:11:1)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
node-pre-gyp ERR! build error 
node-pre-gyp ERR! stack Error: Failed to execute '/usr/local/bin/node /usr/lib/node_modules/node-gyp/bin/node-gyp.js clean' (1)
node-pre-gyp ERR! stack     at ChildProcess.<anonymous> (/home/dml/www/vue/vux_demo/node_modules/node-pre-gyp/lib/util/compile.js:83:29)
node-pre-gyp ERR! stack     at emitTwo (events.js:106:13)
node-pre-gyp ERR! stack     at ChildProcess.emit (events.js:191:7)
node-pre-gyp ERR! stack     at maybeClose (internal/child_process.js:885:16)
node-pre-gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
node-pre-gyp ERR! System Linux 3.13.0-24-generic
node-pre-gyp ERR! command "/usr/local/bin/node" "/home/dml/www/vue/vux_demo/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build"
node-pre-gyp ERR! cwd /home/dml/www/vue/vux_demo/node_modules/node-zopfli
node-pre-gyp ERR! node -v v7.2.1
node-pre-gyp ERR! node-pre-gyp -v v0.6.34
node-pre-gyp ERR! not ok 
Failed to execute '/usr/local/bin/node /usr/lib/node_modules/node-gyp/bin/node-gyp.js clean' (1)
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.1: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: node-zopfli@2.0.2 (node_modules/node-zopfli):
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: node-zopfli@2.0.2 install: `node-pre-gyp install --fallback-to-build`
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: Exit status 1

我在看看这个是什么问题，可能解决了这个就好了，thank you!

[airyland]

npm 安装相关问题要自行解决。

[dmlzj]

@airyland

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.1: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

这两个警告应该没问题了。 但是还是不行，这是我app.vue里面的代码

<template>
  <div id="app">
    <router-view></router-view>
    <tabbar>
      <tabbar-item>
        <span slot="label">Wechat</span>
      </tabbar-item>
      <tabbar-item show-dot>
        <span slot="label">Message</span>
      </tabbar-item>
      <tabbar-item selected link="/component/demo">
        <span slot="label">Explore</span>
      </tabbar-item>
      <tabbar-item badge="2">
        <span slot='icon'><x-icon  type="ios-checkmark" size="30"></x-icon></span>
        <span slot="label">News</span>
      </tabbar-item>
    </tabbar>

  </div>
</template>

<script>
import { Tabbar, TabbarItem } from 'vux'
export default {
  components: {
    Tabbar,
    TabbarItem
  }
}
</script>

<style lang="less">
@import '~vux/src/styles/reset.less';

body {
  background-color: #fbf9fe;
}
</style>

webpack.base.conf.js这里面只加过一点东西，就是自定义主题那点代码

module.exports = vuxLoader.merge(webpackConfig, {
  plugins: ['vux-ui', 'progress-bar', 'duplicate-style',{
    name: 'less-theme',
    path: './src/theme.less'
  }]
})

别的地方都没有动过。。。为什么不总是提示这个错误呢。。。

[dmlzj]

vue.esm.js?65d7:558 [Vue warn]: Unknown custom element: <x-icon> - did you register the component correctly? For recursive components, make sure to provide the "name" option. 
(found in <App> at /home/dml/www/vue/shanshou_vux/src/App.vue)

[dmlzj]

算了不搞了，我在同事电脑上弄了一遍没问题！我直接把他弄好的拿过来了！

[airyland]

十分怀疑是上面 x-icon 和 type 之前多了个空格 😅

[dmlzj]

我滴个神啊。。。。果然是，我服了我自己了！

[airyland]

这个我也有锅，空格匹配过于严格。

[brahmachen]

又中奖了， 这样不可以

 <x-icon @click="$router.go(-1)" slot="overwrite-left" type="ios-arrow-left" size="30" >
 </x-icon>

这样可以

 <x-icon @click="$router.go(-1)" slot="overwrite-left" type="ios-arrow-left" size="30" ></x-icon>

版本 "vux": "^2.4.1"