Vue Naive Admin

https://isme.top/guide/
Admin
The provided content is a 403 Forbidden error page and does not contain information about a project.
Tokens:4,180
Snippets:29
Trust Score:1.7
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install Frontend Dependencies

Source: https://isme.top/guide/01-%E6%8C%87%E5%8D%97/01-%E5%BF%AB%E9%80%9F%E5%BC%80%E5%A7%8B

Installs the Node.js dependencies for the frontend project using pnpm.

```cmd
pnpm i
```

--------------------------------

### Install Backend Dependencies

Source: https://isme.top/guide/01-%E6%8C%87%E5%8D%97/01-%E5%BF%AB%E9%80%9F%E5%BC%80%E5%A7%8B

Installs the necessary Node.js dependencies for the backend project using npm.

```cmd
npm i
```

--------------------------------

### Start Frontend Development Server

Source: https://isme.top/guide/01-%E6%8C%87%E5%8D%97/01-%E5%BF%AB%E9%80%9F%E5%BC%80%E5%A7%8B

Starts the frontend development server, typically using Vite or Vue CLI, for local development.

```cmd
npm run dev
```

--------------------------------

### Start Backend Development Server

Source: https://isme.top/guide/01-%E6%8C%87%E5%8D%97/01-%E5%BF%AB%E9%80%9F%E5%BC%80%E5%A7%8B

Starts the backend development server in watch mode, automatically restarting on file changes.

```cmd
npm run start:dev
```

--------------------------------

### Clone Backend from GitHub

Source: https://isme.top/guide/01-%E6%8C%87%E5%8D%97/01-%E5%BF%AB%E9%80%9F%E5%BC%80%E5%A7%8B

Clones the isme-nest-serve backend repository from GitHub.

```cmd
git clone https://github.com/zclzone/isme-nest-serve.git
```

--------------------------------

### Install pnpm

Source: https://isme.top/guide/01-%E6%8C%87%E5%8D%97/01-%E5%BF%AB%E9%80%9F%E5%BC%80%E5%A7%8B

Installs the pnpm package manager globally using npm. pnpm is recommended for managing project dependencies.

```sh
npm i -g pnpm
```

--------------------------------

### Clone Backend from Gitee

Source: https://isme.top/guide/01-%E6%8C%87%E5%8D%97/01-%E5%BF%AB%E9%80%9F%E5%BC%80%E5%A7%8B

Clones the isme-nest-serve backend repository from Gitee.

```cmd
git clone https://gitee.com/isme-admin/isme-nest-serve.git
```

--------------------------------

### Clone Frontend from GitHub

Source: https://isme.top/guide/01-%E6%8C%87%E5%8D%97/01-%E5%BF%AB%E9%80%9F%E5%BC%80%E5%A7%8B

Clones the Vue Naive Admin frontend repository from GitHub. The '-b 2.x' flag specifies the branch to clone.

```cmd
git clone -b 2.x https://github.com/zclzone/vue-naive-admin.git
```

--------------------------------

### Clone Frontend from Gitee

Source: https://isme.top/guide/01-%E6%8C%87%E5%8D%97/01-%E5%BF%AB%E9%80%9F%E5%BC%80%E5%A7%8B

Clones the Vue Naive Admin frontend repository from Gitee. The '-b 2.x' flag specifies the branch to clone.

```cmd
git clone -b 2.x https://gitee.com/isme-admin/vue-naive-admin.git
```

--------------------------------

### Start Backend Service with PM2

Source: https://isme.top/guide/01-%E6%8C%87%E5%8D%97/02-%E6%9E%84%E5%BB%BA%E9%83%A8%E7%BD%B2

Command to start the backend service using PM2, a process manager for Node.js applications. It includes options for naming the process and watching for file changes.

```cmd
pm2 start -n nest-jwt ./index.js --watch
```

--------------------------------

### Build Backend Locally

Source: https://isme.top/guide/01-%E6%8C%87%E5%8D%97/02-%E6%9E%84%E5%BB%BA%E9%83%A8%E7%BD%B2

Command to build the backend project. This process bundles dependencies into a single executable file.

```cmd
pnpm build
```

--------------------------------

### Backend Environment Configuration

Source: https://isme.top/guide/01-%E6%8C%87%E5%8D%97/02-%E6%9E%84%E5%BB%BA%E9%83%A8%E7%BD%B2

Example `.env` file for backend configuration, including database credentials, JWT secret, and other runtime settings. This file should be adapted to the specific server environment.

```env
DB_HOST=localhost
DB_PORT=3306
DB_USER=admin
DB_PWD=123456
DB_DATABASE=isme
DB_SYNC=true
JWT_SECRET="xxxxxx"
IS_PREVIEW=false
```

--------------------------------

### Preview Backend Locally

Source: https://isme.top/guide/01-%E6%8C%87%E5%8D%97/02-%E6%9E%84%E5%BB%BA%E9%83%A8%E7%BD%B2

Command to run the built backend application locally. It executes the bundled JavaScript file.

```cmd
node ncc-dist/index.js
```

--------------------------------

### Build Frontend Locally

Source: https://isme.top/guide/01-%E6%8C%87%E5%8D%97/02-%E6%9E%84%E5%BB%BA%E9%83%A8%E7%BD%B2

Command to build the frontend project for local deployment. This command generates production-ready static files.

```cmd
pnpm build
```

--------------------------------

### Preview Frontend Locally

Source: https://isme.top/guide/01-%E6%8C%87%E5%8D%97/02-%E6%9E%84%E5%BB%BA%E9%83%A8%E7%BD%B2

Command to preview the frontend build locally. This uses Vite's preview server, which respects proxy configurations in vite.config.js.

```cmd
pnpm preview
```

