# Vue3-H5开发

**Repository Path**: White-lby/vue3-h5-development

## Basic Information

- **Project Name**: Vue3-H5开发
- **Description**: 实训云迹Vue3移动端开发
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 1
- **Created**: 2022-12-06
- **Last Updated**: 2025-04-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue3, TypeScript, HTML

## README

# H5移动端开发

# 1.NodeJS安装

   NodeJS官网下载与安装 <https://nodejs.org/zh-cn/>



   验证是否安装成功
![输入图片说明](READMEimages/image1.png)

# 2.初识VUE3

 官网 <https://cn.vuejs.org/>

# 3.通过Vite创建项目

   官网 <https://cn.vitejs.dev/>

## 3.1 全局安装vite

```
npm  install -g  vite@latest
```

## 3.2 创建项目

```
npm init vite@latest h5-web -- --template vue-ts
```

## 3.3 vscode打开项目
![输入图片说明](READMEimages/image2.png)

## 3.4 运行命令

```
npm install
npm run dev
```

# 4.Vue-Router使用

## 4.1 安装

```
npm install vue-router@4
```
![输入图片说明](READMEimages/image3.png)

## 4.2 添加路由

新建router文件夹，新建文件 index.ts

```
import { createRouter, createWebHashHistory } from "vue-router";

const routes = [
    {
        path: '/login',
        component: () => import("../views/Login.vue")
    },
    {
        path: '/',
        component: () => import("../views/Index.vue")
    }
]

const router = createRouter({
    history: createWebHashHistory('/'),
    routes
})

export default router
```

![输入图片说明](READMEimages/image4.png)

## 4.3在main.ts文件加入路由

```
import { createApp } from 'vue'
import App from './App.vue'
//加入路由
import router from './router/index';
//并通过use，使用路由
createApp(App).use(router).mount('#app')
```

## 4.4在App.vue 添加导航，并使用router-view

```
<template>
  <router-link to="/">首页</router-link><br />
  <router-link to="/login">登录页面</router-link>
  <hr />
  <router-view></router-view>
</template>
```

## 4.5查看效果

![输入图片说明](READMEimages/image5.png)

# 5 使用@别名

## 5.1 安装

```
npm install @types/node --save-dev
```

## 5.2在vite.config.ts里面配置resolve

```
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path";

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 5000, // 你需要定义的端口号
 resolve: {
  // 配置路径别名
  alias: {
    '@': path.resolve(__dirname, './src'),
  }
},

})
```

## 5.3 如果提示有标红波浪,在tsconfig.json 添加如下代码.

```
"baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
```

![输入图片说明](READMEimages/image6.png)

# 6 Axios使用

## 6.1 官网-安装

<http://www.axios-js.com/>

```
npm install axios
```

## 6.2 一封装类，新建src/http/index.ts

```
import axios, {
  AxiosRequestConfig,
  AxiosRequestHeaders,
  AxiosResponse,
} from "axios";

const state = {
  ok: 0,//请求成功状态码
  401: "ERR_BAD_REQUEST"
};

//返回数据规则
interface IResponseData<T> {
  status: number;
  message?: string;
  data: T;
  code: string;
}

//请求默认配置规则
type TOption = {
  baseURL: string;
  timeout: number;
};

//默认配置
const config = {
  baseURL: "",
  timeout: 30 * 1000,
  withCredentials: true,
};

class Http {
  service: any;
  constructor(config: TOption) {
    //实例化请求配置
    this.service = axios.create(config);

    //请求拦截
    this.service.interceptors.request.use(
      (config: AxiosRequestConfig) => {
     
        return config;
      },
      (error: any) => {
       
        return Promise.reject(error);
      }
    );

    //响应拦截
    this.service.interceptors.response.use(
      (response: AxiosResponse) => {
       
        const data = response.data;

        const { code } = data;

        if (code == undefined) {
          //如果没有返回状态码，直接返回数据，针对于返回数据为blob类型    
          return response;
        } else if (code !== 0) {
         
          return Promise.reject(data);
        }
       
        return response.data.data;
      },
      (error: any) => {
        loading.close();
        if (error.code === state[401]) {
          ElMessage.error("请求失败:" + error.message);
          setTimeout(() => {
          
            window.location.href = '/login'
          }, 1000);
        }
        return Promise.reject(error);
      }
    );
  }

  get<T>(url: string, params?: object, data = {}): Promise<IResponseData<T>> {
    return this.service.get(url, { params, ...data });
  }

  post<T>(url: string, params?: object, data = {}): Promise<IResponseData<T>> {
    return this.service.post(url, params, data);
  }

  put<T>(url: string, params?: object, data = {}): Promise<IResponseData<T>> {
    return this.service.put(url, params, data);
  }

  delete<T>(
    url: string,
    params?: object,
    data = {}
  ): Promise<IResponseData<T>> {
    return this.service.delete(url, { params, ...data });
  }
}

export default new Http(config)
```

## 6.3 Proxy配置 

在vite.config.ts 文件中

```
server: {
    port: 5000, // 你需要定义的端口号
    proxy: {
      "/api": {
        target: "http://localhost:8081/",//Api地址
        changeOrigin: true,   
      },  
    },
 },
```

## 6.4 使用方式

![输入图片说明](READMEimages/image7.png)



```
import http from '@/http/index'

export default {

    select: {
        name: "商品查询",
        url:"/api/product/select",
        call: async function (params:any = {}) {
            return await http.post(this.url,params);        
        }
    },

    insert: {
        name: "商品新增",
        url:"/api/product/insert",
        call: async function (params:any = {}) {
            return await http.post(this.url,params);        
        }
    }

}
```

```
import { productApi } from '@/api/index'
onMounted(()=>{
 productApi.select.call({pageIndex:1,pageSize:9}).then((res)=>{
        products.value = res.items
    })
})
```

# 7.vant使用

使用文档：<https://vant-contrib.gitee.io/vant/#/zh-CN>

```
import { createApp } from 'vue'

import App from '@/App.vue'

//加入路由
import router from '@/router/Index';

import 'vant/lib/index.css';
import vant from 'vant'
//导入store
import store from '@/store/Index'

const app = createApp(App);
//使用vant
app.use(vant);
//使用pina
app.use(store)
//并通过use，使用路由
app.use(router)
app.mount('#app')
```

# 8.pina组件使用

npm install  pinia

npm install pinia-plugin-persist

![输入图片说明](READMEimages/image8.png)

新建store/appStore.ts

```
import { defineStore } from 'pinia'
export const appStore = defineStore({
  id: 'myapp',
  state:()=>{
  	return {
        phone:"",
        userId:0
  	}
  },
  getters:{},
  actions:{},
    // 开启数据缓存
    persist: {
        enabled: true,
        strategies: [
            {
              key: 'myapp',
              storage: localStorage,
            }
          ]
      }
})

```

新建store/index.ts 文件

```
import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'

const store = createPinia()
store.use(piniaPluginPersist)

export default store
```

## 8.1 使用

main.ts

```
//导入store
import store from '@/store/Index'

//使用pina
app.use(store)
```

## 8.2 如何使用

```
import  {appStore} from "@/store/appStore"
import {storeToRefs} from "pinia"
 let { userInfo } = storeToRefs(appStore())
```