亚洲see少妇裸体pics,欧美日产欧美日产免费一区,亚洲综合av一区二区三区不卡,一区二区中文字幕无码成人片,一区二区三区四区高清无码

<dfn id="422yv"></dfn>

TDesign Vue Next 項目操作教程

項目概述

這是一個(gè)基于 TDesign Vue Next 的企業(yè)級中后臺項目模板，采用現代化的前端技術(shù)棧構建。

技術(shù)棧

框架: Vue 3 + TypeScript
構建工具: Vite
狀態(tài)管理: Pinia
路由: Vue Router 4
UI組件庫: TDesign Vue Next
樣式: Less
代碼規范: ESLint + Prettier + Stylelint
國際化: Vue I18n
圖表: ECharts
HTTP客戶(hù)端: Axios
Mock數據: MockJS + Vite Plugin Mock

項目特性

?? 支持自定義主題配置
?? 支持暗黑模式
?? 國際化支持
?? 響應式布局
?? 權限管理
?? 豐富的圖表組件
??? 完善的開(kāi)發(fā)工具鏈
?? 開(kāi)箱即用的中后臺解決方案

項目結構

xiao-qivue/
├── docs/                    # 文檔目錄
├── mock/                    # Mock數據
├── public/                  # 靜態(tài)資源
├── src/                     # 源碼目錄
│   ├── api/                 # API接口
│   │   └── model/           # 數據模型
│   ├── assets/              # 靜態(tài)資源
│   ├── components/          # 公共組件
│   │   ├── color/           # 顏色組件
│   │   ├── common-table/    # 通用表格
│   │   ├── product-card/    # 產(chǎn)品卡片
│   │   ├── result/          # 結果頁(yè)組件
│   │   ├── thumbnail/       # 縮略圖組件
│   │   └── trend/           # 趨勢圖組件
│   ├── config/              # 配置文件
│   ├── constants/           # 常量定義
│   ├── hooks/               # Vue Hooks
│   ├── layouts/             # 布局組件
│   │   ├── components/      # 布局子組件
│   │   └── frame/           # 框架布局
│   ├── locales/             # 國際化
│   │   └── lang/            # 語(yǔ)言包
│   ├── pages/               # 頁(yè)面組件
│   │   ├── dashboard/       # 儀表板
│   │   ├── detail/          # 詳情頁(yè)
│   │   ├── form/            # 表單頁(yè)
│   │   ├── list/            # 列表頁(yè)
│   │   ├── login/           # 登錄頁(yè)
│   │   ├── result/          # 結果頁(yè)
│   │   └── user/            # 用戶(hù)頁(yè)
│   ├── router/              # 路由配置
│   │   └── modules/         # 路由模塊
│   ├── store/               # 狀態(tài)管理
│   │   └── modules/         # Store模塊
│   ├── style/               # 樣式文件
│   ├── types/               # TypeScript類(lèi)型定義
│   └── utils/               # 工具函數
│       ├── request/         # 請求工具
│       └── route/           # 路由工具
├── .env                     # 環(huán)境變量
├── .env.development         # 開(kāi)發(fā)環(huán)境變量
├── .env.test               # 測試環(huán)境變量
├── .env.site               # 站點(diǎn)環(huán)境變量
├── package.json            # 項目配置
├── vite.config.ts          # Vite配置
├── tsconfig.json           # TypeScript配置
└── README.md               # 項目說(shuō)明

環(huán)境要求

Node.js: >= 18.18.0
包管理器: npm / yarn / pnpm

快速開(kāi)始

1. 安裝依賴(lài)

# 使用 npm
npm install

# 使用 yarn
yarn install

# 使用 pnpm
pnpm install

2. 啟動(dòng)開(kāi)發(fā)服務(wù)器

# 啟動(dòng)開(kāi)發(fā)服務(wù)器（自動(dòng)打開(kāi)瀏覽器）
npm run dev

# Linux環(huán)境下啟動(dòng)（不自動(dòng)打開(kāi)瀏覽器）
npm run dev:linux

# 啟動(dòng)Mock模式
npm run dev:mock

開(kāi)發(fā)服務(wù)器將在 http://localhost:3002 啟動(dòng)

3. 構建項目

# 生產(chǎn)環(huán)境構建
npm run build

# 測試環(huán)境構建
npm run build:test

# 站點(diǎn)構建
npm run build:site

# 僅類(lèi)型檢查
npm run build:type

4. 預覽構建結果

npm run preview

開(kāi)發(fā)指南

代碼規范

項目配置了完善的代碼規范工具：

# ESLint檢查
npm run lint

# ESLint自動(dòng)修復
npm run lint:fix

# Stylelint檢查
npm run stylelint

# Stylelint自動(dòng)修復
npm run stylelint:fix

Git提交規范

項目使用 Conventional Commits 規范：

# 交互式提交
npx cz

# 或者直接提交（需遵循規范）
git commit -m "feat: 添加新功能"

提交類(lèi)型：

feat: 新功能
fix: 修復bug
docs: 文檔更新
style: 代碼格式調整
refactor: 代碼重構
test: 測試相關(guān)
chore: 構建過(guò)程或輔助工具的變動(dòng)

環(huán)境變量配置

項目支持多環(huán)境配置：

.env - 通用環(huán)境變量
.env.development - 開(kāi)發(fā)環(huán)境
.env.test - 測試環(huán)境
.env.site - 站點(diǎn)環(huán)境

路由配置

路由采用模塊化配置，位于 src/router/modules/ 目錄：

// 示例路由模塊
export default [
  {
    path: '/example',
    name: 'example',
    component: () => import('@/layouts/index.vue'),
    meta: {
      title: '示例頁(yè)面',
      icon: 'example-icon',
    },
    children: [
      {
        path: 'detail',
        name: 'example-detail',
        component: () => import('@/pages/example/detail.vue'),
        meta: {
          title: '詳情頁(yè)',
        },
      },
    ],
  },
];

狀態(tài)管理

使用 Pinia 進(jìn)行狀態(tài)管理，支持持久化：

// 示例 Store
import { defineStore } from 'pinia';

export const useExampleStore = defineStore('example', {
  state: () => ({
    data: [],
  }),
  
  getters: {
    count: (state) => state.data.length,
  },
  
  actions: {
    async fetchData() {
      // 異步操作
    },
  },
  
  // 持久化配置
  persist: {
    key: 'example-store',
    storage: localStorage,
  },
});

API接口

API接口統一管理在 src/api/ 目錄：

// 示例API
import { request } from '@/utils/request';

export interface ExampleData {
  id: number;
  name: string;
}

export function getExampleList() {
  return request.get<ExampleData[]>('/api/example/list');
}

export function createExample(data: Partial<ExampleData>) {
  return request.post('/api/example', data);
}

組件開(kāi)發(fā)

1. 頁(yè)面組件

頁(yè)面組件放在 src/pages/ 目錄下：

<template>
  <div class="example-page">
    <t-card title="示例頁(yè)面">
      <t-button @click="handleClick">點(diǎn)擊按鈕</t-button>
    </t-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const loading = ref(false);

const handleClick = () => {
  console.log('按鈕被點(diǎn)擊');
};
</script>

<style lang="less" scoped>
.example-page {
  padding: 20px;
}
</style>

2. 公共組件

公共組件放在 src/components/ 目錄下：

<template>
  <div class="custom-component">
    <slot />
  </div>
</template>

<script setup lang="ts">
interface Props {
  title?: string;
  size?: 'small' | 'medium' | 'large';
}

const props = withDefaults(defineProps<Props>(), {
  title: '',
  size: 'medium',
});
</script>

樣式開(kāi)發(fā)

1. 全局樣式

全局樣式文件位于 src/style/ 目錄：

index.less - 主樣式文件
variables.less - 變量定義
mixins.less - 混入函數

2. 主題定制

可以通過(guò)修改 src/style/variables.less 來(lái)定制主題：

// 主色調
@brand-color: #0052d9;
@brand-color-1: #f2f3ff;
@brand-color-2: #d9e1ff;
// ... 更多變量

國際化

1. 添加語(yǔ)言包

在 src/locales/lang/ 目錄下添加語(yǔ)言文件：

// zh_CN.ts
export default {
  common: {
    confirm: '確認',
    cancel: '取消',
  },
  pages: {
    login: {
      title: '登錄',
      username: '用戶(hù)名',
      password: '密碼',
    },
  },
};

2. 使用國際化

<template>
  <div>
    <h1>{{ $t('pages.login.title') }}</h1>
    <t-button>{{ $t('common.confirm') }}</t-button>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n';

const { t } = useI18n();
</script>

部署指南

1. 構建生產(chǎn)版本

npm run build

構建產(chǎn)物將輸出到 dist/ 目錄。

2. 服務(wù)器部署

Nginx配置示例

server {
    listen 80;
    server_name your-domain.com;
    root /path/to/dist;
    index index.html;

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

    # 靜態(tài)資源緩存
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

3. Docker部署

創(chuàng )建 Dockerfile：

FROM nginx:alpine

COPY dist/ /usr/share/nginx/html/
COPY nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

構建和運行：

docker build -t my-vue-app .
docker run -p 80:80 my-vue-app

常見(jiàn)問(wèn)題

1. 端口沖突

如果默認端口3002被占用，可以修改 vite.config.ts：

export default {
  server: {
    port: 3003, // 修改為其他端口
  },
};

2. 代理配置

開(kāi)發(fā)環(huán)境API代理配置在 vite.config.ts：

export default {
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
};

3. 構建優(yōu)化

如果構建產(chǎn)物過(guò)大，可以進(jìn)行以下優(yōu)化：

// vite.config.ts
export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['vue', 'vue-router', 'pinia'],
          tdesign: ['tdesign-vue-next'],
          charts: ['echarts'],
        },
      },
    },
  },
};

更多資源

TDesign Vue Next 官方文檔
Vue 3 官方文檔
Vite 官方文檔
Pinia 官方文檔
TypeScript 官方文檔

技術(shù)支持

如果在使用過(guò)程中遇到問(wèn)題，可以：

查看項目 GitHub Issues
參考 TDesign 社區
提交新的 Issue 或 Pull Request

祝您開(kāi)發(fā)愉快！ ??

文章目錄

亚洲see少妇裸体pics,欧美日产欧美日产免费一区,亚洲综合av一区二区三区不卡,一区二区中文字幕无码成人片,一区二区三区四区高清无码

<track id="kibji"></track>

<sup id="kibji"></sup>

<u id="kibji"><pre id="kibji"><p id="kibji"></p></pre></u><menu id="kibji"><source id="kibji"><xmp id="kibji"></xmp></source></menu>