--------------------------------

### Nginx Proxy Configuration for API Requests

Source: https://isme.top/guide/01-%E6%8C%87%E5%8D%97/02-%E6%9E%84%E5%BB%BA%E9%83%A8%E7%BD%B2

Example Nginx configuration to proxy API requests to a backend server running on localhost:8085. It includes essential headers for proper request forwarding.

```nginx
location ^~ /api/ {
    proxy_pass http://localhost:8085/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header REMOTE-HOST $remote_addr;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header X-Forwarded-Proto $scheme;
}
```

--------------------------------

### Vue Naive Admin Frontend Stack

Source: https://isme.top/guide/%E9%A1%B9%E7%9B%AE%E4%BB%8B%E7%BB%8D

This snippet outlines the core frontend technologies used in Vue Naive Admin, highlighting its modern Vue 3 setup with Vite for fast development, Pinia for state management, and Unocss for atomic CSS.

```Vue
Vite + Vue3 + Pinia + Unocss
```

--------------------------------

### Nginx Configuration for History Mode Routing

Source: https://isme.top/guide/01-%E6%8C%87%E5%8D%97/02-%E6%9E%84%E5%BB%BA%E9%83%A8%E7%BD%B2

Nginx configuration snippet to resolve 404 errors for applications using history mode routing by redirecting unmatched requests to index.html.

```nginx
location / {
  try_files $uri $uri/ /index.html;
}
```

--------------------------------

### Vercel Rewrite Configuration for History Mode

Source: https://isme.top/guide/01-%E6%8C%87%E5%8D%97/02-%E6%9E%84%E5%BB%BA%E9%83%A8%E7%BD%B2

JSON configuration for Vercel to handle 404 errors with history mode routing by rewriting all routes to index.html.

```json
{
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ]
}
```

--------------------------------

### Vue Naive Admin Backend Source Code (Gitee)

Source: https://isme.top/guide/%E9%A1%B9%E7%9B%AE%E4%BB%8B%E7%BB%8D

Provides the Gitee repository link for the Nestjs backend source code of Vue Naive Admin.

```Link
isme-nest-serve | gitee
```

--------------------------------

### Vue Naive Admin Backend Source Code (GitHub)

Source: https://isme.top/guide/%E9%A1%B9%E7%9B%AE%E4%BB%8B%E7%BB%8D

Provides the GitHub repository link for the Nestjs backend source code of Vue Naive Admin.

```Link
isme-nest-serve | github
```

--------------------------------

### Vue Naive Admin Icon Integration

Source: https://isme.top/guide/%E9%A1%B9%E7%9B%AE%E4%BB%8B%E7%BB%8D

This snippet describes the icon solution used in Vue Naive Admin, which leverages Iconify and Unocss for flexible and efficient icon management, including support for custom icons and dynamic rendering.

```Vue
iconify + unocss
```

--------------------------------

### Vue Naive Admin UI Framework

Source: https://isme.top/guide/%E9%A1%B9%E7%9B%AE%E4%BB%8B%E7%BB%8D

This snippet highlights the use of Naive UI in Vue Naive Admin, emphasizing its contribution to a minimalist code style, clean page design, and easy theme customization.

```Vue
Naive UI
```

--------------------------------

### Vue Naive Admin Global Utilities

Source: https://isme.top/guide/%E9%A1%B9%E7%9B%AE%E4%BB%8B%E7%BB%8D

This snippet explains the global utility methods encapsulated using Naive UI in Vue Naive Admin, such as message notifications that support batch alerts and cross-page singleton patterns.

```Vue
基于 Naive UI 封装 message 全局工具方法
```

--------------------------------

### Vue Naive Admin Reusable Components

Source: https://isme.top/guide/%E9%A1%B9%E7%9B%AE%E4%BB%8B%E7%BB%8D

This snippet lists common business components built with Naive UI in Vue Naive Admin, including Page, CRUD Table, and Modal components, designed to simplify development and reduce repetitive tasks.

```Vue
基于 Naive UI 封装常用的业务组件，包含 Page 组件、CRUD 表格组件及 Modal 组件等
```

--------------------------------

### Vue Naive Admin Routing Design

Source: https://isme.top/guide/%E9%A1%B9%E7%9B%AE%E4%BB%8B%E7%BB%8D

This snippet explains the routing approach in Vue Naive Admin, featuring a flat routing design that allows any component to be a page and simplifies KeepAlive implementation. It also mentions dynamic route generation based on permissions.

```Vue
扁平化路由
```

--------------------------------

### Vue Naive Admin Backend Stack

Source: https://isme.top/guide/%E9%A1%B9%E7%9B%AE%E4%BB%8B%E7%BB%8D

This snippet details the backend technologies provided with Vue Naive Admin, which includes Nestjs for the framework, TypeOrm for data access, and MySql as the database. It also mentions built-in JWT and RBAC functionalities.

```Nestjs
Nestjs + TypeOrm + MySql
```

--------------------------------

### Vue Naive Admin Authentication Refresh

Source: https://isme.top/guide/%E9%A1%B9%E7%9B%AE%E4%BB%8B%E7%BB%8D

This snippet describes the implementation of seamless token refresh using Redis in Vue Naive Admin, focusing on user session control, security, and user experience.

```Vue
基于Redis集成 无感刷新
```

--------------------------------

### Vue Naive Admin Permission Routing

Source: https://isme.top/guide/%E9%A1%B9%E7%9B%AE%E4%BB%8B%E7%BB%8D

This snippet details how Vue Naive Admin handles routing based on permissions, enabling dynamic route generation and distinguishing between 403 (Forbidden) and 404 (Not Found) errors.

```Vue
基于权限动态生成路由
```
Tokens:
Raw