快速上手

环境准备

首先得有 node，并确保 node 版本是 12 或以上。（mac 下推荐使用 nvm 来管理 node 版本）

$ node -vv12.18.3

搭建第一个 Viter 项目

使用 NPM:

$ npm init @viterjs/app
npx: 5 安装成功，用时 4.312 秒✔ Project name: · viter-project✔ Select a framework: · react-admin-tsreact-admin-ts
Scaffolding project in /Users/jerry/work-project/viter-project...
Done. Now run:
  cd viter-project  npm install  npm run dev

启动项目

$ npm run dev
> viter-project@0.0.1 dev /Users/xxx/github-project/xxx> viter

  vite v2.5.1 dev server running at:
  > Local: http://localhost:3000/  > Network: use `--host` to expose

在浏览器里打开 http://localhost:3000/，能看到以下界面，

修改配置

通过修改项目中的 viter.config.ts 文件，配置项目。模板中的配置如下：

import { defineConfig } from 'viter';import reactRefresh from '@vitejs/plugin-react-refresh';
export default defineConfig({  // 插件配置  plugins: [reactRefresh()],  // 配置路由  routes: [    {      path: '/',      component: '@/layout',      routes: [        { path: '/', redirect: '/home' },        { path: '/home', component: './Home' },        { path: '/about', component: './About' },        { path: '/404', component: './NotFind' },        { path: '/*', redirect: '/404' },      ],    },  ],  // 开启动态加载  dynamicImport: {    loading: '@/loading',  },});

部署发布

构建

$ npm run build
> viter-project@0.0.0 build /Users/jerry/github-project/viter-project> viter build
vite v2.5.6 building for production...✓ 44 modules transformed.dist/index.html                  0.45 KiBdist/assets/index.cb6faa6d.js    0.18 KiB / brotli: 0.12 KiBdist/assets/index.0662466a.js    0.77 KiB / brotli: 0.33 KiBdist/assets/index.d5836ef7.js    0.12 KiB / brotli: 0.09 KiBdist/assets/index.0c87e543.js    0.12 KiB / brotli: 0.09 KiBdist/assets/index.a851cde7.js    2.38 KiB / brotli: 0.84 KiBdist/assets/index.588c1ae3.css   0.53 KiB / brotli: 0.25 KiBdist/assets/vendor.eb369f9e.js   143.59 KiB / brotli: 40.60 KiB
  finished in 3202ms.

构建产物默认生成到 ./dist 下。

本地验证

发布之前，可以通过 serve 做本地验证，

$ npm run serve
> viter-project@0.0.0 serve /Users/xxx/github-project/viter-project> viter preview

  vite v2.5.6 build preview server running at:
  > Local: http://localhost:5000/  > Network: use `--host` to expose

访问 http://localhost:5000，正常情况下应该是和执行 npm run dev 时是一致的。

部署

本地验证完，就可以部署了。你需要把 dist 目录部署到服务器上。