# vue3-elementPlus-ts-ui

**Repository Path**: yindj/vue3-elementPlus-ts-ui

## Basic Information

- **Project Name**: vue3-elementPlus-ts-ui
- **Description**: 基于vite+ vue3 + typescript + pinia + elememt-pus实现的pc端仪米商城系统
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: develop
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-04-26
- **Last Updated**: 2023-05-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 米商城系统pc版
## 基于 vue 3 + vite + typeScrit + pinia + element-plus

## 创建项目

### 1.初始化项目

```js
npm init vite@latest vue3-elememtPlus-ts-ui --template vue-ts
```

### 2.集成@types/node

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



#### 2.1.修改tsconfig.json

```json
{
  "compilerOptions": {
    "typeRoots": [
      "node_modules/@types", // 默认值
      "src/types"
   ],
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "baseUrl": "./",
    "paths":{
      "@": ["src"],
      "@/*": ["src/*"],
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

```

#### 2.2. 修改 vite.config.ts

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

// https://vitejs.dev/config/
export default defineConfig({
    resolve: {
        //设置别名
        alias: {
            '@': path.resolve(__dirname, 'src')
        }
    },
    plugins: [vue()],
    server: {
        port: 8080, //启动端口
        hmr: {
            host: '127.0.0.1',
            port: 8080
        },
        // 设置 https 代理
        proxy: {
            '/api': {
                target: 'your https address',
                changeOrigin: true,
                rewrite: (path: string) => path.replace(/^\/api/, '')
            }
        }
    }
});

```

### 3.集成pinia

```js
npm install pinia --save
```

#### 3.1 使用

```ts
// src/store/index.ts
import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'
const store = createPinia()
store.use(piniaPluginPersist)
export defuault store
```

#### 3.2 在main.ts中引入

```ts
 import { createApp } from 'vue'
 import App from './App.vue'
 import store from './store'
 
 // 创建vue实例
 const app = createApp(App)
 
 // 挂载pinia
 app.use(store)
 
 // 挂载实例
 app.mount('#app');
```

#### 3.3 创建user.ts

```ts
// src/store/modules/user.ts
import { defineStore } from "pinia";
import {login} from '@/api'
import { IuserState } from "@/types/uer.type";
export const useUserStore = defineStore({
  id: "user", // id必填，且需要唯一
  state: () => {
    return {
      name: "张三",
      token: ''
    };
  },
  actions: {
    updateName(name: string) {
      this.name = name;
    },
    async login(userData: IuserState){
      const {user_name,token} = await login(userData)
      console.log(user_name,token)
    }
  },
  // 开启数据缓存 默认存储在sessionStorage
  persist: {
    enabled: true,
    strategies: [
      {
        key: "my_user",
        storage: localStorage,
        paths: ["name"], // 需要持久化的项目，不配置全部持久化
      },
    ],
  },
});
```

#### 3.4 在页面中使用

```vue
<!-- Discription: 内容描述, author: ydj, Date: 2023-04-25 10:58:49 -->
<template>
    <div>{{ userStore.name }}</div>
    <el-button @click="update">修改store</el-button>
</template>

<script setup lang="ts">
import { useUserStore } from '@/store/modules/user'

const userStore = useUserStore()

const update = () => {
    userStore.name = 'lisi'
}


</script>
<style lang='scss' scoped></style>
```

#### 3.5 页面效果

![1682497637514](C:\Users\42931\AppData\Roaming\Typora\typora-user-images\1682497637514.png)

### 4. 集成vue-router

#### 4.1 新建src/router/index.ts,并导出router

```ts
import { createRouter,createWebHistory,RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name:'Index',
        meta: {
            title: '首页'
        },
        component:()=>import('@/views/home/index.vue')
    }
]

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

export default router
```

#### 4.2 在main.ts引入router

```ts
...
import router from "./router";
...
app.use(router)
```

#### 4.3 在APP.vue中

```vue
<template>
  <router-view></router-view>
</template>
```

### 5. 集成sass

```js
npm install sass -D
```

### 6. 集成axios

```ts
npm install axios
```

#### 6.1 新建 src/utils/request.ts

```ts
import axios, {
  AxiosInstance,
  AxiosResponse,
  AxiosRequestConfig,
  AxiosError,
  InternalAxiosRequestConfig,
} from "axios";

import { ElMessage } from "element-plus";

const service: AxiosInstance = axios.create({
  baseURL: import.meta.env.VITE_APP_BASE_API,
  timeout: 30000,
});

/* 请求拦截器 */
service.interceptors.request.use(
  (config: InternalAxiosRequestConfig) => {
    //  伪代码
    // if (user.token) {
    //   config.headers.Authorization = `Bearer ${token}`;
    // }
    return config;
  },
  (error: AxiosError) => {
    ElMessage.error(error.message);
    return Promise.reject(error);
  }
);

/* 响应拦截器 */
service.interceptors.response.use(
  (response: AxiosResponse) => {
    const { code, message, data } = response.data;

    // 根据自定义错误码判断请求是否成功
    if (code === 0) {
      // 将组件用的数据返回
      return data;
    } else {
      // 处理业务错误。
      ElMessage.error(message);
      return Promise.reject(new Error(message));
    }
  },
  (error: AxiosError) => {
    // 处理 HTTP 网络错误
    let message = "";
    // HTTP 状态码
    const status = error.response?.status;
    switch (status) {
      case 401:
        message = "token 失效，请重新登录";
        // 这里可以触发退出的 action
        break;
      case 403:
        message = "拒绝访问";
        break;
      case 404:
        message = "请求地址错误";
        break;
      case 500:
        message = "服务器故障";
        break;
      default:
        message = "网络连接故障";
    }

    ElMessage.error(message);
    return Promise.reject(error);
  }
);
/* 导出封装的请求方法 */
export const http = {
  get<T = any>(url: string, config?: AxiosRequestConfig): Promise<T> {
    return service.get(url, config);
  },

  post<T = any>(
    url: string,
    data?: object,
    config?: AxiosRequestConfig
  ): Promise<T> {
    return service.post(url, data, config);
  },

  put<T = any>(
    url: string,
    data?: object,
    config?: AxiosRequestConfig
  ): Promise<T> {
    return service.put(url, data, config);
  },

  delete<T = any>(url: string, config?: AxiosRequestConfig): Promise<T> {
    return service.delete(url, config);
  },
};

/* 导出 axios 实例 */
export default service;

```

#### 6.2 新增api/user/index.ts

```ts
import service, { http } from '@/utils/request'
import type { LoginData, LoginRes, UserInfoRes } from './types'

/**
 * 登录
 */
export function login(data: LoginData) {
    return http.post<LoginRes>('/user/login', data);
}

/**
 * 获取登录用户信息
 */
export function getUserInfo() {
    return http.get<UserInfoRes>('/user/info')
}

// 使用原生 axios 实例进行请求
export function loginRaw(data: LoginData): Promise<LoginRes> {
    return service.post('/user/login', data);
}
```

#### 6.3 在页面中使用

```vue
<scriept setup lang="ts">
    import {login} from '@/api'
    ...
    onMounted(() => {
    init()
})

const init = async () => {
    try {
        const { user_name, token } = await login({
            user_name: 'x1',
            password: '111111'
        })
        console.log(user_name,token)
    } catch (error) {

    }
}
</scriept>
```

### 7.集成element-plus

```js
npm install element-plus
```

#### 7.1 设置按需自动加载

```js
npm install -D unplugin-auto-import unplugin-vue-components
```

#### 7.2 在vite.config.ts中

```ts
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
...
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()]
    }),
    Components({
      resolvers: [ElementPlusResolver()]
    })
  ],
```