# vue3-h5-demo

**Repository Path**: oyxc/vue3-h5-demo

## Basic Information

- **Project Name**: vue3-h5-demo
- **Description**: vue3 h5模版
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2023-12-25
- **Last Updated**: 2023-12-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 目录
- [目录](#目录)
- [初始化项目架构](#初始化项目架构)
- [技术栈](#技术栈)
  - [工具类](#工具类)
  - [环境](#环境)
- [搭建流程](#搭建流程)
  - [初始化项目](#初始化项目)
  - [初始化git](#初始化git)
  - [运行项目](#运行项目)
  - [配置 server环境](#配置-server环境)
    - [vite.config.ts](#viteconfigts)
  - [配置项目环境](#配置项目环境)
    - [增加三个文件](#增加三个文件)
    - [修改package.json脚本](#修改packagejson脚本)
    - [如何使用](#如何使用)
    - [重新启动](#重新启动)
  - [配置 Eslint](#配置-eslint)
    - [增加文件 .eslintrc.cjs](#增加文件-eslintrccjs)
    - [对 vite.config.ts 修改](#对-viteconfigts-修改)
    - [重新启动](#重新启动-1)
  - [增加vue-router](#增加vue-router)
    - [App.vue](#appvue)
    - [router](#router)
    - [home](#home)
    - [main.ts引用 router](#maints引用-router)
    - [重新启动](#重新启动-2)
  - [配置 src/@ 别名](#配置-src-别名)
    - [对 vite.config.ts 修改](#对-viteconfigts-修改-1)
    - [对 tsconfig.ts 修改](#对-tsconfigts-修改)
    - [使用 @](#使用-)
  - [关于类型设计](#关于类型设计)
    - [对 tsconfig.ts修改](#对-tsconfigts修改)
  - [增加axios](#增加axios)
  - [关于接口设计](#关于接口设计)
- [.eslintrc.cjs](#eslintrccjs)
- [axios简单封装](#axios简单封装)

# 初始化项目架构
    一步一步搭建自己的Vue3 h5项目架构
    
    备注：文档编写时间为 2023-8-8 注意依赖版本!
    项目源码👇👇👇

- [项目源代码](https://gitee.com/wyb_3/vue3-h5-demo)
# 技术栈
## 工具类
- NodeJs V16.20.0
- Npm V8.19.4
- Vite V4.4.8
- Eslint V8.45.0
- TypeScript V5.0.2
- Vscode
## 环境
- Vue V3.3.4
- vue-router V4.2.4
- Vuex V4.0.2
- axios V1.4.0
# 搭建流程
## 初始化项目
```sh
yarn create vite my-vue-app --template vue-ts
```

## 初始化git
```sh
cd my-vue-app
git init
git add .
git commit -m "init"
```

## 运行项目
```sh
yarn
yarn dev
```
## 配置 server环境

### vite.config.ts
```ts
// vite.config.ts
...
base: "./", // 打包路径
server: {
    port: 9999, // 服务端口号
    open: true, // 服务启动时是否自动打开浏览器
    cors: true, // 允许跨域
    host: "192.168.7.52" // 本机的局域网IP
}
...
```


## 配置项目环境
### 增加三个文件

![](./build-img.png)

### 修改package.json脚本

```json
...
 "scripts": {
    "dev": "vite --mode dev",
    "test": "vue-tsc && vite build --mode test",
    "build": "vue-tsc && vite build --mode prot",
    "preview": "vite preview"
  },
  ...
```

### 如何使用
```ts
import.meta.env.VITE_BASE_URL
```

### 重新启动
```sh
yarn dev
```

## 配置 Eslint 
    ***配置完成 Eslint 最好重新启动 Vscode！！！
```sh
yarn add -D eslint vite-plugin-eslint
yarn add -D eslint-plugin-vue
yarn add -D @typescript-eslint/eslint-plugin
yarn add -D @typescript-eslint/parser
```

### 增加文件 .eslintrc.cjs
    具体文件在末尾

### 对 vite.config.ts 修改
    ***配置完成 Eslint 最好重新启动 Vscode！！！
```ts
import eslint from "vite-plugin-eslint";
// vite.config.ts
plugins: [vue(), eslint()],
```

### 重新启动
```sh
yarn dev
```


## 增加vue-router
```sh
yarn add vue-router@4
```

### App.vue
```html
<!-- src/App.vue -->
<template>
  <router-view />
</template>

```

### router

```ts
// src/router/index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
import Home from "../pages/home/index.vue";
const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "Home",
    component: Home,
    meta: {
      title: "首页"
    }
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;


```
### home

```html
<!-- src/pages/home/index.vue -->
<template>
  <p>home</p>
</template>
<script lang="ts" setup></script>
<style scoped></style>

```

### main.ts引用 router
```ts
// ...
import router from "./router";
createApp(App).use(router).mount("#app");
```

### 重新启动
```sh
yarn dev
```


## 配置 src/@ 别名

### 对 vite.config.ts 修改
```ts
// vite.config.ts
import path from "path";
declare const __dirname: string;
// ...
resolve: {
    alias: {
        "@": path.resolve(__dirname, "src")
    }
},
// ...
```
### 对 tsconfig.ts 修改
```json
"compilerOptions":{
    "baseUrl": ".",
    "paths": {
        "@/*": [
        "src/*"
        ]
    },
}
// ...
```

### 使用 @ 
```ts
// src/router/index.ts
// ...
import Home from "@/pages/home/index.vue";
// ...
```

## 关于类型设计
    以模块的形式
![](./create-vue-type.png)

### 对 tsconfig.ts修改
```json
// 新增 typings/**/*.ts
// ...
 "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "typings/**/*.ts"],
// ...
```

## 增加axios
    官方文档介绍比较详细，点击下方👇👇👇
    ***简单的http封装(文章末尾)
- [axios官方文档](https://www.axios-http.cn/docs/intro)

## 关于接口设计
    接口设计思路，以模块的形式，比如 user是一个模块，商品是一个模块，订单是一个模块 目录结构 👇👇👇
![](./create-vue-api.png)



# .eslintrc.cjs
```cjs

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:vue/vue3-essential"
  ],
  overrides: [
    {
      env: {
        node: true
      },
      files: [".eslintrc.{js,cjs}"],
      parserOptions: {
        sourceType: "script"
      }
    }
  ],
  parser: "vue-eslint-parser", // 新增
  parserOptions: {
    ecmaVersion: "latest",
    parser: "@typescript-eslint/parser",
    sourceType: "module"
  },
  plugins: ["@typescript-eslint", "vue"],
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off", //生产模式不允许使用log
    "no-debugger": "error", //生产默认不允许使用debugger
    "@typescript-eslint/no-explicit-any": "off",
    "vue/multi-word-component-names": "off",
    "vue/no-mutating-props": "off",
    "@typescript-eslint/no-unused-vars": "error",
    "generator-star-spacing": "off",
    indent: "off",
    "space-before-function-paren": "off",
    "vue/html-end-tags": "error", //标签必须闭合
    camelcase: "error", // 强制驼峰法命名
    eqeqeq: "error", // 要求使用 === 和 !==
    "no-eq-null": "error", // 禁止对null使用==或!=运算符
    "no-extra-parens": "error", // 禁止非必要的括号
    "no-extra-semi": "error", // 禁止多余的冒号
    "no-invalid-regexp": "error", // 禁止无效的正则表达式
    "no-multi-spaces": "error", // 不能用多余的空格
    "vue/require-v-for-key": "error", // vue的for循环是否必须有key
    "no-var": "off", // 禁用var，用let和const代替
    "no-self-compare": "error", // 不能比较自身
    "no-redeclare": "error", // 禁止重复声明变量
    quotes: [2, "double"], // 必须使用双引号
    semi: [2, "always"], // 语句强制分号结尾
    "comma-dangle": [2, "never"], // 数组和对象键值对最后一个逗号， never参数：不能带末尾的逗号, always参数：必须带末尾的逗号
    "no-undef": "off"
  }
};

```


# axios简单封装

```ts
// src/tools/http.ts
import axios from "axios";
// 创建 axios 实例
const service = axios.create({
  /* 基础地址 一般都是动态的 */
  baseURL: GLOBAL_API_URL,
  /* 请求类型定义 */
  // headers: {
  //   'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
  // },
  /* 如果用的JSONP，可以配置此参数带上cookie凭证，如果是代理和CORS不用设置 */
  withCredentials: false,
  /* 请求超时时间 */
  timeout: 6000
});

/**
 * http request 拦截器
 */
service.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem("szd_token"); /* 获取token */
    if (token) {
      /* 让每个请求携带自定义 token 请根据实际情况自行修改 */
      config.headers["token"] = `${token}`;
    }
    if (config.method === "get") {
      /* 让每个请求都携带一个不同的时间参数，防止浏览器缓存不发送请求 */
      config.params = {
        ...config.params
      };
    }

    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

/**
 * http response 拦截器
 */
service.interceptors.response.use(
  (response) => {
    return response.data;
  },
  (error) => {
    console.log("请求出错：", error);
  }
);

export default service;

```