NuxtShop 项目使用教程

NuxtShop 项目使用教程

NuxtShopA Shopify starter with Nuxt 3 + Pinia + Apollo + Tailwind 3 + Layer0项目地址:https://gitcode.com/gh_mirrors/nu/NuxtShop

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

NuxtShop 项目的目录结构如下：

NuxtShop/
├── assets/
├── components/
├── composables/
├── layouts/
├── middleware/
├── pages/
├── plugins/
├── public/
├── stores/
├── utils/
├── .env
├── .gitignore
├── nuxt.config.ts
├── package.json
├── tsconfig.json
└── README.md

目录介绍

• assets/: 存放静态资源文件，如图片、字体等。
• components/: 存放 Vue 组件。
• composables/: 存放可复用的组合逻辑。
• layouts/: 存放页面布局模板。
• middleware/: 存放中间件逻辑。
• pages/: 存放页面组件，Nuxt 会根据文件结构自动生成路由。
• plugins/: 存放插件文件。
• public/: 存放公开的静态文件，如 favicon.ico。
• stores/: 存放 Pinia 状态管理文件。
• utils/: 存放工具函数。
• .env: 环境变量配置文件。
• .gitignore: Git 忽略文件配置。
• nuxt.config.ts: Nuxt 配置文件。
• package.json: 项目依赖和脚本配置。
• tsconfig.json: TypeScript 配置文件。
• README.md: 项目说明文档。

2. 项目的启动文件介绍

NuxtShop 项目的启动文件主要是 package.json 中的脚本配置。

package.json 中的启动脚本

{
  "scripts": {
    "dev": "nuxt dev",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  }
}

启动命令

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

3. 项目的配置文件介绍

nuxt.config.ts

nuxt.config.ts 是 Nuxt 项目的主要配置文件，包含项目的基本配置、模块、插件等。

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  // 基本配置
  srcDir: 'src/',
  ssr: true,

  // 模块
  modules: [
    '@nuxtjs/tailwindcss',
    '@nuxtjs/apollo'
  ],

  // 插件
  plugins: [
    '~/plugins/apollo.ts',
    '~/plugins/tailwind.ts'
  ],

  // 环境变量
  env: {
    BASE_URL: process.env.BASE_URL || 'http://localhost:3000'
  },

  // 构建配置
  build: {
    transpile: ['@apollo/client', 'ts-invariant']
  }
})

.env

.env 文件用于配置环境变量，例如 API 密钥、数据库连接字符串等。

# Shopify
SHOPIFY_ACCESS_TOKEN=your_shopify_access_token
MYSHOPIFY_URL=your_myshopify_url

# Stripe
STRIPE_PUBLIC_KEY=your_stripe_public_key
STRIPE_SECRET_KEY=your_stripe_secret_key

# Cloudinary
CLOUDINARY_BASE_URL=your_cloudinary_base_url
CLOUDINARY_NAME=your_cloud_name
CLOUDINARY_FOLDER=your_cloudinary_folder

# Node Environment
NODE_ENV=development

# Base URL
BASE_URL=http://localhost:3000

以上是 NuxtShop 项目的基本使用教程，涵盖了项目的目录结构、启动文件和配置文件的介绍。希望对您有所帮助！

NuxtShopA Shopify starter with Nuxt 3 + Pinia + Apollo + Tailwind 3 + Layer0项目地址:https://gitcode.com/gh_mirrors/nu/NuxtShop