Git Product home page Git Product logo

vant-demo's Introduction

Vant Demo

English | 简体中文

The current repository is the official example repository for Vant, which includes examples related to Vant, Vant Weapp, and Vant Cli.

How to Use

  1. First, clone the current repository to your local:
git clone [email protected]:vant-ui/vant-demo.git
  1. Then, choose the example you need, such as the Vite project example:
cd vant/vite
  1. Install the dependencies using npm or other package managers, and start the project:
npm i
npm run dev
  1. You can fork the current project or directly copy the code from the current project to use.

Directory Structure

├── vant                # Examples related to Vant
│   ├── rsbuild         Building applications using Vue 3, Vant 4, and Rsbuild
│   ├── vite            Building applications using Vue 3, Vant 4, and Vite
│   ├── nuxt3           Building applications using Nuxt 3 and Vant 4
│   ├── vue3            Building applications using Vue 3, Vant 4, and Vue Cli
│   ├── vue3-ts         Building applications using Vue 3, Vant 4, TypeScript, Vite
│   ├── cdn             Importing Vant through CDN
│   ├── rem             Configuring rem adaptation
│   ├── viewport        Configuring viewport settings
│   └── typescript      Configuring TypeScript and importing on demand
│
├── vant-weapp          # Examples related to Vant Weapp
│   └── base            Building mini-programs using Vant Weapp
│
├── react-vant          # Examples related to React Vant
│   └── rsbuild         Building applications using React Vant and Rsbuild
│   └── modern-js       Building applications using React Vant, Modern.js, and Rspack
│
└── vant-cli            # Examples related to Vant Cli
    └── base            Building component libraries using Vant Cli

vant-demo's People

Contributors

chenjiahan avatar lindysen avatar shunyue1320 avatar tolking avatar waittingbar avatar wjw-gavin avatar

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  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

vant-demo's Issues

切换到1.4.7 cart无法正常显示

切换到1.4.7 cart无法正常显示

demo本身的1.4.1是正常的

【重现条件】
直接 修改package.json中的vant版本 为1.4.7
问题必现

npm run serve 问题

npm ERR! path E:\git\github\vant-demo\package.json
npm ERR! code ENOENT
npm ERR! errno -4058
npm ERR! syscall open
npm ERR! enoent ENOENT: no such file or directory, open 'E:\git\github\vant-demo\package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\admin\AppData\Roaming\npm-cache_logs\2019-02-14T10_44_57_930Z-debug.log

Nuxtjs一次性全部引入不行。

import Vue from 'vue';
import Vant from 'vant';

// 目前在 nuxt 中无法按需引入样式,因此采用手动引入的方式
import 'vant/lib/index.css';

Vue.use(Vant);

测试了下不OK。。。
提示:Vant is not defined

ts自定义主题 引入主题文件报错

