fe-workflow 项目教程

fe-workflow 项目教程

fe-workflow📃 FE Engineering Construction Guide Refspec 前端工程化操作指南文档项目地址:https://gitcode.com/gh_mirrors/fe/fe-workflow

1. 项目的目录结构及介绍

fe-workflow/
├── assets/
│   └── ... # 静态资源文件
├── components/
│   └── ... # Vue 组件
├── composables/
│   └── ... # Vue 组合式 API
├── content/docs/
│   └── ... # 文档内容
├── layouts/
│   └── ... # 布局文件
├── middleware/
│   └── ... # 中间件
├── pages/
│   └── ... # 页面组件
├── public/
│   └── ... # 公共资源
├── types/
│   └── ... # TypeScript 类型定义
├── .gitignore
├── .npmrc
├── README.md
├── app.config.ts
├── app.vue
├── error.vue
├── eslint-config.mjs
├── license
├── nuxt.config.ts
├── package.json
├── pnpm-lock.yaml
├── tsconfig.json
└── uno.config.ts

目录结构介绍

• assets/: 存放静态资源文件，如图片、样式文件等。
• components/: 存放 Vue 组件。
• composables/: 存放 Vue 组合式 API。
• content/docs/: 存放文档内容。
• layouts/: 存放布局文件。
• middleware/: 存放中间件。
• pages/: 存放页面组件。
• public/: 存放公共资源。
• types/: 存放 TypeScript 类型定义。
• .gitignore: Git 忽略文件配置。
• .npmrc: npm 配置文件。
• README.md: 项目说明文档。
• app.config.ts: 应用配置文件。
• app.vue: 主应用组件。
• error.vue: 错误处理组件。
• eslint-config.mjs: ESLint 配置文件。
• license: 项目许可证。
• nuxt.config.ts: Nuxt.js 配置文件。
• package.json: 项目依赖和脚本配置。
• pnpm-lock.yaml: pnpm 锁定文件。
• tsconfig.json: TypeScript 配置文件。
• uno.config.ts: UnoCSS 配置文件。

2. 项目的启动文件介绍

package.json

{
  "name": "fe-workflow",
  "version": "1.0.0",
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "nuxt": "^3.0.0"
  }
}

• dev: 启动开发服务器。
• build: 构建项目。
• start: 启动生产服务器。
• generate: 生成静态站点。

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  // 配置选项
})

• nuxt.config.ts: Nuxt.js 配置文件，包含项目的各种配置选项。

3. 项目的配置文件介绍

.eslintrc.mjs

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  extends: [
    '@nuxtjs/eslint-config-typescript'
  ],
  rules: {
    // 自定义规则
  }
}

• .eslintrc.mjs: ESLint 配置文件，用于代码风格检查和错误检测。

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist"
  },
  "include": [
    "**/*.ts",
    "**/*.tsx",
    "**/*.vue"
  ]
}

fe-workflow📃 FE Engineering Construction Guide Refspec 前端工程化操作指南文档项目地址:https://gitcode.com/gh_mirrors/fe/fe-workflow