create-czyvite v1.0.17

create-upvite

Scaffolding Your First upVite Project

Compatibility Note: Vite requires Node.js version >=12.2.0. However, some templates require a higher Node.js version to work, please upgrade if your package manager warns about it.

With NPM:

$ npm create upvite

With Yarn:

$ yarn create upvite

With PNPM:

$ pnpm create upvite

Then follow the prompts!

You can also directly specify the project name and the template you want to use via additional command line options. For example, to scaffold a Vite + Vue project, run:

# npm 6.x
npm create upvite@latest my-test-app --template react-router

# npm 7+, extra double-dash is needed:
npm create upvite@latest my-test-app -- --template react-router

# yarn
yarn create upvite my-test-app --template react-router

# pnpm
pnpm create upvite my-test-app -- --template react-router

Currently supported template presets include:

• react
• react-ts
• react-router
• react-pages

# npm example
npm create czyvite@latest my-test-app -- --template react-router  --install true  --path /Users/cuizhengyang/s

template说明

react

仅使用 react 的空项目，react 版本是 18.0.0

react-ts

使用 react+typescript 的空项目，react 版本是 18.0.0 , typescript 版本是 4.6.3

react-router

使用 react+react-router-dom 的空项目，react 版本是 18.0.0 , react-router-dom 版本是 6.3.0。可以在src/router/router.jsx 中配置项目的路由

react-pages

使用 react+react-router-dom 的空项目，react 版本是 18.0.0 , react-router-dom 版本是 6.3.0,同时支持自动识别项目的路由。默认一个页面是 src/pages 下的一个以.js 或者 .jsx为后缀的模块文件。 Pages 会自动将您的 pages 目录中的文件映射到具有相同名称的路由:

• src/pages/users.vue -> /users
• src/pages/users/profile.vue -> /profile
• src/pages/settings.vue -> /settings

名称为index的文件被视为路由的索引页面：

• src/pages/index.jsx -> /
• src/pages/users/index.jsx -> / users

可以在vite.config.js中对路由页面进行更多配置，具体参数如下：

dirs

• Type: string | (string | PageOptions)[]
• Default: 'src/pages'

Paths to the pages directory. Supports globs.

Can be:

• single path: routes point to /
• array of paths: all routes in the paths point to /
• array of PageOptions, Check below 👇

Specifying a glob or an array of PageOptions allow you to use multiple pages folder, and specify the base route to append to the path and the route name.

Example:

# folder structure
src/
  ├── features/
  │  └── dashboard/
  │     ├── code/
  │     ├── components/
  │     └── pages/
  ├── admin/
  │   ├── code/
  │   ├── components/
  │   └── pages/
  └── pages/

// vite.config.js
export default {
  plugins: [
    Pages({
      dirs: [
        { dir: 'src/pages', baseRoute: '' },
        { dir: 'src/features/**/pages', baseRoute: 'features' },
        { dir: 'src/admin/pages', baseRoute: 'admin' },
      ],
    }),
  ],
}

extensions

• Type: string[]
• Default:
  • Vue: ['vue', 'ts', 'js']
  • React: ['tsx', 'jsx', 'ts', 'js']
  • Solid: ['tsx', 'jsx', 'ts', 'js']

An array of valid file extensions for pages.

exclude

• Type: string[]
• Default: []

An array of glob patterns to exclude matches.

# folder structure
src/pages/
  ├── users/
  │  ├── components
  │  │  └── form.vue
  │  ├── [id].vue
  │  └── index.vue
  └── home.vue

// vite.config.js
export default {
  plugins: [
    Pages({
      exclude: ['**/components/*.vue'],
    }),
  ],
}

importMode

• Type: 'sync' | 'async' | (filepath: string, pluginOptions: ResolvedOptions) => 'sync' | 'async')
• Default:
  • Top level index file: 'sync', others: async.

Import mode can be set to either async, sync, or a function which returns one of those values.

To get more fine-grained control over which routes are loaded sync/async, you can use a function to resolve the value based on the route path. For example:

// vite.config.js
export default {
  plugins: [
    Pages({
      importMode(filepath, options) {
        // default resolver
        // for (const page of options.dirs) {
        //   if (page.baseRoute === '' && filepath.startsWith(`/${page.dir}/index`))
        //     return 'sync'
        // }
        // return 'async'
        // Load about page synchronously, all other pages are async.
        return filepath.includes('about') ? 'sync' : 'async'
      },
    }),
  ],
}

If you are using async mode with react-router, you will need to wrap your route components with Suspense:

const App = () => {
  return (
    <Suspense fallback={<p>Loading...</p>}>
      {useRoutes(routes)}
    </Suspense>
  )
}

更多配置方式