vue3.x+vite+element-plus+vuex+typescript

vue3.x+vite+element+vuex

环境准备：nodejs>12.0 npm>6.0

1.下载模板vue-ts

npm init vite@latest my-vue-typescript --template vue-ts
cd  my-vue-typescript
npm run dev
1
2
3

2.配置一下host

3.安装element-plus

npm install element-plus --save
or
yarn add element-plus
1
2
3

4.导入element-plus

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
1
2
3
4
5
6
7

组件使用

5.0 安装路由

npm install vue-router@4
1

route>index.ts 文件

main.ts 注入路由

app.vue

路由基本完成

6.store 状态机vuex

npm install vuex@next --save
1

7.主机上使用状态机

8.创建api 机request

npm install axios
1

api/request.ts

/**
 * 网络请求配置
 */
 import axios from "axios";

 axios.defaults.timeout = 100000;
 axios.defaults.baseURL = "";
 const token='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MTgsInVzZXJuYW1lIjoiYWRtaW4iLCJyb2xlIjoxLCJpYXQiOjE2NDIxMzk5NTAsImV4cCI6MTY0MjE1NDM1MH0.1SvXfv05JI5bd8-vND0_l6dptKBXdXK6X7IyZ3QCY08'
 /**
  * http request 拦截器
  */
 axios.interceptors.request.use(
   (config) => {
     config.data = JSON.stringify(config.data);
     config.headers = {
       "Content-Type": "application/json",
       'Authorization' : 'Bearer '+token,
     };
     return config;
   },
   (error) => {
     return Promise.reject(error);
   }
 );
 
 /**
  * http response 拦截器
  */
 axios.interceptors.response.use(
   (response) => {
     if (response.data.errCode === 2) {
       console.log("过期");
     }
     return response;
   },
   (error) => {
     console.log("请求出错：", error);
   }
 );
 
 /**
  * 封装get方法
  * @param url  请求url
  * @param params  请求参数
  * @returns {Promise}
  */
 export function get(url: any, params?: Object): Promise<unknown> {
   return new Promise((resolve, reject) => {
     axios.get(url, {
       params: params,
     }).then((response) => {
       landing(url, params, response.data);
       resolve(response.data);
     })
       .catch((error) => {
         reject(error);
       });
   });
 }
 
 /**
  * 封装post请求
  * @param url
  * @param data
  * @returns {Promise}
  */
 
 export function post(url: any, data?: Object): Promise<unknown> {
   return new Promise((resolve, reject) => {
     axios.post(url, data).then(
       (response) => {
         //关闭进度条
         resolve(response.data);
       },
       (err) => {
         reject(err);
       }
     );
   });
 }
 
 /**
  * 封装patch请求
  * @param url
  * @param data
  * @returns {Promise}
  */
 export function patch(url: any, data?: Object): Promise<unknown> {
   return new Promise((resolve, reject) => {
     axios.patch(url, data).then(
       (response) => {
         resolve(response.data);
       },
       (err) => {
         msag(err);
         reject(err);
       }
     );
   });
 }
 
 /**
  * 封装put请求
  * @param url
  * @param data
  * @returns {Promise}
  */
 
 export function put(url: any, data?: Object): Promise<unknown> {
   return new Promise((resolve, reject) => {
     axios.put(url, data).then(
       (response) => {
         resolve(response.data);
       },
       (err) => {
         msag(err);
         reject(err);
       }
     );
   });
 }
 
 //统一接口处理，返回数据
 export default function (fecth: any, url: any, param?: Object): Promise<unknown> {
   let _data = "";
   return new Promise((resolve, reject) => {
     switch (fecth) {
       case "get":
         console.log("begin a get request,and url:", url);
         get(url, param)
           .then(function (response) {
             resolve(response);
           })
           .catch(function (error) {
             console.log("get request GET failed.", error);
             reject(error);
           });
         break;
       case "post":
         post(url, param)
           .then(function (response) {
             resolve(response);
           })
           .catch(function (error) {
             console.log("get request POST failed.", error);
             reject(error);
           });
         break;
       default:
         break;
     }
   });
 }
 
 //失败提示
 function msag(err: any) {
   if (err && err.response) {
     switch (err.response.status) {
       case 400:
         alert(err.response.data.error.details);
         break;
       case 401:
         alert("未授权，请登录");
         break;
 
       case 403:
         alert("拒绝访问");
         break;
 
       case 404:
         alert("请求地址出错");
         break;
 
       case 408:
         alert("请求超时");
         break;
 
       case 500:
         alert("服务器内部错误");
         break;
 
       case 501:
         alert("服务未实现");
         break;
 
       case 502:
         alert("网关错误");
         break;
 
       case 503:
         alert("服务不可用");
         break;
 
       case 504:
         alert("网关超时");
         break;
 
       case 505:
         alert("HTTP版本不受支持");
         break;
       default:
     }
   }
 }
 
 /**
  * 查看返回的数据
  * @param url
  * @param params
  * @param data
  */
 function landing(url: any, params: any, data: any) {
   if (data.code === -1) {
   }
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215

api/index.ts

 import { get, post } from './request';

/**
 * 获取首页列表
 */
function getArticleList() {
  return new Promise((resolve, reject) => {
    get('/api/reportlist').then((res: any) => {
      resolve(res);
    }, (error: any) => {
      console.log("网络异常~", error);
      reject(error)
    })
  })
}
function goodList() {
  return new Promise((resolve, reject) => {
    get('/Api/admin/goods/list?pageIndex=1&pageSize=4').then((res: any) => {
      resolve(res);
    }, (error: any) => {
      console.log("网络异常~", error);
      reject(error)
    })
  })
}
export {
  getArticleList,
  goodList
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

9.调用api

Vue3 script-setup 使用语法