11 | ) {
12 | res.status(200).json({ name: 'John Doe' })
13 | }
14 |
--------------------------------------------------------------------------------
/template/umi/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /npm-debug.log*
6 | /yarn-error.log
7 | /yarn.lock
8 | /package-lock.json
9 |
10 | # production
11 | /dist
12 |
13 | # misc
14 | .DS_Store
15 |
16 | # umi
17 | /src/.umi
18 | /src/.umi-production
19 | /src/.umi-test
20 | /.env.local
21 |
--------------------------------------------------------------------------------
/next/cra/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/next/vite/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vite App
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/template/vite/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vite App
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/template/vite/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5 | sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 | }
9 |
10 | code {
11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 | monospace;
13 | }
14 |
--------------------------------------------------------------------------------
/template/create-react-app/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5 | sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 | }
9 |
10 | code {
11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 | monospace;
13 | }
14 |
--------------------------------------------------------------------------------
/template/umi/src/pages/index.tsx:
--------------------------------------------------------------------------------
1 | import { Link } from 'umi';
2 | import { Flex, Button } from 'react-vant';
3 |
4 | export default function IndexPage() {
5 | return (
6 |
7 | Page Index
8 |
14 |
15 | user page
16 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/next/cra/src/reportWebVitals.ts:
--------------------------------------------------------------------------------
1 | import { ReportHandler } from 'web-vitals';
2 |
3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => {
4 | if (onPerfEntry && onPerfEntry instanceof Function) {
5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
6 | getCLS(onPerfEntry);
7 | getFID(onPerfEntry);
8 | getFCP(onPerfEntry);
9 | getLCP(onPerfEntry);
10 | getTTFB(onPerfEntry);
11 | });
12 | }
13 | };
14 |
15 | export default reportWebVitals;
16 |
--------------------------------------------------------------------------------
/template/create-react-app/src/reportWebVitals.ts:
--------------------------------------------------------------------------------
1 | import { ReportHandler } from 'web-vitals';
2 |
3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => {
4 | if (onPerfEntry && onPerfEntry instanceof Function) {
5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
6 | getCLS(onPerfEntry);
7 | getFID(onPerfEntry);
8 | getFCP(onPerfEntry);
9 | getLCP(onPerfEntry);
10 | getTTFB(onPerfEntry);
11 | });
12 | }
13 | };
14 |
15 | export default reportWebVitals;
16 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | node_modules
5 | *node_modules/*
6 |
7 | /.pnp
8 | .pnp.js
9 |
10 | pnpm-global
11 |
12 | # testing
13 | /coverage
14 |
15 | # production
16 | build
17 | /build/*
18 | # misc
19 | .DS_Store
20 | */.DS_Store
21 | .env.local
22 | .env.development.local
23 | .env.test.local
24 | .env.production.local
25 |
26 | npm-debug.log*
27 | yarn-debug.log*
28 | yarn-error.log*
29 | yarn.lock
30 | package-lock.json
31 | pnpm-lock.yaml
--------------------------------------------------------------------------------
/next/html/button.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const e = React.createElement;
4 | const rv = window['react-vant'];
5 |
6 | // Find all DOM containers, and render Like buttons into them.
7 | const domContainer = document.querySelector('#app');
8 | const root = ReactDOM.createRoot(domContainer);
9 | root.render(
10 | e(rv.Button, {
11 | type: 'primary', children: 'Hello React Vant', onClick: function () {
12 | rv.Dialog.confirm({
13 | title: '标题',
14 | message: '代码是写出来给人看的，附带能在机器上运行',
15 | })
16 | }
17 | })
18 | );
19 |
--------------------------------------------------------------------------------
/next/vite/postcss.config.js:
--------------------------------------------------------------------------------
1 | const px2viewport = require('postcss-px-to-viewport');
2 |
3 | module.exports = () => {
4 | return {
5 | plugins: [
6 | px2viewport({
7 | viewportUnit: "vw",
8 | fontViewportUnit: "vw",
9 | viewportWidth: 375,
10 | exclude: [/^(?!.*node_modules\/react-vant)/]
11 | }),
12 | px2viewport({
13 | viewportUnit: "vw",
14 | fontViewportUnit: "vw",
15 | viewportWidth: 750,
16 | exclude: [/node_modules\/react-vant/i]
17 | })
18 | ]
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/template/nextjs/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 |
27 | # local env files
28 | .env.local
29 | .env.development.local
30 | .env.test.local
31 | .env.production.local
32 |
33 | # vercel
34 | .vercel
35 |
--------------------------------------------------------------------------------
/next/cra/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { createRoot } from 'react-dom/client';
3 | import App from './App';
4 | import reportWebVitals from './reportWebVitals';
5 |
6 | const container = document.getElementById('root');
7 | const root = createRoot(container!); //
8 |
9 | root.render();
10 |
11 |
12 | // If you want to start measuring performance in your app, pass a function
13 | // to log results (for example: reportWebVitals(console.log))
14 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
15 | reportWebVitals();
16 |
--------------------------------------------------------------------------------
/template/umi/src/pages/index.less:
--------------------------------------------------------------------------------
1 | .title {
2 | background: rgb(121, 242, 157);
3 | }
4 |
5 | @blue: #3f45ff;
6 |
7 | .rv-swiper {
8 | &__slide {
9 | .rv-swiper-item {
10 | color: #fff;
11 | font-size: 20px;
12 | line-height: 150px;
13 | text-align: center;
14 | }
15 |
16 | &:nth-child(odd) {
17 | .rv-swiper-item {
18 | background-color: @blue;
19 | }
20 | }
21 |
22 | &:nth-child(even) {
23 | .rv-swiper-item {
24 | background-color: lighten(@blue, 8%);
25 | }
26 | }
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/next/remix/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
3 | "compilerOptions": {
4 | "lib": ["DOM", "DOM.Iterable", "ES2019"],
5 | "isolatedModules": true,
6 | "esModuleInterop": true,
7 | "jsx": "react-jsx",
8 | "moduleResolution": "node",
9 | "resolveJsonModule": true,
10 | "target": "ES2019",
11 | "strict": true,
12 | "baseUrl": ".",
13 | "paths": {
14 | "~/*": ["./app/*"]
15 | },
16 |
17 | // Remix takes care of building everything in `remix build`.
18 | "noEmit": true
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/template/nextjs/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "strict": true,
8 | "forceConsistentCasingInFileNames": true,
9 | "noEmit": true,
10 | "esModuleInterop": true,
11 | "module": "esnext",
12 | "moduleResolution": "node",
13 | "resolveJsonModule": true,
14 | "isolatedModules": true,
15 | "jsx": "preserve"
16 | },
17 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
18 | "exclude": ["node_modules"]
19 | }
20 |
--------------------------------------------------------------------------------
/next/nextjs/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 |
27 | # local env files
28 | .env.local
29 | .env.development.local
30 | .env.test.local
31 | .env.production.local
32 |
33 | # vercel
34 | .vercel
35 |
36 | # typescript
37 | *.tsbuildinfo
38 |
--------------------------------------------------------------------------------
/template/create-react-app/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import App from './App';
5 | import reportWebVitals from './reportWebVitals';
6 |
7 | ReactDOM.render(
8 |
9 |
10 | ,
11 | document.getElementById('root')
12 | );
13 |
14 | // If you want to start measuring performance in your app, pass a function
15 | // to log results (for example: reportWebVitals(console.log))
16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
17 | reportWebVitals();
18 |
--------------------------------------------------------------------------------
/next/nextjs/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "strict": true,
8 | "forceConsistentCasingInFileNames": true,
9 | "noEmit": true,
10 | "esModuleInterop": true,
11 | "module": "esnext",
12 | "moduleResolution": "node",
13 | "resolveJsonModule": true,
14 | "isolatedModules": true,
15 | "jsx": "preserve",
16 | "incremental": true
17 | },
18 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
19 | "exclude": ["node_modules"]
20 | }
21 |
--------------------------------------------------------------------------------
/next/astro/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@example/basics",
3 | "type": "module",
4 | "version": "0.0.1",
5 | "private": true,
6 | "scripts": {
7 | "dev": "astro dev",
8 | "start": "astro dev",
9 | "build": "astro build",
10 | "preview": "astro preview",
11 | "astro": "astro"
12 | },
13 | "dependencies": {
14 | "@astrojs/react": "^1.2.2",
15 | "@react-vant/icons": "^0.0.10",
16 | "@types/react": "^18.0.21",
17 | "@types/react-dom": "^18.0.6",
18 | "astro": "^1.9.0",
19 | "react": "^18.0.0",
20 | "react-dom": "^18.0.0",
21 | "react-vant": "^3.1.2"
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/next/cra/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/template/create-react-app/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/next/cra/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": [
5 | "dom",
6 | "dom.iterable",
7 | "esnext"
8 | ],
9 | "allowJs": true,
10 | "skipLibCheck": true,
11 | "esModuleInterop": true,
12 | "allowSyntheticDefaultImports": true,
13 | "strict": true,
14 | "forceConsistentCasingInFileNames": true,
15 | "noFallthroughCasesInSwitch": true,
16 | "module": "esnext",
17 | "moduleResolution": "node",
18 | "resolveJsonModule": true,
19 | "isolatedModules": true,
20 | "noEmit": true,
21 | "jsx": "react-jsx"
22 | },
23 | "include": [
24 | "src"
25 | ]
26 | }
27 |
--------------------------------------------------------------------------------
/next/vite/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-vant-vite-template",
3 | "private": true,
4 | "version": "0.0.0",
5 | "scripts": {
6 | "dev": "vite",
7 | "build": "tsc && vite build",
8 | "preview": "vite preview"
9 | },
10 | "dependencies": {
11 | "@react-vant/icons": "^0.0.6",
12 | "react": "latest",
13 | "react-dom": "latest",
14 | "react-vant": "latest"
15 | },
16 | "devDependencies": {
17 | "@types/react": "latest",
18 | "@types/react-dom": "latest",
19 | "@vitejs/plugin-react": "^1.3.1",
20 | "postcss-px-to-viewport": "^1.1.1",
21 | "typescript": "^4.5.4",
22 | "vite": "^2.9.6"
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/next/remix/app/entry.server.tsx:
--------------------------------------------------------------------------------
1 | import { renderToString } from "react-dom/server";
2 | import { RemixServer } from "remix";
3 | import type { EntryContext } from "remix";
4 |
5 | export default function handleRequest(
6 | request: Request,
7 | responseStatusCode: number,
8 | responseHeaders: Headers,
9 | remixContext: EntryContext
10 | ) {
11 | let markup = renderToString(
12 |
13 | );
14 |
15 | responseHeaders.set("Content-Type", "text/html");
16 |
17 | return new Response("" + markup, {
18 | status: responseStatusCode,
19 | headers: responseHeaders,
20 | });
21 | }
22 |
--------------------------------------------------------------------------------
/next/vite/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ESNext",
4 | "useDefineForClassFields": true,
5 | "lib": ["DOM", "DOM.Iterable", "ESNext"],
6 | "allowJs": false,
7 | "skipLibCheck": false,
8 | "esModuleInterop": false,
9 | "allowSyntheticDefaultImports": true,
10 | "strict": true,
11 | "forceConsistentCasingInFileNames": true,
12 | "module": "ESNext",
13 | "moduleResolution": "Node",
14 | "resolveJsonModule": true,
15 | "isolatedModules": true,
16 | "noEmit": true,
17 | "jsx": "react-jsx"
18 | },
19 | "include": ["src"],
20 | "references": [{ "path": "./tsconfig.node.json" }]
21 | }
22 |
--------------------------------------------------------------------------------
/template/vite/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ESNext",
4 | "useDefineForClassFields": true,
5 | "lib": ["DOM", "DOM.Iterable", "ESNext"],
6 | "allowJs": false,
7 | "skipLibCheck": false,
8 | "esModuleInterop": false,
9 | "allowSyntheticDefaultImports": true,
10 | "strict": true,
11 | "forceConsistentCasingInFileNames": true,
12 | "module": "ESNext",
13 | "moduleResolution": "Node",
14 | "resolveJsonModule": true,
15 | "isolatedModules": true,
16 | "noEmit": true,
17 | "jsx": "react-jsx"
18 | },
19 | "include": ["src"],
20 | "references": [{ "path": "./tsconfig.node.json" }]
21 | }
22 |
--------------------------------------------------------------------------------
/template/create-react-app/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": [
5 | "dom",
6 | "dom.iterable",
7 | "esnext"
8 | ],
9 | "allowJs": true,
10 | "skipLibCheck": true,
11 | "esModuleInterop": true,
12 | "allowSyntheticDefaultImports": true,
13 | "strict": true,
14 | "forceConsistentCasingInFileNames": true,
15 | "noFallthroughCasesInSwitch": true,
16 | "module": "esnext",
17 | "moduleResolution": "node",
18 | "resolveJsonModule": true,
19 | "isolatedModules": true,
20 | "noEmit": true,
21 | "jsx": "react-jsx"
22 | },
23 | "include": [
24 | "src"
25 | ]
26 | }
27 |
--------------------------------------------------------------------------------
/template/nextjs/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 |
3 | const withPlugins = require('next-compose-plugins');
4 | const withAntdLess = require('next-plugin-antd-less');
5 | const withImages = require('next-images')
6 | const withTM = require('next-transpile-modules')([
7 | 'react-vant',
8 | ]);
9 |
10 | module.exports = withPlugins([
11 | [withAntdLess, {
12 | /**
13 | * @see https://github.com/SolidZORO/next-plugin-antd-less
14 | */
15 | modifyVars: {
16 | // 全部样式变量 https://github.com/3lang3/react-vant/blob/main/src/styles/themes/default.less
17 | '@brand-color': '#ef5350',
18 | }
19 | }],
20 | withImages,
21 | withTM,
22 | ]);
--------------------------------------------------------------------------------
/next/nextjs/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-vant-nextjs-template",
3 | "private": true,
4 | "scripts": {
5 | "dev": "next dev",
6 | "build": "next build",
7 | "start": "next start",
8 | "lint": "next lint"
9 | },
10 | "dependencies": {
11 | "@react-vant/icons": "^0.0.6",
12 | "next": "12.1.6",
13 | "react": "17.0.2",
14 | "react-dom": "17.0.2",
15 | "react-vant": "latest"
16 | },
17 | "devDependencies": {
18 | "@types/node": "17.0.17",
19 | "@types/react": "17.0.39",
20 | "eslint": "8.8.0",
21 | "eslint-config-next": "12.0.10",
22 | "next-images": "^1.8.4",
23 | "next-transpile-modules": "^9.0.0",
24 | "typescript": "4.5.5"
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/template/create-react-app/src/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | text-align: center;
3 | }
4 |
5 | .App-logo {
6 | height: 40vmin;
7 | pointer-events: none;
8 | }
9 |
10 | @media (prefers-reduced-motion: no-preference) {
11 | .App-logo {
12 | animation: App-logo-spin infinite 20s linear;
13 | }
14 | }
15 |
16 | .App-header {
17 | min-height: 100vh;
18 | display: flex;
19 | flex-direction: column;
20 | align-items: center;
21 | justify-content: center;
22 | font-size: calc(10px + 2vmin);
23 | color: #323232;
24 | }
25 |
26 | .App-link {
27 | color: #61dafb;
28 | }
29 |
30 | @keyframes App-logo-spin {
31 | from {
32 | transform: rotate(0deg);
33 | }
34 | to {
35 | transform: rotate(360deg);
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/template/vite/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-vant-vite-demo",
3 | "private": true,
4 | "version": "0.0.0",
5 | "scripts": {
6 | "dev": "vite",
7 | "build": "tsc && vite build",
8 | "preview": "vite preview"
9 | },
10 | "dependencies": {
11 | "react": "^17.0.2",
12 | "react-dom": "^17.0.2",
13 | "react-vant": "1.4.13"
14 | },
15 | "devDependencies": {
16 | "@types/node": "^17.0.17",
17 | "@types/react": "^17.0.33",
18 | "@types/react-dom": "^17.0.10",
19 | "@vitejs/plugin-react": "^1.0.7",
20 | "less": "^4.1.2",
21 | "rollup-plugin-visualizer": "5.5.2",
22 | "typescript": "^4.5.4",
23 | "vite": "^2.8.0",
24 | "vite-plugin-style-import": "^1.4.0"
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## React Vant Teamplate
2 | ### 快速集成
3 |
4 | #### 在 create-react-app 中使用
5 |
6 | 参考[react-vant-cra](https://github.com/3lang3/react-vant-template/tree/main/next/create-react-app)
7 |
8 | #### 在 umijs 使用
9 |
10 | 参考[react-vant-umi](https://github.com/3lang3/react-vant-template/tree/main/next/umi)
11 |
12 | #### 在 nextjs 使用
13 |
14 | 参考[react-vant-nextjs](https://github.com/3lang3/react-vant-template/tree/main/next/nextjs)
15 |
16 | #### 在 astro 使用
17 |
18 | 参考[react-vant-astro](https://github.com/3lang3/react-vant-template/tree/main/next/astro)
19 |
20 | #### vite集成
21 |
22 | > 请使用 `npm` 或者 `yarn` 安装依赖, `pnpm` 会出现问题。
23 |
24 | 参考[react-vant-vite](https://github.com/3lang3/react-vant-template/tree/main/next/vite)
25 |
26 | 请参阅[Quickstart](https://3lang3.github.io/react-vant/#/zh-CN/)中的更多内容。
27 |
--------------------------------------------------------------------------------
/template/vite/src/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | text-align: center;
3 | }
4 |
5 | .App-logo {
6 | height: 40vmin;
7 | pointer-events: none;
8 | }
9 |
10 | @media (prefers-reduced-motion: no-preference) {
11 | .App-logo {
12 | animation: App-logo-spin infinite 20s linear;
13 | }
14 | }
15 |
16 | .App-header {
17 | background-color: #282c34;
18 | min-height: 100vh;
19 | display: flex;
20 | flex-direction: column;
21 | align-items: center;
22 | justify-content: center;
23 | font-size: calc(10px + 2vmin);
24 | color: white;
25 | }
26 |
27 | .App-link {
28 | color: #61dafb;
29 | }
30 |
31 | @keyframes App-logo-spin {
32 | from {
33 | transform: rotate(0deg);
34 | }
35 | to {
36 | transform: rotate(360deg);
37 | }
38 | }
39 |
40 | button {
41 | font-size: calc(10px + 2vmin);
42 | }
43 |
--------------------------------------------------------------------------------
/template/nextjs/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "nextjs",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev",
7 | "build": "next build",
8 | "export": "next build && next export",
9 | "start": "next start",
10 | "lint": "next lint"
11 | },
12 | "dependencies": {
13 | "next": "12.0.4",
14 | "react": "17.0.2",
15 | "react-dom": "17.0.2",
16 | "react-vant": "1.4.4"
17 | },
18 | "devDependencies": {
19 | "@types/react": "17.0.37",
20 | "babel-plugin-import": "1.13.3",
21 | "eslint": "7.32.0",
22 | "eslint-config-next": "12.0.4",
23 | "next-compose-plugins": "2.2.1",
24 | "next-images": "1.8.4",
25 | "next-plugin-antd-less": "1.5.2",
26 | "next-transpile-modules": "9.0.0",
27 | "typescript": "4.4.2"
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/next/umijs/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "esnext",
4 | "module": "esnext",
5 | "moduleResolution": "node",
6 | "resolveJsonModule": true,
7 | "importHelpers": true,
8 | "jsx": "react-jsx",
9 | "esModuleInterop": true,
10 | "sourceMap": true,
11 | "baseUrl": "./",
12 | "strict": true,
13 | "paths": {
14 | "@/*": ["src/*"],
15 | "@@/*": ["src/.umi/*"]
16 | },
17 | "allowSyntheticDefaultImports": true
18 | },
19 | "include": [
20 | "mock/**/*",
21 | "src/**/*",
22 | "config/**/*",
23 | ".umirc.ts",
24 | "typings.d.ts"
25 | ],
26 | "exclude": [
27 | "node_modules",
28 | "lib",
29 | "es",
30 | "dist",
31 | "typings",
32 | "**/__test__",
33 | "test",
34 | "docs",
35 | "tests"
36 | ]
37 | }
38 |
--------------------------------------------------------------------------------
/template/umi/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "esnext",
4 | "module": "esnext",
5 | "moduleResolution": "node",
6 | "resolveJsonModule": true,
7 | "importHelpers": true,
8 | "jsx": "react-jsx",
9 | "esModuleInterop": true,
10 | "sourceMap": true,
11 | "baseUrl": "./",
12 | "strict": true,
13 | "paths": {
14 | "@/*": ["src/*"],
15 | "@@/*": ["src/.umi/*"]
16 | },
17 | "allowSyntheticDefaultImports": true
18 | },
19 | "include": [
20 | "mock/**/*",
21 | "src/**/*",
22 | "config/**/*",
23 | ".umirc.ts",
24 | "typings.d.ts"
25 | ],
26 | "exclude": [
27 | "node_modules",
28 | "lib",
29 | "es",
30 | "dist",
31 | "typings",
32 | "**/__test__",
33 | "test",
34 | "docs",
35 | "tests"
36 | ]
37 | }
38 |
--------------------------------------------------------------------------------
/template/umi/.umirc.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'umi';
2 |
3 | export default defineConfig({
4 | theme: {
5 | // 全部样式变量 https://github.com/3lang3/react-vant/blob/main/src/styles/themes/default.less
6 | "brand-color": "#ef5350",
7 | // hd需要根据设计稿尺寸设置
8 | // 若设计稿宽度为350则使用默认1px即可
9 | "hd": '2px' // 对应750设计稿宽度
10 | },
11 | nodeModulesTransform: {
12 | type: 'none',
13 | },
14 | // 按需引入组件
15 | extraBabelPlugins: [
16 | ['import', { libraryName: "react-vant", style: true }],
17 | ],
18 | extraPostCSSPlugins: [
19 | // 高清方案
20 | require('postcss-px-to-viewport')({
21 | // 设计稿宽度
22 | viewportWidth: 750,
23 | unitPrecision: 4,
24 | viewportUnit: 'vw'
25 | }),
26 | ],
27 | routes: [
28 | { path: '/', component: '@/pages/index' }
29 | ],
30 | fastRefresh: {},
31 | });
32 |
--------------------------------------------------------------------------------
/next/remix/app/root.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Links,
3 | LiveReload,
4 | Meta,
5 | Outlet,
6 | Scripts,
7 | ScrollRestoration,
8 | } from "remix";
9 | import type { MetaFunction } from "remix";
10 | import styles from 'react-vant/lib/index.css'
11 |
12 | export const meta: MetaFunction = () => ({
13 | charset: "utf-8",
14 | title: "New Remix App",
15 | viewport: "width=device-width,initial-scale=1",
16 | });
17 |
18 | export function links() {
19 | return [{ rel: "stylesheet", href: styles }];
20 | }
21 |
22 | export default function App() {
23 | return (
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 | );
37 | }
38 |
--------------------------------------------------------------------------------
/template/create-react-app/src/App.tsx:
--------------------------------------------------------------------------------
1 | import { Button, hooks } from 'react-vant';
2 | import logo from './logo.svg';
3 | import './App.css';
4 |
5 | function App() {
6 | const { current } = hooks.useCountDown({ time: 24 * 60 * 60 })
7 |
8 | console.log(current)
9 | return (
10 |
27 | );
28 | }
29 |
30 | export default App;
31 |
--------------------------------------------------------------------------------
/next/remix/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "remix-template-remix-ts",
3 | "private": true,
4 | "description": "",
5 | "license": "",
6 | "sideEffects": false,
7 | "scripts": {
8 | "build": "remix build",
9 | "dev": "remix dev",
10 | "postinstall": "remix setup node",
11 | "start": "remix-serve build"
12 | },
13 | "dependencies": {
14 | "@react-vant/icons": "^0.0.6",
15 | "@remix-run/react": "^1.3.2",
16 | "@remix-run/serve": "^1.3.2",
17 | "react": "^17.0.2",
18 | "react-dom": "^17.0.2",
19 | "react-vant": "latest",
20 | "remix": "^1.3.2"
21 | },
22 | "devDependencies": {
23 | "@remix-run/dev": "^1.3.2",
24 | "@remix-run/eslint-config": "^1.3.2",
25 | "@types/react": "^17.0.24",
26 | "@types/react-dom": "^17.0.9",
27 | "eslint": "^8.11.0",
28 | "typescript": "^4.5.5"
29 | },
30 | "engines": {
31 | "node": ">=14"
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/next/astro/public/favicon.svg:
--------------------------------------------------------------------------------
1 |
14 |
--------------------------------------------------------------------------------
/next/astro/src/layouts/Layout.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import 'react-vant/bundle/index.min.css';
3 |
4 | export interface Props {
5 | title: string;
6 | }
7 |
8 | const { title } = Astro.props;
9 | ---
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | {title}
19 |
20 |
21 |
22 |
23 |
24 |
38 |
--------------------------------------------------------------------------------
/next/html/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Add React in One Minute
6 |
7 |
8 |
9 |
10 | Add React in One Minute
11 | This page demonstrates using React with no build tooling.
12 | React is loaded as a script tag.
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/next/nextjs/public/vercel.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/template/nextjs/public/vercel.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/template/vite/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 | import styleImport from "vite-plugin-style-import";
4 | import visualizer from "rollup-plugin-visualizer";
5 |
6 | const plugins = [];
7 |
8 | // 打包生产环境才引入的插件
9 | if (process.env.NODE_ENV === "production") {
10 | // 打包依赖展示
11 | plugins.push(
12 | visualizer({
13 | open: true,
14 | gzipSize: true,
15 | brotliSize: true,
16 | })
17 | );
18 | }
19 |
20 | // https://vitejs.dev/config/
21 | export default defineConfig({
22 | css: {
23 | preprocessorOptions: {
24 | less: {
25 | javascriptEnabled: true,
26 | modifyVars: {
27 | // 定制less变量
28 | // "brand-color": "red",
29 | },
30 | },
31 | },
32 | },
33 | resolve: {
34 | alias: [{ find: /^~/, replacement: "" }],
35 | },
36 | plugins: [react(), styleImport({
37 | libs: [
38 | {
39 | libraryName: "react-vant",
40 | resolveStyle: (name) => `react-vant/es/${name}/style`,
41 | },
42 | ],
43 | }), ...plugins]
44 | })
45 |
--------------------------------------------------------------------------------
/next/umijs/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "private": true,
3 | "scripts": {
4 | "start": "umi dev",
5 | "build": "umi build",
6 | "postinstall": "umi generate tmp",
7 | "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'",
8 | "test": "umi-test",
9 | "test:coverage": "umi-test --coverage"
10 | },
11 | "gitHooks": {
12 | "pre-commit": "lint-staged"
13 | },
14 | "lint-staged": {
15 | "*.{js,jsx,less,md,json}": [
16 | "prettier --write"
17 | ],
18 | "*.ts?(x)": [
19 | "prettier --parser=typescript --write"
20 | ]
21 | },
22 | "dependencies": {
23 | "@ant-design/pro-layout": "^6.5.0",
24 | "@react-vant/icons": "^0.0.6",
25 | "react": "17.x",
26 | "react-dom": "17.x",
27 | "react-vant": "^3.2.4",
28 | "umi": "^3.5.20"
29 | },
30 | "devDependencies": {
31 | "@types/react": "^17.0.0",
32 | "@types/react-dom": "^17.0.0",
33 | "@umijs/preset-react": "~2.1.4",
34 | "@umijs/test": "^3.5.20",
35 | "lint-staged": "^10.0.7",
36 | "prettier": "^2.2.0",
37 | "typescript": "^4.1.2",
38 | "yorkie": "^2.0.0"
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/next/cra/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-vant-cra-template",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@react-vant/icons": "^0.0.6",
7 | "@testing-library/jest-dom": "^5.16.2",
8 | "@testing-library/react": "^12.1.2",
9 | "@testing-library/user-event": "^13.5.0",
10 | "@types/jest": "^27.4.0",
11 | "@types/node": "^16.11.24",
12 | "@types/react": "^18.0.8",
13 | "@types/react-dom": "^18.0.3",
14 | "react": "^18.1.0",
15 | "react-dom": "^18.1.0",
16 | "react-scripts": "5.0.1",
17 | "react-vant": "latest",
18 | "typescript": "^4.5.5",
19 | "web-vitals": "^2.1.4"
20 | },
21 | "scripts": {
22 | "start": "react-scripts start",
23 | "build": "react-scripts build",
24 | "test": "react-scripts test",
25 | "eject": "react-scripts eject"
26 | },
27 | "eslintConfig": {
28 | "extends": [
29 | "react-app",
30 | "react-app/jest"
31 | ]
32 | },
33 | "browserslist": {
34 | "production": [
35 | ">0.2%",
36 | "not dead",
37 | "not op_mini all"
38 | ],
39 | "development": [
40 | "last 1 chrome version",
41 | "last 1 firefox version",
42 | "last 1 safari version"
43 | ]
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/template/umi/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "private": true,
3 | "scripts": {
4 | "analyze": "cross-env ANALYZE=1 umi build",
5 | "start": "umi dev",
6 | "build": "umi build",
7 | "postinstall": "umi generate tmp",
8 | "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'",
9 | "test": "umi-test",
10 | "test:coverage": "umi-test --coverage"
11 | },
12 | "gitHooks": {
13 | "pre-commit": "lint-staged"
14 | },
15 | "lint-staged": {
16 | "*.{js,jsx,less,md,json}": [
17 | "prettier --write"
18 | ],
19 | "*.ts?(x)": [
20 | "prettier --parser=typescript --write"
21 | ]
22 | },
23 | "dependencies": {
24 | "@ant-design/pro-layout": "6.31.3",
25 | "react": "17.0.2",
26 | "react-dom": "17.0.2",
27 | "react-vant": "1.4.4",
28 | "umi": "3.5.20"
29 | },
30 | "devDependencies": {
31 | "@types/react": "17.0.37",
32 | "@types/react-dom": "17.0.11",
33 | "@umijs/preset-react": "1.8.30",
34 | "@umijs/test": "3.5.20",
35 | "babel-plugin-import": "1.13.3",
36 | "cross-env": "7.0.3",
37 | "lint-staged": "12.1.2",
38 | "postcss-px-to-viewport": "1.1.1",
39 | "prettier": "2.5.0",
40 | "typescript": "4.5.2",
41 | "yorkie": "2.0.0"
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/next/remix/README.md:
--------------------------------------------------------------------------------
1 | # Welcome to Remix!
2 |
3 | - [Remix Docs](https://remix.run/docs)
4 |
5 | ## Development
6 |
7 | From your terminal:
8 |
9 | ```sh
10 | npm run dev
11 | ```
12 |
13 | This starts your app in development mode, rebuilding assets on file changes.
14 |
15 | ## Deployment
16 |
17 | First, build your app for production:
18 |
19 | ```sh
20 | npm run build
21 | ```
22 |
23 | Then run the app in production mode:
24 |
25 | ```sh
26 | npm start
27 | ```
28 |
29 | Now you'll need to pick a host to deploy it to.
30 |
31 | ### DIY
32 |
33 | If you're familiar with deploying node applications, the built-in Remix app server is production-ready.
34 |
35 | Make sure to deploy the output of `remix build`
36 |
37 | - `build/`
38 | - `public/build/`
39 |
40 | ### Using a Template
41 |
42 | When you ran `npx create-remix@latest` there were a few choices for hosting. You can run that again to create a new project, then copy over your `app/` folder to the new project that's pre-configured for your target server.
43 |
44 | ```sh
45 | cd ..
46 | # create a new project, and pick a pre-configured host
47 | npx create-remix@latest
48 | cd my-new-remix-app
49 | # remove the new project's app (not the old one!)
50 | rm -rf app
51 | # copy your app over
52 | cp -R ../my-old-remix-app/app app
53 | ```
54 |
--------------------------------------------------------------------------------
/template/vite/src/App.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react'
2 | import { Button } from 'react-vant';
3 | import logo from './logo.svg'
4 | import './App.css'
5 |
6 | function App() {
7 | const [count, setCount] = useState(0)
8 |
9 | return (
10 |
11 |
12 | 
13 | Hello Vite + React!
14 |
15 |
18 |
19 |
20 | Edit App.tsx and save to test HMR updates.
21 |
22 |
23 |
29 | Learn React
30 |
31 | {' | '}
32 |
38 | Vite Docs
39 |
40 |
41 |
42 |
Add React in One Minute
13 | This page demonstrates using React with no build tooling.
14 | React is loaded as a script tag.
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
35 |
36 |
37 |
--------------------------------------------------------------------------------
/next/astro/src/components/Card.astro:
--------------------------------------------------------------------------------
1 | ---
2 | export interface Props {
3 | title: string;
4 | body: string;
5 | href: string;
6 | }
7 |
8 | const { href, title, body } = Astro.props;
9 | ---
10 |
11 |
12 |
13 |
14 | {title}
15 | →
16 |
17 |
18 | {body}
19 |
20 |
21 |
22 |
63 |
--------------------------------------------------------------------------------
/template/create-react-app/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-vant-demo",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@testing-library/jest-dom": "5.15.1",
7 | "@testing-library/react": "11.2.7",
8 | "@testing-library/user-event": "13.5.0",
9 | "@types/jest": "27.0.3",
10 | "@types/node": "16.11.11",
11 | "@types/react": "17.0.37",
12 | "@types/react-dom": "17.0.11",
13 | "react": "17.0.2",
14 | "react-dom": "17.0.2",
15 | "react-scripts": "4.0.3",
16 | "react-vant": "1.4.4",
17 | "typescript": "4.5.2",
18 | "web-vitals": "2.1.2"
19 | },
20 | "scripts": {
21 | "start": "react-app-rewired start",
22 | "build": "react-app-rewired build",
23 | "test": "react-app-rewired test",
24 | "eject": "react-scripts eject"
25 | },
26 | "eslintConfig": {
27 | "extends": [
28 | "react-app",
29 | "react-app/jest"
30 | ]
31 | },
32 | "browserslist": {
33 | "production": [
34 | ">0.2%",
35 | "not dead",
36 | "not op_mini all"
37 | ],
38 | "development": [
39 | "last 1 chrome version",
40 | "last 1 firefox version",
41 | "last 1 safari version"
42 | ]
43 | },
44 | "devDependencies": {
45 | "babel-plugin-import": "1.13.3",
46 | "customize-cra": "1.0.0",
47 | "less": "4.1.2",
48 | "less-loader": "10.2.0",
49 | "postcss-px-to-viewport": "1.1.1",
50 | "react-app-rewired": "2.1.8",
51 | "webpack-bundle-analyzer": "4.5.0"
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/next/vite/src/favicon.svg:
--------------------------------------------------------------------------------
1 |
16 |
--------------------------------------------------------------------------------
/template/vite/src/favicon.svg:
--------------------------------------------------------------------------------
1 |
16 |
--------------------------------------------------------------------------------
/next/nextjs/README.md:
--------------------------------------------------------------------------------
1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
2 |
3 | ## Getting Started
4 |
5 | First, run the development server:
6 |
7 | ```bash
8 | npm run dev
9 | # or
10 | yarn dev
11 | ```
12 |
13 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
14 |
15 | You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
16 |
17 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
18 |
19 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
20 |
21 | ## Learn More
22 |
23 | To learn more about Next.js, take a look at the following resources:
24 |
25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
27 |
28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
29 |
30 | ## Deploy on Vercel
31 |
32 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
33 |
34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
35 |
--------------------------------------------------------------------------------
/template/nextjs/README.md:
--------------------------------------------------------------------------------
1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
2 |
3 | ## Getting Started
4 |
5 | First, run the development server:
6 |
7 | ```bash
8 | npm run dev
9 | # or
10 | yarn dev
11 | ```
12 |
13 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
14 |
15 | You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
16 |
17 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
18 |
19 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
20 |
21 | ## Learn More
22 |
23 | To learn more about Next.js, take a look at the following resources:
24 |
25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
27 |
28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
29 |
30 | ## Deploy on Vercel
31 |
32 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
33 |
34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
35 |
--------------------------------------------------------------------------------
/next/cra/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 | React App
28 |
29 |
30 |
31 |
32 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/template/create-react-app/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 | React App
28 |
29 |
30 |
31 |
32 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/next/remix/app/routes/index.tsx:
--------------------------------------------------------------------------------
1 | import { Arrow, Like } from '@react-vant/icons';
2 | import { Card, Image, Button, Toast, Space, Typography, Tag } from 'react-vant';
3 |
4 | export default function Index() {
5 | return (
6 |
10 |
11 | Hello React Vant v3
12 |
13 |
14 | 参照 Vant 打造的 React 框架移动端组件库。
15 |
16 |
17 | Toast.info('点击了Cover区域')}>
18 |
19 |
20 | }
22 | onClick={() => Toast.info('点击了Header区域')}
23 | >
24 | 封面展示
25 |
26 | Toast.info('点击了Body区域')}>
27 | 卡片内容区域
28 |
29 |
30 |
31 |
34 | }
36 | round
37 | color="linear-gradient(to right, #ff6034, #ee0a24)"
38 | size="small"
39 | >
40 | Like
41 |
42 |
43 |
44 |
45 |
46 | }
48 | onClick={() => Toast.info('点击了Header区域')}
49 | >
50 | 封面展示
51 |
52 | Toast.info('点击了Body区域')}>
53 | 卡片内容区域
54 |
55 | Toast.info('点击了Cover区域')}>
56 |
57 |
58 |
59 |
60 | );
61 | }
62 |
--------------------------------------------------------------------------------
/next/umijs/src/pages/index.tsx:
--------------------------------------------------------------------------------
1 | import { Arrow, Like } from '@react-vant/icons';
2 | import { Card, Image, Button, Toast, Space, Typography, Tag } from 'react-vant';
3 |
4 | export default function IndexPage() {
5 | return (
6 |
10 |
11 | Hello React Vant v3
12 |
13 |
14 | 参照 Vant 打造的 React 框架移动端组件库。
15 |
16 |
17 | Toast.info('点击了Cover区域')}>
18 |
19 |
20 | }
22 | onClick={() => Toast.info('点击了Header区域')}
23 | >
24 | 封面展示
25 |
26 | Toast.info('点击了Body区域')}>
27 | 卡片内容区域
28 |
29 |
30 |
31 |
34 | }
36 | round
37 | color="linear-gradient(to right, #ff6034, #ee0a24)"
38 | size="small"
39 | >
40 | Like
41 |
42 |
43 |
44 |
45 |
46 | }
48 | onClick={() => Toast.info('点击了Header区域')}
49 | >
50 | 封面展示
51 |
52 | Toast.info('点击了Body区域')}>
53 | 卡片内容区域
54 |
55 | Toast.info('点击了Cover区域')}>
56 |
57 |
58 |
59 |
60 | );
61 | }
62 |
--------------------------------------------------------------------------------
/next/cra/src/App.tsx:
--------------------------------------------------------------------------------
1 | import { Arrow, Like } from "@react-vant/icons";
2 | import { Card, Image, Button, Toast, Space, Typography, Tag } from "react-vant";
3 |
4 | export default function App() {
5 | return (
6 |
15 |
16 | Hello React Vant v3
17 |
18 |
19 | 参照 Vant 打造的 React 框架移动端组件库。
20 |
21 |
22 | Toast.info("点击了Cover区域")}>
23 |
24 |
25 | }
27 | onClick={() => Toast.info("点击了Header区域")}
28 | >
29 | 封面展示
30 |
31 | Toast.info("点击了Body区域")}>
32 | 卡片内容区域
33 |
34 |
35 |
36 |
39 | }
41 | round
42 | color="linear-gradient(to right, #ff6034, #ee0a24)"
43 | size="small"
44 | >
45 | Like
46 |
47 |
48 |
49 |
50 |
51 | }
53 | onClick={() => Toast.info("点击了Header区域")}
54 | >
55 | 封面展示
56 |
57 | Toast.info("点击了Body区域")}>
58 | 卡片内容区域
59 |
60 | Toast.info("点击了Cover区域")}>
61 |
62 |
63 |
64 |
65 | );
66 | }
67 |
--------------------------------------------------------------------------------
/next/vite/src/App.tsx:
--------------------------------------------------------------------------------
1 | import { Arrow, Like } from "@react-vant/icons";
2 | import { Card, Image, Button, Toast, Space, Typography, Tag } from "react-vant";
3 |
4 | export default function App() {
5 | return (
6 |
15 |
16 | Hello React Vant v3
17 |
18 |
19 | 参照 Vant 打造的 React 框架移动端组件库。
20 |
21 |
22 | Toast.info("点击了Cover区域")}>
23 |
24 |
25 | }
27 | onClick={() => Toast.info("点击了Header区域")}
28 | >
29 | 封面展示
30 |
31 | Toast.info("点击了Body区域")}>
32 | 卡片内容区域
33 |
34 |
35 |
36 |
39 | }
41 | round
42 | color="linear-gradient(to right, #ff6034, #ee0a24)"
43 | size="small"
44 | >
45 | Like
46 |
47 |
48 |
49 |
50 |
51 | }
53 | onClick={() => Toast.info("点击了Header区域")}
54 | >
55 | 封面展示
56 |
57 | Toast.info("点击了Body区域")}>
58 | 卡片内容区域
59 |
60 | Toast.info("点击了Cover区域")}>
61 |
62 |
63 |
64 |
65 | );
66 | }
67 |
--------------------------------------------------------------------------------
/next/astro/src/components/ReactVantDemo.tsx:
--------------------------------------------------------------------------------
1 | import { Arrow, Like } from "@react-vant/icons";
2 | import { Space, Typography, Tag, Card, Toast, Image, Button } from "react-vant";
3 |
4 | export default function ReactVantDemo() {
5 | return (
6 |
15 |
16 | Hello React Vant v3
17 |
18 |
19 | 参照 Vant 打造的 React 框架移动端组件库。
20 |
21 |
22 | Toast.info("点击了Cover区域")}>
23 |
24 |
25 | }
27 | onClick={() => Toast.info("点击了Header区域")}
28 | >
29 | 封面展示
30 |
31 | Toast.info("点击了Body区域")}>
32 | 卡片内容区域
33 |
34 |
35 |
36 |
39 | }
41 | round
42 | color="linear-gradient(to right, #ff6034, #ee0a24)"
43 | size="small"
44 | >
45 | Like
46 |
47 |
48 |
49 |
50 |
51 | }
53 | onClick={() => Toast.info("点击了Header区域")}
54 | >
55 | 封面展示
56 |
57 | Toast.info("点击了Body区域")}>
58 | 卡片内容区域
59 |
60 | Toast.info("点击了Cover区域")}>
61 |
62 |
63 |
64 |
65 | );
66 | }
67 |
--------------------------------------------------------------------------------
/next/astro/README.md:
--------------------------------------------------------------------------------
1 | # Welcome to [Astro](https://astro.build)
2 |
3 | [](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
4 | [](https://codesandbox.io/s/github/withastro/astro/tree/latest/examples/basics)
5 |
6 | > 🧑🚀 **Seasoned astronaut?** Delete this file. Have fun!
7 |
8 | 
9 |
10 |
11 | ## 🚀 Project Structure
12 |
13 | Inside of your Astro project, you'll see the following folders and files:
14 |
15 | ```
16 | /
17 | ├── public/
18 | │ └── favicon.svg
19 | ├── src/
20 | │ ├── components/
21 | │ │ └── Card.astro
22 | │ ├── layouts/
23 | │ │ └── Layout.astro
24 | │ └── pages/
25 | │ └── index.astro
26 | └── package.json
27 | ```
28 |
29 | Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
30 |
31 | There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
32 |
33 | Any static assets, like images, can be placed in the `public/` directory.
34 |
35 | ## 🧞 Commands
36 |
37 | All commands are run from the root of the project, from a terminal:
38 |
39 | | Command | Action |
40 | | :--------------------- | :------------------------------------------------- |
41 | | `npm install` | Installs dependencies |
42 | | `npm run dev` | Starts local dev server at `localhost:3000` |
43 | | `npm run build` | Build your production site to `./dist/` |
44 | | `npm run preview` | Preview your build locally, before deploying |
45 | | `npm run astro ...` | Run CLI commands like `astro add`, `astro preview` |
46 | | `npm run astro --help` | Get help using the Astro CLI |
47 |
48 | ## 👀 Want to learn more?
49 |
50 | Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
51 |
--------------------------------------------------------------------------------
/next/cra/README.md:
--------------------------------------------------------------------------------
1 | # Getting Started with Create React App
2 |
3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
4 |
5 | ## Available Scripts
6 |
7 | In the project directory, you can run:
8 |
9 | ### `npm start`
10 |
11 | Runs the app in the development mode.\
12 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
13 |
14 | The page will reload if you make edits.\
15 | You will also see any lint errors in the console.
16 |
17 | ### `npm test`
18 |
19 | Launches the test runner in the interactive watch mode.\
20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
21 |
22 | ### `npm run build`
23 |
24 | Builds the app for production to the `build` folder.\
25 | It correctly bundles React in production mode and optimizes the build for the best performance.
26 |
27 | The build is minified and the filenames include the hashes.\
28 | Your app is ready to be deployed!
29 |
30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
31 |
32 | ### `npm run eject`
33 |
34 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!**
35 |
36 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
37 |
38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
39 |
40 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
41 |
42 | ## Learn More
43 |
44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
45 |
46 | To learn React, check out the [React documentation](https://reactjs.org/).
47 |
--------------------------------------------------------------------------------
/template/create-react-app/README.md:
--------------------------------------------------------------------------------
1 | # Getting Started with Create React App
2 |
3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
4 |
5 | ## Available Scripts
6 |
7 | In the project directory, you can run:
8 |
9 | ### `yarn start`
10 |
11 | Runs the app in the development mode.\
12 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
13 |
14 | The page will reload if you make edits.\
15 | You will also see any lint errors in the console.
16 |
17 | ### `yarn test`
18 |
19 | Launches the test runner in the interactive watch mode.\
20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
21 |
22 | ### `yarn build`
23 |
24 | Builds the app for production to the `build` folder.\
25 | It correctly bundles React in production mode and optimizes the build for the best performance.
26 |
27 | The build is minified and the filenames include the hashes.\
28 | Your app is ready to be deployed!
29 |
30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
31 |
32 | ### `yarn eject`
33 |
34 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!**
35 |
36 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
37 |
38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
39 |
40 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
41 |
42 | ## Learn More
43 |
44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
45 |
46 | To learn React, check out the [React documentation](https://reactjs.org/).
47 |
--------------------------------------------------------------------------------
/next/nextjs/styles/Home.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | padding: 0 2rem;
3 | }
4 |
5 | .main {
6 | min-height: 100vh;
7 | padding: 4rem 0;
8 | flex: 1;
9 | display: flex;
10 | flex-direction: column;
11 | justify-content: center;
12 | align-items: center;
13 | }
14 |
15 | .footer {
16 | display: flex;
17 | flex: 1;
18 | padding: 2rem 0;
19 | border-top: 1px solid #eaeaea;
20 | justify-content: center;
21 | align-items: center;
22 | }
23 |
24 | .footer a {
25 | display: flex;
26 | justify-content: center;
27 | align-items: center;
28 | flex-grow: 1;
29 | }
30 |
31 | .title a {
32 | color: #0070f3;
33 | text-decoration: none;
34 | }
35 |
36 | .title a:hover,
37 | .title a:focus,
38 | .title a:active {
39 | text-decoration: underline;
40 | }
41 |
42 | .title {
43 | margin: 0;
44 | line-height: 1.15;
45 | font-size: 4rem;
46 | }
47 |
48 | .title,
49 | .description {
50 | text-align: center;
51 | }
52 |
53 | .description {
54 | margin: 4rem 0;
55 | line-height: 1.5;
56 | font-size: 1.5rem;
57 | }
58 |
59 | .code {
60 | background: #fafafa;
61 | border-radius: 5px;
62 | padding: 0.75rem;
63 | font-size: 1.1rem;
64 | font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
65 | Bitstream Vera Sans Mono, Courier New, monospace;
66 | }
67 |
68 | .grid {
69 | display: flex;
70 | align-items: center;
71 | justify-content: center;
72 | flex-wrap: wrap;
73 | max-width: 800px;
74 | }
75 |
76 | .card {
77 | margin: 1rem;
78 | padding: 1.5rem;
79 | text-align: left;
80 | color: inherit;
81 | text-decoration: none;
82 | border: 1px solid #eaeaea;
83 | border-radius: 10px;
84 | transition: color 0.15s ease, border-color 0.15s ease;
85 | max-width: 300px;
86 | }
87 |
88 | .card:hover,
89 | .card:focus,
90 | .card:active {
91 | color: #0070f3;
92 | border-color: #0070f3;
93 | }
94 |
95 | .card h2 {
96 | margin: 0 0 1rem 0;
97 | font-size: 1.5rem;
98 | }
99 |
100 | .card p {
101 | margin: 0;
102 | font-size: 1.25rem;
103 | line-height: 1.5;
104 | }
105 |
106 | .logo {
107 | height: 1em;
108 | margin-left: 0.5rem;
109 | }
110 |
111 | @media (max-width: 600px) {
112 | .grid {
113 | width: 100%;
114 | flex-direction: column;
115 | }
116 | }
117 |
--------------------------------------------------------------------------------
/template/nextjs/styles/Home.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | min-height: 100vh;
3 | padding: 0 0.5rem;
4 | display: flex;
5 | flex-direction: column;
6 | justify-content: center;
7 | align-items: center;
8 | }
9 |
10 | .main {
11 | padding: 5rem 0;
12 | flex: 1;
13 | display: flex;
14 | flex-direction: column;
15 | justify-content: center;
16 | align-items: center;
17 | }
18 |
19 | .footer {
20 | width: 100%;
21 | height: 100px;
22 | border-top: 1px solid #eaeaea;
23 | display: flex;
24 | justify-content: center;
25 | align-items: center;
26 | }
27 |
28 | .footer a {
29 | display: flex;
30 | justify-content: center;
31 | align-items: center;
32 | flex-grow: 1;
33 | }
34 |
35 | .title a {
36 | color: #0070f3;
37 | text-decoration: none;
38 | }
39 |
40 | .title a:hover,
41 | .title a:focus,
42 | .title a:active {
43 | text-decoration: underline;
44 | }
45 |
46 | .title {
47 | margin: 0;
48 | line-height: 1.15;
49 | font-size: 4rem;
50 | }
51 |
52 | .title,
53 | .description {
54 | text-align: center;
55 | }
56 |
57 | .description {
58 | line-height: 1.5;
59 | font-size: 1.5rem;
60 | }
61 |
62 | .code {
63 | background: #fafafa;
64 | border-radius: 5px;
65 | padding: 0.75rem;
66 | font-size: 1.1rem;
67 | font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
68 | Bitstream Vera Sans Mono, Courier New, monospace;
69 | }
70 |
71 | .grid {
72 | display: flex;
73 | align-items: center;
74 | justify-content: center;
75 | flex-wrap: wrap;
76 | max-width: 800px;
77 | margin-top: 3rem;
78 | }
79 |
80 | .card {
81 | margin: 1rem;
82 | padding: 1.5rem;
83 | text-align: left;
84 | color: inherit;
85 | text-decoration: none;
86 | border: 1px solid #eaeaea;
87 | border-radius: 10px;
88 | transition: color 0.15s ease, border-color 0.15s ease;
89 | width: 45%;
90 | }
91 |
92 | .card:hover,
93 | .card:focus,
94 | .card:active {
95 | color: #0070f3;
96 | border-color: #0070f3;
97 | }
98 |
99 | .card h2 {
100 | margin: 0 0 1rem 0;
101 | font-size: 1.5rem;
102 | }
103 |
104 | .card p {
105 | margin: 0;
106 | font-size: 1.25rem;
107 | line-height: 1.5;
108 | }
109 |
110 | .logo {
111 | height: 1em;
112 | margin-left: 0.5rem;
113 | }
114 |
115 | @media (max-width: 600px) {
116 | .grid {
117 | width: 100%;
118 | flex-direction: column;
119 | }
120 | }
--------------------------------------------------------------------------------
/next/nextjs/pages/index.tsx:
--------------------------------------------------------------------------------
1 | import type { NextPage } from 'next'
2 | import Head from 'next/head'
3 | import { Arrow, Like } from '@react-vant/icons';
4 | import { Card, Image, Button, Toast, Space, Typography, Tag } from 'react-vant';
5 |
6 | const Home: NextPage = () => {
7 | return (
8 |
9 |
10 |
Create Next App
11 |
12 |
13 |
14 |
15 |
19 |
20 | Hello React Vant v3
21 |
22 |
23 | 参照 Vant 打造的 React 框架移动端组件库。
24 |
25 |
26 | Toast.info({ message: '点击了Cover区域13', duration: 300000 })}>
27 |
28 |
29 | }
31 | onClick={() => Toast.info('点击了Header区域')}
32 | >
33 | 封面展示
34 |
35 | Toast.info('点击了Body区域')}>
36 | 卡片内容区域
37 |
38 |
39 |
40 |
43 | }
45 | round
46 | color="linear-gradient(to right, #ff6034, #ee0a24)"
47 | size="small"
48 | >
49 | Like
50 |
51 |
52 |
53 |
54 |
55 | }
57 | onClick={() => Toast.info('点击了Header区域')}
58 | >
59 | 封面展示
60 |
61 | Toast.info('点击了Body区域')}>
62 | 卡片内容区域
63 |
64 | Toast.info('点击了Cover区域')}>
65 |
66 |
67 |
68 |
69 |
70 | )
71 | }
72 |
73 | export default Home
74 |
--------------------------------------------------------------------------------
/template/create-react-app/src/logo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/template/vite/src/logo.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/template/nextjs/pages/index.tsx:
--------------------------------------------------------------------------------
1 | import type { NextPage } from 'next'
2 | import Head from 'next/head'
3 | import React from 'react'
4 | import { Image, Button, Dialog } from 'react-vant'
5 | import styles from '../styles/Home.module.css'
6 |
7 | const Home: NextPage = () => {
8 | return (
9 |
10 |
11 |
Create Next App
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | Welcome to Next.js!
20 |
21 |
22 |
23 | Get started by editing{' '}
24 | pages/index.js
25 |
26 |
27 |
56 |
57 |
58 |
70 |