TDesign Vue Starter 使用教程

1. 项目目录结构及介绍

TDesign Vue Starter 的目录结构设计清晰，便于理解和开发。以下是主要目录及其功能：

├── public          # 静态资源目录，如 favicon 和 index.html
├── src             # 源代码目录
│   ├── api         # 接口请求相关
│   ├── assets      # 图片和其他静态资产
│   ├── components  # 自定义组件
│   ├── mock        # 模拟数据
│   ├── router      # 路由配置
│   ├── store       # Pinia状态管理
│   ├── styles      # 样式文件，包括主题定制
│   ├── views       # 页面组件
│   └── App.vue     # 应用入口组件
├── tests           # 单元测试
├── vite.config.js  # Vite构建配置
└── ...

2. 项目启动文件介绍

vite.config.js

这是Vite的配置文件，用于自定义Vite的行为，例如设置服务器端口、代理、CSS预处理器等。例如，你可以在这里配置你的热更新(HMR)、公共路径(base)或其他插件。

// vite.config.js 示例
export default {
  base: './',
  server: {
    port: 3000,
  },
  plugins: [/* ... */],
};

main.js

作为应用的入口文件，src/main.js导入并注册Vue实例、全局组件以及配置。在这个文件中，你可以初始化Pinia的状态管理库，安装全局UI组件等。

import { createApp } from 'vue';
import App from './App.vue';
import { createPinia } from 'pinia';

const app = createApp(App);
app.use(createPinia());
app.mount('#app');

3. 项目的配置文件介绍

tsconfig.json & jsconfig.json

这两个文件分别用于TypeScript和JavaScript的配置，设置编译选项，例如目标语言版本、模块系统、代码规范等。这些配置影响着TypeScript或JavaScript的编译行为。

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    // 其他配置项...
  }
}

.stylelintrc.js & .eslintrc.js

.stylelintrc.js 和 .eslintrc.js 分别用于样式（CSS/Less/Sass）和JavaScript代码的 lint 规则配置，确保代码风格的一致性。你可以在这里添加或修改规则以适应团队规范。

// .eslintrc.js 示例
module.exports = {
  extends: 'plugin:prettier/recommended',
  rules: {
    // 添加或修改ESLint规则
  },
};

package.json

项目的核心配置文件，包含了项目的基本信息、依赖包列表、脚本命令等。你可以通过运行npm run来执行scripts中的命令，比如build, dev等。

{
  "name": "my-project",
  "version": "0.1.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
    // 依赖包...
  },
  "devDependencies": {
    // 开发依赖包...
  }
}

了解了以上关键文件和目录之后，你应该能够更顺利地开始你的TDesign Vue项目开发了。如果你需要更多的帮助，可以查看项目的官方文档。