nuxt开发流程

原则

• 页面尽可能干净，结构和调理尽可能清洗整洁。能够快速定位，利于代码实现，调试和维护。
• 尽可能seo友好，合理使用 title 和 alt 属性，a标签等。

环境准备

• 创建目录：pages、components、composables，assets等，删除App.vue文件。
• 在 assets 目录中创建 styles 目录，并将自定义的预制 tailwind css文件复制到该目录下。
• 复制通用的 package.json 到项目根目录，安装相关插件。
• 在根目录创建 tailwind.config.js 文件并进行配置

  /** @type {import('tailwindcss').Config} */
  export default {
    content: [
      "./components/**/*.{js,vue,ts}",
      // "./layouts/**/*.vue",
      "./pages/**/*.vue",
      // "./plugins/**/*.{js,ts}",
      "./app.vue",
      // "./error.vue",
    ],
    theme: {
      extend: {},
    },
    plugins: [],
  }

• 配置 nuxt.config.ts 文件，完成 postcss tailwind 等相关配置。

  // https://nuxt.com/docs/api/configuration/nuxt-config
  export default defineNuxtConfig({
    devtools: { enabled: true },
    css: ['/assets/css/main.css'],
    postcss: {
      plugins: {
  　　　 normalize: {}
        tailwindcss: {},
        autoprefixer: {}
      }
    }
  })

• 根据设计文件搭建页面路由和结构目录。
• 根据设计文件实现通用组件，如 跳转链接，按钮，选择器，轮播图等。
• 根据实际需要生成 layouts目录到根目录，搭建布局模板。

页面开发

1. 调用 useHead 函数，填入基本的头部属性

   useHead({
     title: 'Test Page',
     meta: [
       { description: 'test description' },
       { keywords: 'test keywords' },
       { author: 'somebody' }
     ]
   })

2. 根据设计图，选择合适的语义标签完成整体布局。
3. 逐步编写模块组件并填充到布局当中。
4. 用元素和元素组件填充模块组件。

语法规范

• 子页面和组件目录中，非通用组件要根据实际情况构建相应的目录树，目录用小写字母并以下划线结尾，组件驼峰法命名。
• 利用hooks来构建功能对象，和库对象。页面中尽可能只保留逻辑代码，不出现功能实现过程相关的代码，保持结构清晰简洁。
• 页面和组件中只编写页面专用的特殊情况的 css 相关样式，通用组合样式统一放置在 assets/styles/utilities 目录中统一管理。局部修改封装到组件内部。