这样写可以正确修改主题
less: { modifyVars: { red: '#ccc', blue: '#3eaf7c', orange: '#f08d49', 'text-color': '#111' } }
但是
less: { modifyVars: { // 或者可以通过 less 文件覆盖(文件路径为绝对路径) 'hack':true; @import "src/assets/css/theme.less"; } }

这样就报错
image

rem的字体大小问题

demo里rem通过引入amfe-flexible
动态设置htmlbody的字体大小
index.htmlviewport
<meta name="viewport" content="width=device-width,initial-scale=1.0">
当在页面添加
<p>测试</p>
<div>测试</div>
等标签时,会出现pc端字体很小,手机端字体很大的问题,因为他们的font-size继承于body

我的解决方案是:
1、删除amfe-flexible的引入
2、删除index.html<meta name="viewport" content="width=device-width,initial-scale=1.0">
3、引入ant-design-mobile 高清方案的 antm-viewport.min.js

已勾选npm选项但是还是出现Component is not found in path "@vant/weapp/dist/image/index" 错误

jsEnginScriptError
Component is not found in path "@vant/weapp/dist/image/index" (using by "pages/goods/index");onAppRoute
Error: Component is not found in path "@vant/weapp/dist/image/index" (using by "pages/goods/index")
    at G (http://127.0.0.1:62977/appservice/__dev__/WAService.js:2:1501083)
    at G (http://127.0.0.1:62977/appservice/__dev__/WAService.js:2:1501287)
    at http://127.0.0.1:62977/appservice/__dev__/WAService.js:2:1522327
    at Module.We (http://127.0.0.1:62977/appservice/__dev__/WAService.js:2:1522906)
    at Function.value (http://127.0.0.1:62977/appservice/__dev__/WAService.js:2:1607887)
    at Tt (http://127.0.0.1:62977/appservice/__dev__/WAService.js:2:1623908)
    at http://127.0.0.1:62977/appservice/__dev__/WAService.js:2:1628170
    at xt (http://127.0.0.1:62977/appservice/__dev__/WAService.js:2:1628663)
    at Function.<anonymous> (http://127.0.0.1:62977/appservice/__dev__/WAService.js:2:1632248)
    at i.<anonymous> (http://127.0.0.1:62977/appservice/__dev__/WAService.js:2:1600839)
console.error @ VM174:1
errorReport @ VM180 WAService.js:2
(anonymous) @ VM180 WAService.js:2
E @ VM180 WAService.js:2
(anonymous) @ VM180 WAService.js:2
i.emit @ VM180 WAService.js:2
emit @ VM180 WAService.js:2
(anonymous) @ VM180 WAService.js:2
(anonymous) @ VM180 WAService.js:2
n @ VM178 asdebug.js:1
(anonymous) @ VM178 asdebug.js:1
(anonymous) @ VM178 asdebug.js:1
_ws.onmessage @ VM178 asdebug.js:1

关于主题配置不生效的问题

这是我的配置文件,完全没有效果,也没有报错。
我是用vue-cli 搭建的项目,这个版本并没有vue.config.js这个文件,我是自己添加到项目根目录的。我用https://github.com/youzan/vant-demo/tree/master/vant/theme 的示例也不行。
这个主题配置真的不知道怎么进行下去?。。。

一、目录结构:

image

二、配置文件

package.json

{
  "name": "hello-vue",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "core-js": "^3.6.4",
    "vant": "^2.5.9",
    "vue": "^2.6.11",
    "vue-router": "^3.1.5",
    "vuex": "^3.1.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.2.0",
    "@vue/cli-plugin-router": "~4.2.0",
    "@vue/cli-plugin-vuex": "~4.2.0",
    "@vue/cli-service": "~4.2.0",
    "babel-plugin-import": "^1.13.0",
    "less": "^3.0.4",
    "less-loader": "^5.0.0",
    "vue-template-compiler": "^2.6.11"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      'import',
      {
        libraryName: 'vant',
        libraryDirectory: 'es',
        // 指定样式路径
        style: name => `${name}/style/less`
      },
      'vant'
    ]
  ]
}

vue.config.js

module.exports = {
    outputDir: 'dist',
    publicPath: process.env.NODE_ENV === 'production' ? '/vant-demo/' : '/',
    css: {
      loaderOptions: {
        less: {
          modifyVars: {
            'font-size-sm': '13px',
            'font-size-md': '15px',
            'font-size-lg': '17px',
            'goods-action-button-danger-color': '#7232dd',
            'goods-action-button-warning-color': '#3eaf7c'
          }
        }
      }
    }
  };

pc端微信兼容问题

使用微信web开发者工具打开demo,但是点击的事件无法触发,或者是点击区域发生偏离,如点击的是p(10,20),但是响应的是另一个位置p(20,50)的按钮,
这样就导致 pc端微信无法正常使用,请问一下这个问题能修复吗?

你好,这边有个小建议

可以把vw的配置demo也放到里面去吗?我已经配置了vw的适配,但是还是希望有个官方的vw配置方案,谢谢。

rem配置

请问一下您的rem是在哪里来配置的呢

vant ts 模板问题

步骤

  1. 拉取当前仓库,进入 vant/typescript,安装依赖

  2. yarn build
    image

3.删除 ts-import-plugin 依赖,顺便也删了 vue.config.js

4.yarn build
image

以上步骤尝试多次结果一样

结论:似乎不需要 ts-import-plugin 了

npm run serve ,在浏览器访问页面空白,提示BASE_URL

DONE Compiled successfully in 3835ms 11:10:25

App running at:

URIError: Failed to decode param '/%3C%=%20BASE_URL%20%%3Efavicon.ico'
at decodeURIComponent ()
at decode_param (/www/testvue/vant-demo/node_modules/express/lib/router/layer.js:172:12)
at Layer.match (/www/testvue/vant-demo/node_modules/express/lib/router/layer.js:123:27)
at matchLayer (/www/testvue/vant-demo/node_modules/express/lib/router/index.js:574:18)
at next (/www/testvue/vant-demo/node_modules/express/lib/router/index.js:220:15)
at expressInit (/www/testvue/vant-demo/node_modules/express/lib/middleware/init.js:40:5)
at Layer.handle [as handle_request] (/www/testvue/vant-demo/node_modules/express/lib/router/layer.js:95:5)
at trim_prefix (/www/testvue/vant-demo/node_modules/express/lib/router/index.js:317:13)
at /www/testvue/vant-demo/node_modules/express/lib/router/index.js:284:7
at Function.process_params (/www/testvue/vant-demo/node_modules/express/lib/router/index.js:335:12)
at next (/www/testvue/vant-demo/node_modules/express/lib/router/index.js:275:10)
at query (/www/testvue/vant-demo/node_modules/express/lib/middleware/query.js:45:5)
at Layer.handle [as handle_request] (/www/testvue/vant-demo/node_modules/express/lib/router/layer.js:95:5)
at trim_prefix (/www/testvue/vant-demo/node_modules/express/lib/router/index.js:317:13)
at /www/testvue/vant-demo/node_modules/express/lib/router/index.js:284:7
at Function.process_params (/www/testvue/vant-demo/node_modules/express/lib/router/index.js:335:12)

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.