uniapp-shop-vue3-ts 项目教程

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

uniapp-shop-vue3-ts/
├── public/
│   ├── favicon.ico
│   └── index.html
├── src/
│   ├── assets/
│   │   └── logo.png
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── pages/
│   │   └── index/
│   │       └── index.vue
│   ├── App.vue
│   ├── main.ts
│   ├── manifest.json
│   ├── pages.json
│   ├── shims-vue.d.ts
│   └── uni.scss
├── .gitignore
├── babel.config.js
├── package.json
├── tsconfig.json
└── vue.config.js

目录结构介绍

• public/: 存放静态资源文件，如 favicon.ico 和 index.html。
• src/: 项目的主要源代码目录。
  • assets/: 存放项目所需的静态资源，如图片。
  • components/: 存放可复用的 Vue 组件。
  • pages/: 存放项目的页面组件。
  • App.vue: 项目的根组件。
  • main.ts: 项目的入口文件。
  • manifest.json: 配置应用的基本信息。
  • pages.json: 配置页面路由和导航栏等信息。
  • shims-vue.d.ts: 用于 TypeScript 识别 .vue 文件。
  • uni.scss: 全局样式文件。
• .gitignore: 配置 Git 忽略的文件和目录。
• babel.config.js: Babel 配置文件。
• package.json: 项目的依赖和脚本配置。
• tsconfig.json: TypeScript 配置文件。
• vue.config.js: Vue 项目的配置文件。

2. 项目的启动文件介绍

main.ts

main.ts 是项目的入口文件，负责初始化 Vue 应用并挂载到 DOM 上。以下是 main.ts 的基本内容：

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import './uni.scss'

const app = createApp(App)
app.mount('#app')

功能介绍

• createApp(App): 创建 Vue 应用实例。
• app.mount('#app'): 将 Vue 应用挂载到 DOM 的 #app 元素上。

3. 项目的配置文件介绍

vue.config.js

vue.config.js 是 Vue 项目的配置文件，用于配置 Webpack 和其他构建工具的选项。以下是 vue.config.js 的基本内容：

module.exports = {
  transpileDependencies: ['@dcloudio/uni-ui'],
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
  }
}

功能介绍

• transpileDependencies: 指定需要转译的依赖包。
• devServer.proxy: 配置开发服务器的代理，用于解决开发环境中的跨域问题。

tsconfig.json

tsconfig.json 是 TypeScript 项目的配置文件，用于配置 TypeScript 编译器选项。以下是 tsconfig.json 的基本内容：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": ["esnext", "dom"]
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "