├── .github ├── FUNDING.yml └── workflows │ └── sync.yml ├── .gitignore ├── LICENSE ├── README.md ├── README.zh-CN.md ├── react-vant └── rsbuild │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── rsbuild.config.ts │ ├── src │ ├── App.scss │ ├── App.tsx │ ├── env.d.ts │ └── index.tsx │ └── tsconfig.json ├── vant-cli ├── README.md └── base │ ├── .eslintignore │ ├── .gitignore │ ├── babel.config.js │ ├── docs │ ├── home.md │ └── quickstart.md │ ├── package.json │ ├── src │ ├── my-button │ │ ├── README.md │ │ ├── demo │ │ │ └── index.vue │ │ ├── index.less │ │ ├── index.vue │ │ ├── test │ │ │ ├── __snapshots__ │ │ │ │ └── index.spec.js.snap │ │ │ └── index.spec.js │ │ └── utils.ts │ ├── my-cell │ │ ├── README.md │ │ ├── demo │ │ │ └── index.vue │ │ ├── index.jsx │ │ └── index.less │ ├── my-icon │ │ ├── README.md │ │ ├── demo │ │ │ └── index.vue │ │ ├── index.jsx │ │ └── index.less │ └── style │ │ ├── base.less │ │ └── var.less │ └── vant.config.js ├── vant-weapp ├── README.md └── base │ ├── app.js │ ├── app.json │ ├── app.wxss │ ├── icons │ ├── cart-selected.png │ ├── cart.png │ ├── home-selected.png │ ├── home.png │ ├── usercenter-selected.png │ └── usercenter.png │ ├── jsconfig.json │ ├── package-lock.json │ ├── package.json │ ├── pages │ ├── cart │ │ ├── index.js │ │ ├── index.json │ │ ├── index.wxml │ │ └── index.wxss │ ├── goods │ │ ├── index.js │ │ ├── index.json │ │ ├── index.wxml │ │ └── index.wxss │ └── user │ │ ├── index.js │ │ ├── index.json │ │ ├── index.wxml │ │ └── index.wxss │ ├── project.config.json │ └── sitemap.json └── vant ├── README.md ├── cdn └── index.html ├── nuxt3 ├── .gitignore ├── .prettierrc ├── README.md ├── app.vue ├── nuxt.config.ts ├── package.json └── tsconfig.json ├── rem ├── babel.config.js ├── package.json ├── public │ ├── favicon.ico │ └── index.html ├── src │ └── main.js └── vue.config.js ├── rsbuild ├── .gitignore ├── README.md ├── auto-imports.d.ts ├── components.d.ts ├── package.json ├── rsbuild.config.ts ├── src │ ├── App.vue │ └── index.ts └── tsconfig.json ├── viewport ├── babel.config.js ├── package.json ├── public │ ├── favicon.ico │ └── index.html ├── src │ └── main.js └── vue.config.js ├── vite ├── .gitignore ├── index.html ├── package.json ├── src │ ├── App.vue │ └── main.js └── vite.config.ts ├── vue2 ├── babel.config.js ├── package.json ├── public │ ├── favicon.ico │ └── index.html ├── src │ ├── App.vue │ ├── main.js │ ├── router.js │ └── view │ │ ├── cart │ │ └── index.vue │ │ ├── goods │ │ └── index.vue │ │ └── user │ │ └── index.vue └── vue.config.js └── vue3-ts ├── .gitignore ├── .prettierrc ├── README.md ├── components.d.ts ├── index.html ├── package.json ├── public └── vite.svg ├── src ├── App.vue ├── assets │ └── vue.svg ├── main.ts ├── router.ts ├── types │ └── index.ts ├── view │ ├── cart │ │ └── index.vue │ ├── goods │ │ └── index.vue │ └── user │ │ └── index.vue └── vite-env.d.ts ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: [chenjiahan] 4 | patreon: # Replace with a single Patreon username 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 13 | -------------------------------------------------------------------------------- /.github/workflows/sync.yml: -------------------------------------------------------------------------------- 1 | name: Sync to Gitee 2 | 3 | on: 4 | workflow_dispatch: 5 | 6 | jobs: 7 | build: 8 | runs-on: ubuntu-latest 9 | steps: 10 | - name: Sync to Gitee 11 | uses: wearerequired/git-mirror-action@master 12 | env: 13 | # 注意在 Settings->Secrets 配置 GITEE_RSA_PRIVATE_KEY 14 | SSH_PRIVATE_KEY: ${{ secrets.GITEE_RSA_PRIVATE_KEY }} 15 | with: 16 | # 注意替换为你的 GitHub 源仓库地址 17 | source-repo: git@github.com:vant-ui/vant-demo.git 18 | # 注意替换为你的 Gitee 目标仓库地址 19 | destination-repo: git@gitee.com:vant-contrib/vant-demo.git 20 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.log* 2 | .cache 3 | .DS_Store 4 | .idea 5 | .vscode 6 | node_modules 7 | yarn.lock 8 | pnpm-lock.yaml 9 | @vant 10 | dist 11 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright 2016-present Youzan 2 | Copyright (c) Chen Jiahan and other contributors 3 | 4 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 5 | 6 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 7 | 8 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vant Demo 2 | 3 | English | [简体中文](./README.zh-CN.md) 4 | 5 | The current repository is the official example repository for Vant, which includes examples related to Vant, Vant Weapp, and Vant Cli. 6 | 7 | ## How to Use 8 | 9 | 1. First, clone the current repository to your local: 10 | 11 | ```bash 12 | git clone git@github.com:vant-ui/vant-demo.git 13 | ``` 14 | 15 | 2. Then, choose the example you need, such as the [Rsbuild](https://github.com/web-infra-dev/rsbuild) project example: 16 | 17 | ```bash 18 | cd vant/rsbuild 19 | ``` 20 | 21 | 3. Install the dependencies using `npm` or other package managers, and start the project: 22 | 23 | ```bash 24 | npm i 25 | npm run dev 26 | ``` 27 | 28 | 4. You can fork the current project or directly copy the code from the current project to use. 29 | 30 | ## Directory Structure 31 | 32 | ```bash 33 | ├── vant # Examples related to Vant 34 | │ ├── rsbuild Building applications using Vue 3, Vant 4, and Rsbuild 35 | │ ├── vite Building applications using Vue 3, Vant 4, and Vite 36 | │ ├── nuxt3 Building applications using Nuxt 3 and Vant 4 37 | │ ├── vue3-ts Building applications using Vue 3, Vant 4, TypeScript, Vite 38 | │ ├── cdn Importing Vant through CDN 39 | │ ├── rem Configuring rem adaptation 40 | │ ├── viewport Configuring viewport settings 41 | │ └── typescript Configuring TypeScript and importing on demand 42 | │ 43 | ├── vant-weapp # Examples related to Vant Weapp 44 | │ └── base Building mini-programs using Vant Weapp 45 | │ 46 | ├── react-vant # Examples related to React Vant 47 | │ └── rsbuild Building applications using React Vant and Rsbuild 48 | │ 49 | └── vant-cli # Examples related to Vant Cli 50 | └── base Building component libraries using Vant Cli 51 | ``` 52 | -------------------------------------------------------------------------------- /README.zh-CN.md: -------------------------------------------------------------------------------- 1 | # Vant Demo 2 | 3 | [English](./README.md) | 简体中文 4 | 5 | 当前仓库是 Vant 官方的示例仓库，包含 Vant、Vant Weapp 和 Vant Cli 相关的示例。 6 | 7 | ## 如何使用 8 | 9 | 1. 首先，克隆当前仓库到你的本地： 10 | 11 | ```bash 12 | git clone git@github.com:vant-ui/vant-demo.git 13 | ``` 14 | 15 | 2. 然后选择你需要的示例，比如 [Rsbuild](https://github.com/web-infra-dev/rsbuild) 项目示例： 16 | 17 | ```bash 18 | cd vant/rsbuild 19 | ``` 20 | 21 | 3. 通过 `npm` 或其他包管理器安装依赖，即可启动项目： 22 | 23 | ```bash 24 | npm i 25 | npm run dev 26 | ``` 27 | 28 | 4. 你可以 Fork 一份当前项目，也可以直接从当前项目拷贝代码来使用。 29 | 30 | ## 目录结构 31 | 32 | ```bash 33 | ├── vant # Vant 相关示例 34 | │ ├── rsbuild 使用 Vue 3、Vant 4、Rsbuild 搭建应用 35 | │ ├── vite 使用 Vue 3、Vant 4、Vite 搭建应用 36 | │ ├── nuxt3 使用 Nuxt 3、Vant 4 搭建应用 37 | │ ├── vue3-ts 使用 Vue 3、Vant 4、TS、Vite 搭建应用 38 | │ ├── cdn 通过 CDN 引入 Vant 39 | │ ├── rem 配置 rem 适配 40 | │ └── viewport 配置 viewport 配置 41 | │ 42 | ├── vant-weapp # Vant Weapp 相关示例 43 | │ └── base 使用 Vant Weapp 搭建小程序 44 | │ 45 | ├── react-vant # React Vant 相关示例 46 | │ └── rsbuild 使用 React Vant 和 Rsbuild 搭建应用 47 | │ 48 | └── vant-cli # Vant Cli 相关示例 49 | └── base 使用 Vant Cli 搭建组件库 50 | ``` 51 | -------------------------------------------------------------------------------- /react-vant/rsbuild/.gitignore: -------------------------------------------------------------------------------- 1 | # Local 2 | .DS_Store 3 | *.local 4 | *.log* 5 | 6 | # Dist 7 | node_modules 8 | dist/ 9 | 10 | # IDE 11 | .vscode/* 12 | !.vscode/extensions.json 13 | .idea 14 | -------------------------------------------------------------------------------- /react-vant/rsbuild/README.md: -------------------------------------------------------------------------------- 1 | # Rsbuild Project 2 | 3 | ## Setup 4 | 5 | Install the dependencies: 6 | 7 | ```bash 8 | pnpm install 9 | ``` 10 | 11 | ## Get Started 12 | 13 | Start the dev server: 14 | 15 | ```bash 16 | pnpm dev 17 | ``` 18 | 19 | Build the app for production: 20 | 21 | ```bash 22 | pnpm build 23 | ``` 24 | 25 | Preview the production build locally: 26 | 27 | ```bash 28 | pnpm preview 29 | ``` 30 | -------------------------------------------------------------------------------- /react-vant/rsbuild/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "rsbuild-react-ts", 3 | "private": true, 4 | "version": "1.0.0", 5 | "scripts": { 6 | "dev": "rsbuild dev --open", 7 | "build": "rsbuild build", 8 | "preview": "rsbuild preview" 9 | }, 10 | "dependencies": { 11 | "@react-vant/icons": "^0.0.10", 12 | "react": "^18.2.0", 13 | "react-dom": "^18.2.0", 14 | "react-vant": "^3.2.5" 15 | }, 16 | "devDependencies": { 17 | "@rsbuild/core": "^1.0.4", 18 | "@rsbuild/plugin-react": "^1.0.2", 19 | "@rsbuild/plugin-sass": "^1.0.1", 20 | "@types/react": "^18", 21 | "@types/react-dom": "^18", 22 | "typescript": "^5.2.2" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /react-vant/rsbuild/rsbuild.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "@rsbuild/core"; 2 | import { pluginReact } from "@rsbuild/plugin-react"; 3 | import { pluginSass } from "@rsbuild/plugin-sass"; 4 | 5 | export default defineConfig({ 6 | plugins: [pluginReact(), pluginSass()], 7 | }); 8 | -------------------------------------------------------------------------------- /react-vant/rsbuild/src/App.scss: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | padding: 0; 4 | margin: 0; 5 | font-size: 16px; 6 | font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif; 7 | background-color: #f8f8f8; 8 | -webkit-font-smoothing: antialiased; 9 | } 10 | 11 | p { 12 | margin: 0; 13 | } 14 | 15 | * { 16 | -webkit-font-smoothing: antialiased; 17 | -moz-osx-font-smoothing: grayscale; 18 | box-sizing: border-box; 19 | } 20 | 21 | .user { 22 | &-poster { 23 | width: 100%; 24 | height: 53vw; 25 | display: block; 26 | } 27 | 28 | &-group { 29 | margin-bottom: 15px; 30 | } 31 | 32 | &-links { 33 | padding: 15px 0; 34 | font-size: 12px; 35 | text-align: center; 36 | background-color: #fff; 37 | 38 | .rv-icon { 39 | font-size: 24px; 40 | margin-bottom: 4px; 41 | } 42 | 43 | .rv-flexitem { 44 | display: flex; 45 | flex-direction: column; 46 | align-items: center; 47 | } 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /react-vant/rsbuild/src/App.tsx: -------------------------------------------------------------------------------- 1 | import { Flex, CellGroup, Cell } from 'react-vant'; 2 | import { 3 | Records, 4 | Tosend, 5 | Logistics, 6 | PendingPayment, 7 | Points, 8 | GoldCoinO, 9 | GiftO, 10 | } from '@react-vant/icons'; 11 | import './App.scss'; 12 | 13 | const App = () => ( 14 |
15 |
16 |
17 | 21 | 22 | 23 | 24 | 待付款 25 | 26 | 27 | 28 | 待接单 29 | 30 | 31 | 32 | 待发货 33 | 34 | 35 | 36 | 已发货 37 | 38 | 39 | 40 | 41 | } title="全部订单" isLink /> 42 | 43 | 44 | 45 | } title="我的积分" isLink /> 46 | } title="我的优惠券" isLink /> 47 | } title="我收到的礼物" isLink /> 48 | 49 |
50 |
51 |
52 | ); 53 | 54 | export default App; 55 | -------------------------------------------------------------------------------- /react-vant/rsbuild/src/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /react-vant/rsbuild/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import App from './App'; 4 | 5 | const root = ReactDOM.createRoot(document.getElementById('root')!); 6 | root.render( 7 | 8 | 9 | , 10 | ); 11 | -------------------------------------------------------------------------------- /react-vant/rsbuild/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "lib": ["DOM", "ES2020"], 5 | "module": "ESNext", 6 | "jsx": "react-jsx", 7 | "strict": true, 8 | "skipLibCheck": true, 9 | "isolatedModules": true, 10 | "resolveJsonModule": true, 11 | "moduleResolution": "bundler" 12 | }, 13 | "include": ["src"] 14 | } 15 | -------------------------------------------------------------------------------- /vant-cli/README.md: -------------------------------------------------------------------------------- 1 | # Vant Cli 示例 2 | 3 | Vant Cli 的基础示例工程，示范通过 Vant Cli 快速搭建一套组件库。 4 | 5 | > 技术栈：Vue、Vant Cli 6 | -------------------------------------------------------------------------------- /vant-cli/base/.eslintignore: -------------------------------------------------------------------------------- 1 | es 2 | lib 3 | dist 4 | node_modules 5 | -------------------------------------------------------------------------------- /vant-cli/base/.gitignore: -------------------------------------------------------------------------------- 1 | *.log* 2 | .cache 3 | .DS_Store 4 | .idea 5 | .vscode 6 | 7 | # npm 8 | node_modules 9 | package-lock.json 10 | 11 | # dist file 12 | es 13 | lib 14 | site 15 | 16 | # test 17 | test/coverage 18 | -------------------------------------------------------------------------------- /vant-cli/base/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['@vant/cli/preset'] 3 | }; 4 | -------------------------------------------------------------------------------- /vant-cli/base/docs/home.md: -------------------------------------------------------------------------------- 1 | # 介绍 2 | 3 | ### 关于 4 | 5 | 这是一段组件库的介绍 6 | 7 | ### 特性 8 | 9 | - 特性一 10 | - 特性二 11 | - 特性三 12 | -------------------------------------------------------------------------------- /vant-cli/base/docs/quickstart.md: -------------------------------------------------------------------------------- 1 | # 快速上手 2 | 3 | ### 安装 4 | 5 | ```bash 6 | # 通过 npm 安装 7 | npm i vant -S 8 | 9 | # 通过 yarn 安装 10 | yarn add vant 11 | ``` 12 | 13 | ### 引入组件 14 | 15 | 这是一段引入组件的介绍 16 | -------------------------------------------------------------------------------- /vant-cli/base/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo-ui", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "lib/demo-ui.js", 6 | "style": "lib/demo-ui.css", 7 | "files": [ 8 | "lib", 9 | "es" 10 | ], 11 | "scripts": { 12 | "dev": "vant-cli dev", 13 | "test": "vant-cli test", 14 | "lint": "vant-cli lint", 15 | "build": "vant-cli build", 16 | "release": "vant-cli release", 17 | "test:coverage": "open test/coverage/index.html", 18 | "build-site": "vant-cli build-site && gh-pages -d site" 19 | }, 20 | "author": "", 21 | "license": "MIT", 22 | "lint-staged": { 23 | "*.{ts,tsx,js,jsx,vue}": [ 24 | "eslint --fix", 25 | "git add" 26 | ], 27 | "*.{vue,css,less,scss}": [ 28 | "stylelint --fix", 29 | "git add" 30 | ] 31 | }, 32 | "peerDependencies": { 33 | "vant": "^2.2.16", 34 | "vue": "^2.6.11", 35 | "vue-template-compiler": "^2.6.11" 36 | }, 37 | "devDependencies": { 38 | "@vant/cli": "^2.0.0", 39 | "babel-plugin-import": "^1.13.0", 40 | "vant": "^2.2.16", 41 | "vue": "^2.6.11", 42 | "vue-template-compiler": "^2.6.11" 43 | }, 44 | "eslintConfig": { 45 | "root": true, 46 | "extends": [ 47 | "@vant" 48 | ] 49 | }, 50 | "stylelint": { 51 | "extends": [ 52 | "@vant/stylelint-config" 53 | ] 54 | }, 55 | "prettier": { 56 | "singleQuote": true 57 | }, 58 | "browserslist": [ 59 | "Android >= 4.0", 60 | "iOS >= 7" 61 | ] 62 | } 63 | -------------------------------------------------------------------------------- /vant-cli/base/src/my-button/README.md: -------------------------------------------------------------------------------- 1 | # MyButton 按钮 2 | 3 | ### 介绍 4 | 5 | MyButton 是一个示例按钮组件 6 | 7 | ### 引入 8 | 9 | ``` javascript 10 | import Vue from 'vue'; 11 | import { MyButton } from 'demo-ui'; 12 | 13 | Vue.use(MyButton); 14 | ``` 15 | 16 | ## 代码演示 17 | 18 | ### 基础用法 19 | 20 | ```html 21 | 22 | ``` 23 | 24 | ### 自定义颜色 25 | 26 | ```html 27 | 28 | ``` 29 | 30 | ## API 31 | 32 | ### Props 33 | 34 | | 参数 | 说明 | 类型 | 默认值 | 版本 | 35 | |------|------|------|------|------| 36 | | type | 按钮类型 | *string* | `primary` | - | 37 | | color | 按钮颜色 | *string* | - | 1.0.0 | 38 | 39 | ### Events 40 | 41 | | 事件名 | 说明 | 回调参数 | 42 | |------|------|------| 43 | | click | 点击时触发 | event: Event | 44 | 45 | ### Slots 46 | 47 | | 名称 | 说明 | 48 | |------|------| 49 | | default | 默认插槽 | 50 | -------------------------------------------------------------------------------- /vant-cli/base/src/my-button/demo/index.vue: -------------------------------------------------------------------------------- 1 | 12 | -------------------------------------------------------------------------------- /vant-cli/base/src/my-button/index.less: -------------------------------------------------------------------------------- 1 | .test { 2 | color: red; 3 | } 4 | -------------------------------------------------------------------------------- /vant-cli/base/src/my-button/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 33 | 34 | 40 | -------------------------------------------------------------------------------- /vant-cli/base/src/my-button/test/__snapshots__/index.spec.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`render demo button 1`] = ``; 4 | -------------------------------------------------------------------------------- /vant-cli/base/src/my-button/test/index.spec.js: -------------------------------------------------------------------------------- 1 | import { mount } from '@vue/test-utils'; 2 | import DemoButton from '..'; 3 | 4 | test('render demo button', () => { 5 | const wrapper = mount(DemoButton); 6 | expect(wrapper).toMatchSnapshot(); 7 | }); 8 | -------------------------------------------------------------------------------- /vant-cli/base/src/my-button/utils.ts: -------------------------------------------------------------------------------- 1 | export function foo() { 2 | return 'bar'; 3 | } 4 | -------------------------------------------------------------------------------- /vant-cli/base/src/my-cell/README.md: -------------------------------------------------------------------------------- 1 | # MyCell 单元格 2 | 3 | ### 介绍 4 | 5 | MyCell 是一个示例单元格组件 6 | 7 | ### 引入 8 | 9 | ``` javascript 10 | import Vue from 'vue'; 11 | import { MyCell } from 'demo-ui'; 12 | 13 | Vue.use(MyCell); 14 | ``` 15 | 16 | ## 代码演示 17 | 18 | ### 基础用法 19 | 20 | ```html 21 | 22 | ``` 23 | 24 | ### 显示箭头 25 | 26 | ```html 27 | 28 | ``` 29 | 30 | ## API 31 | 32 | ### Props 33 | 34 | | 参数 | 说明 | 类型 | 默认值 | 版本 | 35 | |------|------|------|------|------| 36 | | title | 单元格标题 | *string* | `-` | - | 37 | | is-link | 是否为可点击单元格 | *boolean* | `false` | - | 38 | 39 | ### Events 40 | 41 | | 事件名 | 说明 | 回调参数 | 42 | |------|------|------| 43 | | click | 点击时触发 | event: Event | 44 | 45 | ### Slots 46 | 47 | | 名称 | 说明 | 48 | |------|------| 49 | | default | 默认插槽 | 50 | -------------------------------------------------------------------------------- /vant-cli/base/src/my-cell/demo/index.vue: -------------------------------------------------------------------------------- 1 | 12 | -------------------------------------------------------------------------------- /vant-cli/base/src/my-cell/index.jsx: -------------------------------------------------------------------------------- 1 | import { Cell } from 'vant'; 2 | 3 | export default { 4 | name: 'my-cell', 5 | 6 | props: { 7 | title: String, 8 | isLink: Boolean 9 | }, 10 | 11 | render() { 12 | return ; 13 | } 14 | }; 15 | -------------------------------------------------------------------------------- /vant-cli/base/src/my-cell/index.less: -------------------------------------------------------------------------------- 1 | .my-cell { 2 | padding: 16px; 3 | font-weight: 500; 4 | 5 | .van-cell__value { 6 | color: #333; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /vant-cli/base/src/my-icon/README.md: -------------------------------------------------------------------------------- 1 | # MyIcon 图标 2 | 3 | ### 介绍 4 | 5 | MyIcon 是一个示例图标组件 6 | 7 | ### 引入 8 | 9 | ``` javascript 10 | import Vue from 'vue'; 11 | import { MyIcon } from 'demo-ui'; 12 | 13 | Vue.use(MyIcon); 14 | ``` 15 | 16 | ## 代码演示 17 | 18 | ### 基础用法 19 | 20 | ```html 21 | 22 | ``` 23 | 24 | ### 显示箭头 25 | 26 | ```html 27 | 28 | ``` 29 | 30 | ## API 31 | 32 | ### Props 33 | 34 | | 参数 | 说明 | 类型 | 默认值 | 版本 | 35 | |------|------|------|------|------| 36 | | name | 图标名称 | *string* | `-` | - | 37 | | dot | 是否展示红点 | *boolean* | `false` | - | 38 | -------------------------------------------------------------------------------- /vant-cli/base/src/my-icon/demo/index.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 20 | -------------------------------------------------------------------------------- /vant-cli/base/src/my-icon/index.jsx: -------------------------------------------------------------------------------- 1 | import { Icon } from 'vant'; 2 | 3 | export default { 4 | name: 'my-icon', 5 | 6 | props: { 7 | name: String, 8 | dot: Boolean 9 | }, 10 | 11 | render() { 12 | return ; 13 | } 14 | }; 15 | -------------------------------------------------------------------------------- /vant-cli/base/src/my-icon/index.less: -------------------------------------------------------------------------------- 1 | .my-icon { 2 | font-size: 32px; 3 | } 4 | -------------------------------------------------------------------------------- /vant-cli/base/src/style/base.less: -------------------------------------------------------------------------------- 1 | @import "./var.less"; 2 | 3 | body { 4 | color: @text-color; 5 | } 6 | -------------------------------------------------------------------------------- /vant-cli/base/src/style/var.less: -------------------------------------------------------------------------------- 1 | @primary-color: #f44; 2 | @text-color: #4a4a4a; 3 | -------------------------------------------------------------------------------- /vant-cli/base/vant.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | // 组件库名称 3 | name: 'demo-ui', 4 | // 构建配置 5 | build: { 6 | site: { 7 | publicPath: '/demo-ui/' 8 | } 9 | }, 10 | // 文档站点配置 11 | site: { 12 | // 标题 13 | title: 'Demo UI', 14 | // 图标 15 | logo: 'https://img.yzcdn.cn/vant/logo.png', 16 | // 描述 17 | description: '示例组件库', 18 | // 导航 19 | links: [ 20 | { 21 | logo: 'https://b.yzcdn.cn/vant/logo/github.svg', 22 | url: 'https://github.com/vant-ui/vant-demo' 23 | } 24 | ], 25 | // 左侧导航 26 | nav: [ 27 | { 28 | title: '开发指南', 29 | items: [ 30 | { 31 | path: 'home', 32 | title: '介绍' 33 | }, 34 | { 35 | path: 'quickstart', 36 | title: '快速上手' 37 | } 38 | ] 39 | }, 40 | { 41 | title: '基础组件', 42 | items: [ 43 | { 44 | path: 'my-button', 45 | title: 'MyButton 按钮' 46 | }, 47 | { 48 | path: 'my-icon', 49 | title: 'MyIcon 图标' 50 | } 51 | ] 52 | }, 53 | { 54 | title: '展示组件', 55 | items: [ 56 | { 57 | path: 'my-cell', 58 | title: 'MyCell 单元格' 59 | } 60 | ] 61 | } 62 | ] 63 | } 64 | }; 65 | -------------------------------------------------------------------------------- /vant-weapp/README.md: -------------------------------------------------------------------------------- 1 | # Vant Weapp 示例 2 | 3 | ## 目录 4 | 5 | ### base 6 | 7 | 示范了如何用 Vant Weapp 搭建几个简单的电商小程序页面，包含如下功能： 8 | 9 | - 基于 Vant Weapp 搭建小程序应用 10 | - 样式覆盖方案 11 | 12 | > 技术栈：Vant Weapp 13 | 14 | ## 预览 15 | 16 | demos 17 | 18 | ## 开发命令 19 | 20 | ```bash 21 | # 安装依赖 22 | # 注意：请切换到对应的子目录下安装 23 | cd base 24 | npm install 25 | 26 | # 打开微信开发者工具，导入示例工程，点击『工具』 -> 『构建 npm』，并勾选『使用 npm 模块』选项即可 27 | ``` 28 | -------------------------------------------------------------------------------- /vant-weapp/base/app.js: -------------------------------------------------------------------------------- 1 | 2 | App({ 3 | 4 | }) -------------------------------------------------------------------------------- /vant-weapp/base/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": [ 3 | "pages/goods/index", 4 | "pages/user/index", 5 | "pages/cart/index" 6 | ], 7 | "window": { 8 | "backgroundTextStyle": "light", 9 | "navigationBarBackgroundColor": "#fff", 10 | "navigationBarTitleText": "WeChat", 11 | "navigationBarTextStyle": "black" 12 | }, 13 | "sitemapLocation": "sitemap.json" 14 | } -------------------------------------------------------------------------------- /vant-weapp/base/app.wxss: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /vant-weapp/base/icons/cart-selected.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vant-ui/vant-demo/c28517971fb8b0cb77fae8ee3272b7d525c7bd0a/vant-weapp/base/icons/cart-selected.png -------------------------------------------------------------------------------- /vant-weapp/base/icons/cart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vant-ui/vant-demo/c28517971fb8b0cb77fae8ee3272b7d525c7bd0a/vant-weapp/base/icons/cart.png -------------------------------------------------------------------------------- /vant-weapp/base/icons/home-selected.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vant-ui/vant-demo/c28517971fb8b0cb77fae8ee3272b7d525c7bd0a/vant-weapp/base/icons/home-selected.png -------------------------------------------------------------------------------- /vant-weapp/base/icons/home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vant-ui/vant-demo/c28517971fb8b0cb77fae8ee3272b7d525c7bd0a/vant-weapp/base/icons/home.png -------------------------------------------------------------------------------- /vant-weapp/base/icons/usercenter-selected.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vant-ui/vant-demo/c28517971fb8b0cb77fae8ee3272b7d525c7bd0a/vant-weapp/base/icons/usercenter-selected.png -------------------------------------------------------------------------------- /vant-weapp/base/icons/usercenter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vant-ui/vant-demo/c28517971fb8b0cb77fae8ee3272b7d525c7bd0a/vant-weapp/base/icons/usercenter.png -------------------------------------------------------------------------------- /vant-weapp/base/jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2015", 4 | "module": "commonjs" 5 | } 6 | } -------------------------------------------------------------------------------- /vant-weapp/base/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vant-weapp-demo", 3 | "version": "1.0.0", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "@vant/weapp": { 8 | "version": "1.0.0", 9 | "resolved": "http://registry.npm.qima-inc.com/@vant/weapp/download/@vant/weapp-1.0.0.tgz", 10 | "integrity": "sha1-ewRufWz/0so3gVeYgQ8fueCTdZY=" 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /vant-weapp/base/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vant-weapp-demo", 3 | "version": "1.0.0", 4 | "description": "Collection of vant-weapp demos.", 5 | "main": "app.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "@vant/weapp": "^1.0.0" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /vant-weapp/base/pages/cart/index.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data: { 3 | checkedGoods: ['1', '2', '3'], 4 | goods: [ 5 | { 6 | id: '1', 7 | title: '进口香蕉', 8 | desc: '约250g，2根', 9 | price: 200, 10 | num: 1, 11 | thumb: 12 | 'https://img.yzcdn.cn/public_files/2017/10/24/2f9a36046449dafb8608e99990b3c205.jpeg', 13 | }, 14 | { 15 | id: '2', 16 | title: '陕西蜜梨', 17 | desc: '约600g', 18 | price: 690, 19 | num: 1, 20 | thumb: 21 | 'https://img.yzcdn.cn/public_files/2017/10/24/f6aabd6ac5521195e01e8e89ee9fc63f.jpeg', 22 | }, 23 | { 24 | id: '3', 25 | title: '美国伽力果', 26 | desc: '约680g/3个', 27 | price: 2680, 28 | num: 1, 29 | thumb: 30 | 'https://img.yzcdn.cn/public_files/2017/10/24/320454216bbe9e25c7651e1fa51b31fd.jpeg', 31 | }, 32 | ], 33 | totalPrice: 0, 34 | 35 | }, 36 | onLoad: function() { 37 | const { checkedGoods, goods } = this.data; 38 | const submitBarText = `结算`; 39 | const totalPrice = goods.reduce( 40 | (total, item) => 41 | total + (checkedGoods.indexOf(item.id) !== -1 ? item.price : 0), 42 | 0, 43 | ); 44 | goods.forEach(item => { 45 | item.formatPrice = (item.price / 100).toFixed(2); 46 | }); 47 | this.setData({ 48 | totalPrice, 49 | submitBarText, 50 | goods, 51 | }); 52 | }, 53 | 54 | onChange(event) { 55 | const { goods } = this.data; 56 | const checkedGoods = event.detail; 57 | const totalPrice = goods.reduce( 58 | (total, item) => 59 | total + (checkedGoods.indexOf(item.id) !== -1 ? item.price : 0), 60 | 0, 61 | ); 62 | const submitBarText = checkedGoods.length ? `结算`: '结算'; 63 | this.setData({ 64 | checkedGoods, 65 | totalPrice, 66 | submitBarText, 67 | }); 68 | }, 69 | 70 | onSubmit() { 71 | wx.showToast({ 72 | title: '点击结算', 73 | icon: 'none' 74 | }); 75 | }, 76 | }); -------------------------------------------------------------------------------- /vant-weapp/base/pages/cart/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "购物车", 3 | "usingComponents": { 4 | "van-checkbox": "/@vant/weapp/dist/checkbox/index", 5 | "van-checkbox-group": "/@vant/weapp/dist/checkbox-group/index", 6 | "van-submit-bar": "/@vant/weapp/dist/submit-bar/index", 7 | "van-card": "/@vant/weapp/dist/card/index" 8 | } 9 | } -------------------------------------------------------------------------------- /vant-weapp/base/pages/cart/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 7 | 13 | 20 | 21 | 22 | 28 | -------------------------------------------------------------------------------- /vant-weapp/base/pages/cart/index.wxss: -------------------------------------------------------------------------------- 1 | .card-goods { 2 | padding: 10px 0; 3 | background-color: #fff; 4 | } 5 | 6 | .card-goods__item { 7 | position: relative; 8 | background-color: #fafafa; 9 | --checkbox-checked-icon-color: #ee0a24; 10 | } 11 | 12 | .card-goods__item .van-checkbox__label { 13 | width: 100%; 14 | height: auto; 15 | padding: 0 10px 0 15px; 16 | box-sizing: border-box; 17 | } 18 | 19 | .card-goods__item .van-checkbox__icon { 20 | top: 50%; 21 | left: 10px; 22 | z-index: 1; 23 | position: absolute; 24 | margin-top: -10px; 25 | } 26 | 27 | .card-goods__item .van-card__price { 28 | color: #f44; 29 | } -------------------------------------------------------------------------------- /vant-weapp/base/pages/goods/index.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data: { 3 | goods: { 4 | title: '美国伽力果（约680g/3个）', 5 | price: 2680, 6 | formatPrice: '', 7 | express: '免运费', 8 | remain: 19, 9 | thumb: 10 | 'https://img.yzcdn.cn/public_files/2017/10/24/e5a5a02309a41f9f5def56684808d9ae.jpeg', 11 | }, 12 | }, 13 | onLoad() { 14 | const { goods } = this.data; 15 | const formatPrice = `¥${(goods.price / 100).toFixed(2)}`; 16 | this.setData({ 17 | goods: { 18 | ...goods, 19 | formatPrice, 20 | }, 21 | }); 22 | }, 23 | 24 | onClickCart() { 25 | wx.navigateTo({ 26 | url: '/pages/cart/index', 27 | success: () => {}, 28 | error: () => { 29 | wx.showToast({ 30 | icon: 'none', 31 | title: '打开购物车失败', 32 | }); 33 | }, 34 | }); 35 | }, 36 | 37 | onClickUser() { 38 | wx.navigateTo({ 39 | url: '/pages/user/index', 40 | success: () => {}, 41 | error: () => { 42 | wx.showToast({ 43 | icon: 'none', 44 | title: '打开个人中心失败', 45 | }); 46 | }, 47 | }); 48 | }, 49 | 50 | onClickButton() { 51 | wx.showToast({ 52 | title: '暂无后续逻辑~', 53 | icon: 'none', 54 | }); 55 | }, 56 | 57 | sorry() { 58 | wx.showToast({ 59 | title: '暂无后续逻辑~', 60 | icon: 'none', 61 | }); 62 | }, 63 | }); -------------------------------------------------------------------------------- /vant-weapp/base/pages/goods/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "商品详情", 3 | "usingComponents": { 4 | "van-image": "/@vant/weapp/dist/image/index", 5 | "van-tag":"/@vant/weapp/dist/tag/index", 6 | "van-cell": "/@vant/weapp/dist/cell/index", 7 | "van-cell-group": "/@vant/weapp/dist/cell-group/index", 8 | "van-goods-action": "/@vant/weapp/dist/goods-action/index", 9 | "van-goods-action-icon": "/@vant/weapp/dist/goods-action-icon/index", 10 | "van-goods-action-button": "/@vant/weapp/dist/goods-action-button/index", 11 | "van-row": "/@vant/weapp/dist/row/index", 12 | "van-col": "/@vant/weapp/dist/col/index" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /vant-weapp/base/pages/goods/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 8 | 9 | 10 | 15 | 16 | 运费：{{ goods.express }} 17 | 剩余：{{ goods.remain }} 18 | 19 | 20 | 21 | 22 | 23 | 24 | 有赞的店 25 | 官方 26 | 27 | 28 | 29 | 30 | 31 | 32 | 37 | 42 | 47 | 51 | 52 | -------------------------------------------------------------------------------- /vant-weapp/base/pages/goods/index.wxss: -------------------------------------------------------------------------------- 1 | 2 | .goods-img { 3 | width: 100%; 4 | display: block; 5 | } 6 | 7 | .goods-message .van-cell__title { 8 | font-size: 16px; 9 | } 10 | 11 | .goods-message .van-cell__label { 12 | color: #f44; 13 | } 14 | 15 | .goods-express { 16 | color: #999; 17 | font-size: 12px; 18 | } 19 | 20 | .goods-express .van-cell { 21 | color: #999; 22 | font-size: 12px; 23 | padding: 5px 15px; 24 | } 25 | 26 | .goods-express .van-col { 27 | text-align: left; 28 | } 29 | 30 | .goods-cell-group { 31 | margin: 0 0; 32 | } 33 | 34 | .goods-cell-group .van-cell__value { 35 | color: #999; 36 | } 37 | 38 | .goods-tag { 39 | margin-left: 5px; 40 | } 41 | 42 | .goods-action { 43 | position: relative!important; 44 | } -------------------------------------------------------------------------------- /vant-weapp/base/pages/user/index.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | }); 3 | -------------------------------------------------------------------------------- /vant-weapp/base/pages/user/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "会员中心", 3 | "usingComponents": { 4 | "van-cell": "/@vant/weapp/dist/cell/index", 5 | "van-cell-group": "/@vant/weapp/dist/cell-group/index", 6 | "van-icon": "/@vant/weapp/dist/icon/index", 7 | "van-row": "/@vant/weapp/dist/row/index", 8 | "van-col": "/@vant/weapp/dist/col/index" 9 | } 10 | } -------------------------------------------------------------------------------- /vant-weapp/base/pages/user/index.wxml: -------------------------------------------------------------------------------- 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 | 31 | -------------------------------------------------------------------------------- /vant-weapp/base/pages/user/index.wxss: -------------------------------------------------------------------------------- 1 | .user-poster { 2 | width: 100%; 3 | height: 53vw; 4 | display: block; 5 | } 6 | 7 | .user-links { 8 | padding: 15px 0; 9 | font-size: 12px; 10 | text-align: center; 11 | background-color: #fff; 12 | } 13 | 14 | .user-links .van-icon { 15 | display: block; 16 | font-size: 24px; 17 | } 18 | 19 | .user-links .van-row { 20 | padding: 15px 0; 21 | } -------------------------------------------------------------------------------- /vant-weapp/base/project.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "项目配置文件", 3 | "packOptions": { 4 | "ignore": [] 5 | }, 6 | "setting": { 7 | "urlCheck": true, 8 | "es6": true, 9 | "postcss": true, 10 | "minified": true, 11 | "newFeature": true, 12 | "autoAudits": false, 13 | "coverView": true 14 | }, 15 | "compileType": "miniprogram", 16 | "libVersion": "2.9.4", 17 | "appid": "wx5a948d0ece112309", 18 | "projectname": "vant-demo", 19 | "debugOptions": { 20 | "hidedInDevtools": [] 21 | }, 22 | "isGameTourist": false, 23 | "simulatorType": "wechat", 24 | "simulatorPluginLibVersion": {}, 25 | "condition": { 26 | "search": { 27 | "current": -1, 28 | "list": [] 29 | }, 30 | "conversation": { 31 | "current": -1, 32 | "list": [] 33 | }, 34 | "game": { 35 | "currentL": -1, 36 | "list": [] 37 | }, 38 | "miniprogram": { 39 | "current": -1, 40 | "list": [] 41 | } 42 | } 43 | } -------------------------------------------------------------------------------- /vant-weapp/base/sitemap.json: -------------------------------------------------------------------------------- 1 | { 2 | "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html", 3 | "rules": [{ 4 | "action": "allow", 5 | "page": "*" 6 | }] 7 | } -------------------------------------------------------------------------------- /vant/README.md: -------------------------------------------------------------------------------- 1 | # Vant 示例 2 | 3 | 本目录下包含基于 Vue Cli 搭建 Vant 的相关示例，其中 cdn、vue2、vue3 目录为基础用法示例，其余目录为进阶配置的示例。 4 | 5 | ## 目录 6 | 7 | ### cdn 8 | 9 | `cdn` 目录下包含了通过 CDN 引入 Vant 的示例，在浏览器内打开 `cdn/index.html` 文件即可查看效果。 10 | 11 | > 技术栈：Vue 3、Vant 3 12 | 13 | ### rsbuild (推荐) 14 | 15 | `rsbuild` 目录示范了如何用 [Rsbuild](https://github.com/web-infra-dev/rsbuild) 搭建工程。 16 | 17 | > 技术栈：Vue 3、Vant 4、Rsbuild 18 | 19 | ### vite 20 | 21 | `vite` 目录示范了如何用 `Vite` 搭建工程。 22 | 23 | > 技术栈：Vue 3、Vant 4、Vite 24 | 25 | ### nuxt3 26 | 27 | 基于 `nuxt 3` 的示例工程。 28 | 29 | > 技术栈：Vue 3、Vant 4、Nuxt 3 30 | 31 | ### vue3 32 | 33 | `vue3` 目录示范了如何用 Vue 3 和 Vant 4 搭建工程。 34 | 35 | > 技术栈：Vue 3、Vant 4、Vue Cli 36 | 37 | ### vue3-ts 38 | 39 | `vue3-ts` 目录示范了如何用 Vue 3 + ts 和 Vant 4 搭建工程。 40 | 41 | > 技术栈：Vue 3、Vant 4、vite、ts、pnpm 42 | 43 | ## 废弃 44 | 45 | 下面是一些基于 Vue 2 的旧版 demo，仅供参考。 46 | 47 | ### vue2 48 | 49 | `vue2` 目录示范了如何用 Vue 2 和 Vant 2 搭建几个简单的电商页面，包含如下功能： 50 | 51 | - 基于 Vant 搭建 52 | - 基于 vue-router 的单页面应用 53 | - 组件按需引入 54 | - 视图异步加载 55 | 56 | > 技术栈：Vue 2、Vant 2、Vue Cli、Vue Router 57 | 58 | ### rem 59 | 60 | `rem` 工程在 `vue2` 工程的基础上增加了移动端 rem 适配的配置。 61 | 62 | > 技术栈：Vue 2、Vant 2、Vue Cli、Vue Router 63 | 64 | ### viewport 65 | 66 | `viewport` 工程在 `vue2` 工程的基础上增加了移动端 vw/vh 适配的配置。 67 | 68 | > 技术栈：Vue 2、Vant 2、Vue Cli、Vue Router 69 | 70 | ## 预览 71 | 72 | demos 73 | 74 | ## 开发命令 75 | 76 | ```bash 77 | # 安装依赖 78 | # 注意：请切换到对应的子目录下安装 79 | cd base 80 | npm install 81 | 82 | # 本地开发 83 | # 通过 localhost:8080 访问页面 84 | npm run serve 85 | 86 | # 生产环境构建 87 | npm run build 88 | 89 | # 代码格式校验 90 | npm run lint 91 | ``` 92 | -------------------------------------------------------------------------------- /vant/cdn/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | Vant CDN Demo 11 | 12 | 13 | 17 | 18 | 19 | 55 | 56 | 57 | 58 |
59 | 60 |
61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 73 | 74 | 75 | 79 | 80 | 81 | 82 | 83 | 84 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 客服 95 | 96 | 97 | 购物车 98 | 99 | 100 | 加入购物车 101 | 102 | 103 | 立即购买 104 | 105 | 106 |
107 |
108 | 109 | 110 | 111 | 112 | 113 | 165 | 166 | 167 | -------------------------------------------------------------------------------- /vant/nuxt3/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.log 3 | .nuxt 4 | nuxt.d.ts 5 | .output 6 | .env -------------------------------------------------------------------------------- /vant/nuxt3/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "proseWrap": "never" 4 | } 5 | -------------------------------------------------------------------------------- /vant/nuxt3/README.md: -------------------------------------------------------------------------------- 1 | # Nuxt 3 Minimal Starter 2 | 3 | Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more. 4 | 5 | ## Setup 6 | 7 | Make sure to install the dependencies: 8 | 9 | ```bash 10 | # yarn 11 | yarn install 12 | 13 | # npm 14 | npm install 15 | 16 | # pnpm 17 | pnpm install --shamefully-hoist 18 | ``` 19 | 20 | ## Development Server 21 | 22 | Start the development server on http://localhost:3000 23 | 24 | ```bash 25 | npm run dev 26 | ``` 27 | 28 | ## Production 29 | 30 | Build the application for production: 31 | 32 | ```bash 33 | npm run build 34 | ``` 35 | 36 | Locally preview production build: 37 | 38 | ```bash 39 | npm run preview 40 | ``` 41 | 42 | Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information. 43 | -------------------------------------------------------------------------------- /vant/nuxt3/app.vue: -------------------------------------------------------------------------------- 1 | 37 | 38 | 70 | -------------------------------------------------------------------------------- /vant/nuxt3/nuxt.config.ts: -------------------------------------------------------------------------------- 1 | // https://nuxt.com/docs/api/configuration/nuxt-config 2 | export default defineNuxtConfig({ 3 | modules: ['@vant/nuxt'], 4 | }); 5 | -------------------------------------------------------------------------------- /vant/nuxt3/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "scripts": { 4 | "build": "nuxt build", 5 | "dev": "nuxt dev", 6 | "generate": "nuxt generate", 7 | "preview": "nuxt preview", 8 | "postinstall": "nuxt prepare" 9 | }, 10 | "devDependencies": { 11 | "less": "^4.1.3", 12 | "nuxt": "^3.2.0" 13 | }, 14 | "dependencies": { 15 | "@vant/nuxt": "^1.0.0", 16 | "vant": "^4.0.0", 17 | "vue": "^3.2.47" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /vant/nuxt3/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | // https://nuxt.com/docs/guide/concepts/typescript 3 | "extends": "./.nuxt/tsconfig.json" 4 | } 5 | -------------------------------------------------------------------------------- /vant/rem/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['@vue/cli-plugin-babel/preset'], 3 | plugins: [ 4 | [ 5 | 'import', 6 | { libraryName: 'vant', libraryDirectory: 'es', style: true }, 7 | 'vant' 8 | ] 9 | ] 10 | }; 11 | -------------------------------------------------------------------------------- /vant/rem/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vant-demo", 3 | "version": "1.0.0", 4 | "description": "Collection of vant demos.", 5 | "author": "neverland ", 6 | "license": "MIT", 7 | "scripts": { 8 | "serve": "vue-cli-service serve", 9 | "build": "vue-cli-service build", 10 | "lint": "vue-cli-service lint" 11 | }, 12 | "dependencies": { 13 | "amfe-flexible": "^2.2.1", 14 | "core-js": "^3.4.3", 15 | "vant": "^2.2.0", 16 | "vue": "^2.6.10", 17 | "vue-router": "^3.0.6" 18 | }, 19 | "devDependencies": { 20 | "@vue/cli-plugin-babel": "^4.1.1", 21 | "@vue/cli-plugin-eslint": "^4.1.1", 22 | "@vue/cli-service": "^4.1.1", 23 | "babel-eslint": "^10.0.3", 24 | "babel-plugin-import": "^1.12.0", 25 | "eslint": "^4.19.1", 26 | "eslint-plugin-vue": "^6.0.1", 27 | "less": "^3.8.1", 28 | "less-loader": "^5.0.0", 29 | "postcss-pxtorem": "^5.0.0", 30 | "vue-template-compiler": "^2.6.10" 31 | }, 32 | "eslintConfig": { 33 | "root": true, 34 | "env": { 35 | "node": true 36 | }, 37 | "extends": [ 38 | "plugin:vue/essential", 39 | "eslint:recommended" 40 | ], 41 | "rules": {}, 42 | "parserOptions": { 43 | "parser": "babel-eslint" 44 | } 45 | }, 46 | "postcss": { 47 | "plugins": { 48 | "autoprefixer": {} 49 | } 50 | }, 51 | "browserslist": [ 52 | "Android >= 4.0", 53 | "iOS >= 8" 54 | ] 55 | } 56 | -------------------------------------------------------------------------------- /vant/rem/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vant-ui/vant-demo/c28517971fb8b0cb77fae8ee3272b7d525c7bd0a/vant/rem/public/favicon.ico -------------------------------------------------------------------------------- /vant/rem/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | vant-demo 9 | 10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /vant/rem/src/main.js: -------------------------------------------------------------------------------- 1 | import 'amfe-flexible'; 2 | import '../../vue2/src/main'; 3 | -------------------------------------------------------------------------------- /vant/rem/vue.config.js: -------------------------------------------------------------------------------- 1 | const autoprefixer = require('autoprefixer'); 2 | const pxtorem = require('postcss-pxtorem'); 3 | 4 | module.exports = { 5 | outputDir: 'dist', 6 | publicPath: process.env.NODE_ENV === 'production' ? '/vant-demo/' : '/', 7 | css: { 8 | loaderOptions: { 9 | postcss: { 10 | plugins: [ 11 | autoprefixer(), 12 | pxtorem({ 13 | rootValue: 37.5, 14 | propList: ['*'] 15 | }) 16 | ] 17 | } 18 | } 19 | } 20 | }; 21 | -------------------------------------------------------------------------------- /vant/rsbuild/.gitignore: -------------------------------------------------------------------------------- 1 | # Local 2 | .DS_Store 3 | *.local 4 | *.log* 5 | 6 | # Dist 7 | node_modules 8 | dist/ 9 | 10 | # IDE 11 | .vscode/* 12 | !.vscode/extensions.json 13 | .idea 14 | -------------------------------------------------------------------------------- /vant/rsbuild/README.md: -------------------------------------------------------------------------------- 1 | # Rsbuild Project 2 | 3 | https://github.com/web-infra-dev/rsbuild 4 | 5 | ## Setup 6 | 7 | Install the dependencies: 8 | 9 | ```bash 10 | pnpm install 11 | ``` 12 | 13 | ## Get Started 14 | 15 | Start the dev server: 16 | 17 | ```bash 18 | pnpm dev 19 | ``` 20 | 21 | Build the app for production: 22 | 23 | ```bash 24 | pnpm build 25 | ``` 26 | 27 | Preview the production build locally: 28 | 29 | ```bash 30 | pnpm preview 31 | ``` 32 | -------------------------------------------------------------------------------- /vant/rsbuild/auto-imports.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | /* prettier-ignore */ 3 | // @ts-nocheck 4 | // noinspection JSUnusedGlobalSymbols 5 | // Generated by unplugin-auto-import 6 | export {} 7 | declare global { 8 | const showToast: typeof import('vant/es')['showToast'] 9 | } 10 | -------------------------------------------------------------------------------- /vant/rsbuild/components.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | /* prettier-ignore */ 3 | // @ts-nocheck 4 | // Generated by unplugin-vue-components 5 | // Read more: https://github.com/vuejs/core/pull/3399 6 | export {} 7 | 8 | declare module 'vue' { 9 | export interface GlobalComponents { 10 | VanActionBar: typeof import('vant/es')['ActionBar'] 11 | VanActionBarButton: typeof import('vant/es')['ActionBarButton'] 12 | VanActionBarIcon: typeof import('vant/es')['ActionBarIcon'] 13 | VanCell: typeof import('vant/es')['Cell'] 14 | VanCellGroup: typeof import('vant/es')['CellGroup'] 15 | VanCol: typeof import('vant/es')['Col'] 16 | VanSwipe: typeof import('vant/es')['Swipe'] 17 | VanSwipeItem: typeof import('vant/es')['SwipeItem'] 18 | VanTag: typeof import('vant/es')['Tag'] 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /vant/rsbuild/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "rsbuild-vue3-ts", 3 | "private": true, 4 | "version": "1.0.0", 5 | "scripts": { 6 | "dev": "rsbuild dev --open", 7 | "build": "rsbuild build", 8 | "preview": "rsbuild preview" 9 | }, 10 | "dependencies": { 11 | "vant": "^4.8.2", 12 | "vue": "^3.4.12" 13 | }, 14 | "devDependencies": { 15 | "@rsbuild/core": "^1.0.4", 16 | "@rsbuild/plugin-less": "^1.0.1", 17 | "@rsbuild/plugin-vue": "^1.0.1", 18 | "@vant/auto-import-resolver": "^1.1.0", 19 | "typescript": "^5.3.3", 20 | "unplugin-auto-import": "^0.17.5", 21 | "unplugin-vue-components": "^0.26.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /vant/rsbuild/rsbuild.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "@rsbuild/core"; 2 | import { pluginVue } from "@rsbuild/plugin-vue"; 3 | import { pluginLess } from "@rsbuild/plugin-less"; 4 | import AutoImport from "unplugin-auto-import/rspack"; 5 | import Components from "unplugin-vue-components/rspack"; 6 | import { VantResolver } from "@vant/auto-import-resolver"; 7 | 8 | export default defineConfig({ 9 | plugins: [pluginVue(), pluginLess()], 10 | tools: { 11 | rspack: { 12 | plugins: [ 13 | AutoImport({ 14 | resolvers: [VantResolver()], 15 | }), 16 | Components({ 17 | resolvers: [VantResolver()], 18 | }), 19 | ], 20 | }, 21 | }, 22 | }); 23 | -------------------------------------------------------------------------------- /vant/rsbuild/src/App.vue: -------------------------------------------------------------------------------- 1 | 54 | 55 | 81 | 82 | 122 | -------------------------------------------------------------------------------- /vant/rsbuild/src/index.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue'; 2 | import App from './App.vue'; 3 | 4 | const app = createApp(App); 5 | app.mount('#root'); 6 | -------------------------------------------------------------------------------- /vant/rsbuild/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "lib": ["DOM", "ES2020"], 5 | "module": "ESNext", 6 | "strict": true, 7 | "skipLibCheck": true, 8 | "isolatedModules": true, 9 | "resolveJsonModule": true, 10 | "moduleResolution": "bundler" 11 | }, 12 | "include": ["src"] 13 | } 14 | -------------------------------------------------------------------------------- /vant/viewport/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['@vue/cli-plugin-babel/preset'], 3 | plugins: [ 4 | [ 5 | 'import', 6 | { libraryName: 'vant', libraryDirectory: 'es', style: true }, 7 | 'vant' 8 | ] 9 | ] 10 | }; 11 | -------------------------------------------------------------------------------- /vant/viewport/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vant-demo", 3 | "version": "1.0.0", 4 | "description": "Collection of vant demos.", 5 | "author": "neverland ", 6 | "license": "MIT", 7 | "scripts": { 8 | "serve": "vue-cli-service serve", 9 | "build": "vue-cli-service build", 10 | "lint": "vue-cli-service lint" 11 | }, 12 | "dependencies": { 13 | "vant": "^2.2.0", 14 | "vue": "^2.6.10", 15 | "vue-router": "^3.0.6" 16 | }, 17 | "devDependencies": { 18 | "@vue/cli-plugin-babel": "^4.1.1", 19 | "@vue/cli-plugin-eslint": "^4.1.1", 20 | "@vue/cli-service": "^4.1.1", 21 | "babel-eslint": "^10.0.3", 22 | "babel-plugin-import": "^1.12.0", 23 | "eslint": "^4.19.1", 24 | "eslint-plugin-vue": "^6.0.1", 25 | "less": "^3.8.1", 26 | "less-loader": "^5.0.0", 27 | "postcss-px-to-viewport": "^1.1.0", 28 | "vue-template-compiler": "^2.6.10" 29 | }, 30 | "eslintConfig": { 31 | "root": true, 32 | "env": { 33 | "node": true 34 | }, 35 | "extends": [ 36 | "plugin:vue/essential", 37 | "eslint:recommended" 38 | ], 39 | "rules": {}, 40 | "parserOptions": { 41 | "parser": "babel-eslint" 42 | } 43 | }, 44 | "postcss": { 45 | "plugins": { 46 | "autoprefixer": {} 47 | } 48 | }, 49 | "browserslist": [ 50 | "Android >= 4.0", 51 | "iOS >= 8" 52 | ] 53 | } 54 | -------------------------------------------------------------------------------- /vant/viewport/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vant-ui/vant-demo/c28517971fb8b0cb77fae8ee3272b7d525c7bd0a/vant/viewport/public/favicon.ico -------------------------------------------------------------------------------- /vant/viewport/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | vant-demo 9 | 10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /vant/viewport/src/main.js: -------------------------------------------------------------------------------- 1 | import '../../vue2/src/main'; 2 | -------------------------------------------------------------------------------- /vant/viewport/vue.config.js: -------------------------------------------------------------------------------- 1 | const autoprefixer = require('autoprefixer'); 2 | const pxtoviewport = require('postcss-px-to-viewport'); 3 | 4 | module.exports = { 5 | outputDir: 'dist', 6 | publicPath: process.env.NODE_ENV === 'production' ? '/vant-demo/' : '/', 7 | css: { 8 | loaderOptions: { 9 | postcss: { 10 | plugins: [ 11 | autoprefixer(), 12 | pxtoviewport({ 13 | viewportWidth: 375 14 | }) 15 | ] 16 | } 17 | } 18 | } 19 | }; 20 | -------------------------------------------------------------------------------- /vant/vite/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local -------------------------------------------------------------------------------- /vant/vite/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Vite App 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /vant/vite/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vite", 3 | "private": true, 4 | "version": "0.0.0", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "vite build" 8 | }, 9 | "dependencies": { 10 | "vant": "^4.8.5", 11 | "vue": "^3.4.21" 12 | }, 13 | "devDependencies": { 14 | "@vant/auto-import-resolver": "^1.1.0", 15 | "@vitejs/plugin-vue": "^4.3.4", 16 | "less": "^4.1.3", 17 | "unplugin-auto-import": "^0.17.5", 18 | "unplugin-vue-components": "^0.26.0", 19 | "vite": "^5.1.6" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /vant/vite/src/App.vue: -------------------------------------------------------------------------------- 1 | 54 | 55 | 87 | 88 | 128 | -------------------------------------------------------------------------------- /vant/vite/src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue'; 2 | import App from './App.vue'; 3 | 4 | createApp(App).mount('#app'); 5 | -------------------------------------------------------------------------------- /vant/vite/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import vue from "@vitejs/plugin-vue"; 3 | import AutoImport from "unplugin-auto-import/vite"; 4 | import Components from "unplugin-vue-components/vite"; 5 | import { VantResolver } from "@vant/auto-import-resolver"; 6 | 7 | export default defineConfig({ 8 | plugins: [ 9 | vue(), 10 | AutoImport({ 11 | resolvers: [VantResolver()], 12 | }), 13 | Components({ 14 | resolvers: [VantResolver()], 15 | }), 16 | ], 17 | }); 18 | -------------------------------------------------------------------------------- /vant/vue2/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['@vue/cli-plugin-babel/preset'], 3 | plugins: [ 4 | [ 5 | 'import', 6 | { libraryName: 'vant', libraryDirectory: 'es', style: true }, 7 | 'vant' 8 | ] 9 | ] 10 | }; 11 | -------------------------------------------------------------------------------- /vant/vue2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vant-demo-vue2", 3 | "version": "1.0.0", 4 | "description": "Collection of vant demos.", 5 | "author": "neverland ", 6 | "license": "MIT", 7 | "scripts": { 8 | "serve": "vue-cli-service serve", 9 | "build": "vue-cli-service build", 10 | "lint": "vue-cli-service lint" 11 | }, 12 | "dependencies": { 13 | "core-js": "^3.4.3", 14 | "vant": "^2.2.0", 15 | "vue": "^2.6.10", 16 | "vue-router": "^3.0.5" 17 | }, 18 | "devDependencies": { 19 | "@vue/cli-plugin-babel": "^4.1.1", 20 | "@vue/cli-plugin-eslint": "^4.1.1", 21 | "@vue/cli-service": "^4.1.1", 22 | "babel-eslint": "^10.0.3", 23 | "babel-plugin-import": "^1.12.0", 24 | "eslint": "^4.19.1", 25 | "eslint-plugin-vue": "^6.0.1", 26 | "less": "^3.8.1", 27 | "less-loader": "^5.0.0", 28 | "vue-template-compiler": "^2.6.10" 29 | }, 30 | "eslintConfig": { 31 | "root": true, 32 | "env": { 33 | "node": true 34 | }, 35 | "extends": [ 36 | "plugin:vue/essential", 37 | "eslint:recommended" 38 | ], 39 | "rules": {}, 40 | "parserOptions": { 41 | "parser": "babel-eslint" 42 | } 43 | }, 44 | "postcss": { 45 | "plugins": { 46 | "autoprefixer": {} 47 | } 48 | }, 49 | "browserslist": [ 50 | "Android >= 4.0", 51 | "iOS >= 8" 52 | ] 53 | } 54 | -------------------------------------------------------------------------------- /vant/vue2/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vant-ui/vant-demo/c28517971fb8b0cb77fae8ee3272b7d525c7bd0a/vant/vue2/public/favicon.ico -------------------------------------------------------------------------------- /vant/vue2/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | vant-demo 9 | 10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /vant/vue2/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 14 | -------------------------------------------------------------------------------- /vant/vue2/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App'; 3 | import { router } from './router'; 4 | 5 | new Vue({ 6 | router, 7 | el: '#app', 8 | render: h => h(App) 9 | }); 10 | -------------------------------------------------------------------------------- /vant/vue2/src/router.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Router from 'vue-router'; 3 | 4 | Vue.use(Router); 5 | 6 | const routes = [ 7 | { 8 | path: '*', 9 | redirect: '/goods' 10 | }, 11 | { 12 | name: 'user', 13 | component: () => import('./view/user'), 14 | meta: { 15 | title: '会员中心' 16 | } 17 | }, 18 | { 19 | name: 'cart', 20 | component: () => import('./view/cart'), 21 | meta: { 22 | title: '购物车' 23 | } 24 | }, 25 | { 26 | name: 'goods', 27 | component: () => import('./view/goods'), 28 | meta: { 29 | title: '商品详情' 30 | } 31 | } 32 | ]; 33 | 34 | // add route path 35 | routes.forEach(route => { 36 | route.path = route.path || '/' + (route.name || ''); 37 | }); 38 | 39 | const router = new Router({ routes }); 40 | 41 | router.beforeEach((to, from, next) => { 42 | const title = to.meta && to.meta.title; 43 | if (title) { 44 | document.title = title; 45 | } 46 | next(); 47 | }); 48 | 49 | export { 50 | router 51 | }; 52 | -------------------------------------------------------------------------------- /vant/vue2/src/view/cart/index.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 89 | 90 | 120 | -------------------------------------------------------------------------------- /vant/vue2/src/view/goods/index.vue: -------------------------------------------------------------------------------- 1 | 50 | 51 | 110 | 111 | 149 | -------------------------------------------------------------------------------- /vant/vue2/src/view/user/index.vue: -------------------------------------------------------------------------------- 1 | 34 | 35 | 48 | 49 | 74 | -------------------------------------------------------------------------------- /vant/vue2/vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | outputDir: 'dist', 3 | publicPath: process.env.NODE_ENV === 'production' ? '/vant-demo/' : '/' 4 | }; 5 | -------------------------------------------------------------------------------- /vant/vue3-ts/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /vant/vue3-ts/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "proseWrap": "never" 4 | } 5 | -------------------------------------------------------------------------------- /vant/vue3-ts/README.md: -------------------------------------------------------------------------------- 1 | # vue3-ts 2 | 3 | ## Project setup 4 | ``` 5 | pnpm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | pnpm dev 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | pnpm build 16 | ``` 17 | 18 | 19 | ### Customize configuration 20 | See [Configuration Reference](https://vitejs.cn/guide/features.html). 21 | -------------------------------------------------------------------------------- /vant/vue3-ts/components.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | /* prettier-ignore */ 3 | // @ts-nocheck 4 | // Generated by unplugin-vue-components 5 | // Read more: https://github.com/vuejs/core/pull/3399 6 | export {} 7 | 8 | declare module 'vue' { 9 | export interface GlobalComponents { 10 | RouterLink: typeof import('vue-router')['RouterLink'] 11 | RouterView: typeof import('vue-router')['RouterView'] 12 | VanActionBar: typeof import('vant/es')['ActionBar'] 13 | VanActionBarButton: typeof import('vant/es')['ActionBarButton'] 14 | VanActionBarIcon: typeof import('vant/es')['ActionBarIcon'] 15 | VanCard: typeof import('vant/es')['Card'] 16 | VanCell: typeof import('vant/es')['Cell'] 17 | VanCellGroup: typeof import('vant/es')['CellGroup'] 18 | VanCheckbox: typeof import('vant/es')['Checkbox'] 19 | VanCheckboxGroup: typeof import('vant/es')['CheckboxGroup'] 20 | VanCol: typeof import('vant/es')['Col'] 21 | VanIcon: typeof import('vant/es')['Icon'] 22 | VanRow: typeof import('vant/es')['Row'] 23 | VanSubmitBar: typeof import('vant/es')['SubmitBar'] 24 | VanSwipe: typeof import('vant/es')['Swipe'] 25 | VanSwipeItem: typeof import('vant/es')['SwipeItem'] 26 | VanTag: typeof import('vant/es')['Tag'] 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /vant/vue3-ts/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + Vue + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /vant/vue3-ts/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue3-ts", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vue-tsc --noEmit && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "vant": "^4.0.0", 13 | "vue": "^3.2.37" 14 | }, 15 | "devDependencies": { 16 | "@types/node": "^18.7.1", 17 | "@vant/auto-import-resolver": "^1.0.1", 18 | "@vitejs/plugin-vue": "^4.3.4", 19 | "sass": "^1.54.4", 20 | "typescript": "^4.6.4", 21 | "unplugin-vue-components": "^0.25.2", 22 | "vite": "^4.4.9", 23 | "vue-router": "4", 24 | "vue-tsc": "^0.38.4" 25 | } 26 | } -------------------------------------------------------------------------------- /vant/vue3-ts/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /vant/vue3-ts/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 14 | -------------------------------------------------------------------------------- /vant/vue3-ts/src/assets/vue.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /vant/vue3-ts/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './App.vue' 3 | import 'vant/es/toast/style' 4 | import router from './router' 5 | 6 | const app = createApp(App) 7 | app.use(router) 8 | app.mount('#app') 9 | -------------------------------------------------------------------------------- /vant/vue3-ts/src/router.ts: -------------------------------------------------------------------------------- 1 | import { createRouter, createWebHashHistory } from 'vue-router' 2 | 3 | const routes = [ 4 | { 5 | name: 'notFound', 6 | path: '/:path(.*)+', 7 | redirect: { 8 | name: 'goods' 9 | } 10 | }, 11 | { 12 | name: 'user', 13 | path: '/user', 14 | component: () => import('@/view/user/index.vue'), 15 | meta: { 16 | title: '会员中心' 17 | } 18 | }, 19 | { 20 | name: 'cart', 21 | path: '/cart', 22 | component: () => import('@/view/cart/index.vue'), 23 | meta: { 24 | title: '购物车' 25 | } 26 | }, 27 | { 28 | name: 'goods', 29 | path: '/goods', 30 | component: () => import('@/view/goods/index.vue'), 31 | meta: { 32 | title: '商品详情' 33 | } 34 | } 35 | ] 36 | 37 | const router = createRouter({ 38 | routes, 39 | history: createWebHashHistory() 40 | }) 41 | 42 | router.beforeEach((to, from, next) => { 43 | const title = to?.meta?.title 44 | if (title) { 45 | document.title = title as string 46 | } 47 | next() 48 | }) 49 | 50 | export default router 51 | -------------------------------------------------------------------------------- /vant/vue3-ts/src/types/index.ts: -------------------------------------------------------------------------------- 1 | export interface IGoods { 2 | title: string 3 | price: number 4 | express: string 5 | remain: number 6 | thumb: string[] 7 | } 8 | 9 | export interface CardGoods { 10 | id: string 11 | title: string 12 | price: number 13 | desc: string 14 | num: number 15 | thumb: string 16 | } 17 | -------------------------------------------------------------------------------- /vant/vue3-ts/src/view/cart/index.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 86 | 87 | 117 | -------------------------------------------------------------------------------- /vant/vue3-ts/src/view/goods/index.vue: -------------------------------------------------------------------------------- 1 | 65 | 66 | 100 | 101 | 139 | -------------------------------------------------------------------------------- /vant/vue3-ts/src/view/user/index.vue: -------------------------------------------------------------------------------- 1 | 37 | 38 | 39 | 40 | 65 | -------------------------------------------------------------------------------- /vant/vue3-ts/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | declare module '*.vue' { 4 | import type { DefineComponent } from 'vue' 5 | const component: DefineComponent<{}, {}, any> 6 | export default component 7 | } 8 | -------------------------------------------------------------------------------- /vant/vue3-ts/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "moduleResolution": "Node", 7 | "strict": true, 8 | "jsx": "preserve", 9 | "sourceMap": true, 10 | "baseUrl": ".", 11 | "resolveJsonModule": true, 12 | "isolatedModules": true, 13 | "esModuleInterop": true, 14 | "lib": ["ESNext", "DOM"], 15 | "skipLibCheck": true, 16 | "paths": { 17 | "@/*": [ 18 | "src/*" 19 | ] 20 | } 21 | }, 22 | "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], 23 | "references": [{ "path": "./tsconfig.node.json" }] 24 | } 25 | -------------------------------------------------------------------------------- /vant/vue3-ts/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /vant/vue3-ts/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import vue from '@vitejs/plugin-vue'; 3 | import Components from 'unplugin-vue-components/vite'; 4 | import { VantResolver } from '@vant/auto-import-resolver'; 5 | import { resolve } from 'path'; 6 | 7 | // https://vitejs.dev/config/ 8 | export default defineConfig({ 9 | plugins: [ 10 | vue(), 11 | Components({ 12 | resolvers: [VantResolver()], 13 | }), 14 | ], 15 | resolve: { 16 | alias: { 17 | '@': resolve(__dirname, 'src'), 18 | }, 19 | }, 20 | server: { 21 | port: 4200, 22 | }, 23 | }); 24 | --------------------------------------------------------------------------------