Git Product home page Git Product logo

nutui-demo's Introduction

NutUI 示例

本目录下包含 NutUI Vue 版本的相关示例

目录结构

├── vite            NutUI + Vite
├── rsbuild         NutUI + Rsbuild
├── vue-cli         NutUI + Vue CLI
├──
├── taro            NutUI + Taro
├── taro-tsx        NutUI + Taro + TSX
├──
├── cdn             NutUI CDN
├──
├── vite-jdt        NutUI JDT 主题
├── taro-jdt        NutUI + Taro JDT 主题

nutui-demo's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

nutui-demo's Issues

nutui4-vue3-taro-tsx,组件未正常解析

demo写法:

        <View class='content'>
          <View><Text>{state.msg}</Text> <Dongdong></Dongdong> </View>
          <nut-button type="primary" onClick={() => handleClick(state.msg2)} >点我</nut-button>
          <nut-cell
            show-icon={true}
            isLink={true}
            onClick={() => switchActionSheet('isVisible1')}

          >
            <span><label>基础用法</label></span>
            <div>{state.val}</div>
          </nut-cell>
          <nut-action-sheet
            v-model:visible={state.isVisible1}
            menu-items={menuItemsOne}
            onChoose={chooseItem}
          >
          </nut-action-sheet>
        </View>

显示:
image

[Vue warn]: Failed to resolve component: picker

系统版本: macOS Catalina 10.15.7,
微信开发者工具版本: wechat_devtools_1.05.2110110 、 wechat_devtools_1.05.2201240,
nutUI版本: "@nutui/nutui-taro": "^3.1.8",
taro版本: "@tarojs/taro": "3.4.0",
vue版本: "vue": "^3.0.0",
在taro vue3环境中使用nutUI, Picker组件,报错: [Vue warn]: Failed to resolve component: picker,
相同环境运行其他组件正常。picker组件updated正常。
updated Proxy {0: {…}, 1: {…}, 2: {…}, 3: {…}, 4: {…}, 5: {…}, 6: {…}, 7: {…}, 8: {…}, 9: {…}, 10: {…}, 11: {…}, 12: {…}, 13: {…}, 14: {…}, 15: {…}, 16: {…}, 17: {…}, 18: {…}, 19: {…}, 20: {…}, 21: {…}, 22: {…}, 23: {…}, 24: {…}, 25: {…}, 26: {…}, 27: {…}, 28: {…}, 29: {…}, 30: {…}}

代码片段:

app.ts
App.use(Button).use(Toast).use(Picker).use(Popup).use(Cell)
import { Button, Toast, Picker, Popup, Cell } from '@nutui/nutui-taro';


index/index.vue
<template>
  <nut-cell title="请选择城市" :desc="desc" @click="open"></nut-cell>
  <nut-picker
      v-model:visible="show"
      :list-data="listData"
      title="城市选择"
      @confirm="confirm" 
  ></nut-picker>
</template>
<script>
  import { ref } from 'vue';
  export default {
    setup(props) {
      const show = ref(false);
      const listData = [
        '南京市',
        '无锡市',
        '海北藏族自治区',
        '北京市',
        '连云港市',
        '浙江市',
        '江苏市'
      ];
      const desc = ref(listData[0]);
      const open = ()=>{
        show.value = true;
      }
      const confirm = (res)=>{
        desc.value = res;
      }
      return {show,desc,listData,open, confirm};
    }
  };
</script>

报错信息:
[Vue warn]: Failed to resolve component: picker
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
at <NutPicker visible=false onUpdate:visible=fn list-data=

模板的webpack版本配置似乎有问题

nutui4 + taro +vue的模板库中webpack版本过低,不满足最新版本taro的最低要求,不仅npm install安装会报错,即便手动加--legacy-peer-deps,也会在启动时报错,修改"webpack": "5.76.0"后成功启动模板

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.