Nutritious Pancake Mountain

    @viterjs/create-app

    1.0.8-beta.0 • Public • Published

    Viter logo

    小而美的 Vite 中后台开发框架

    npm package node compatibility


    快速上手

    环境准备

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

    $ node -v
    v12.18.3

    搭建第一个 Viter 项目

    使用 NPM:

    $ npm init @viterjs/app
    
    npx: 5 安装成功,用时 4.312 秒
    ✔ Project name: · viter-project
    ✔ Select a framework: · react-admin-ts
    react-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',
      },
    });

    更多配置,请前往 Viter 文档 查看。

    部署发布

    构建

    $ 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 KiB
    dist/assets/index.cb6faa6d.js    0.18 KiB / brotli: 0.12 KiB
    dist/assets/index.0662466a.js    0.77 KiB / brotli: 0.33 KiB
    dist/assets/index.d5836ef7.js    0.12 KiB / brotli: 0.09 KiB
    dist/assets/index.0c87e543.js    0.12 KiB / brotli: 0.09 KiB
    dist/assets/index.a851cde7.js    2.38 KiB / brotli: 0.84 KiB
    dist/assets/index.588c1ae3.css   0.53 KiB / brotli: 0.25 KiB
    dist/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 目录部署到服务器上。

    Packages

    Package Version
    viter viter version
    @viterjs/render plugin-vue version
    @viterjs/runtime runtime version
    @viterjs/eslint-config @viterjs/eslint-config version
    @viterjs/create-app create-vite version

    License

    MIT

    Keywords

    Install

    npm i @viterjs/create-app

    DownloadsWeekly Downloads

    1

    Version

    1.0.8-beta.0

    License

    MIT

    Unpacked Size

    16.5 kB

    Total Files

    20

    Last publish

    Collaborators

    • suanmeixiansheng
    • jerry_x