Vue 3 + TypeScript + Vite + Element-Plus + Router + Axios + Pinia项目搭建（内含完整架构）

安装Vue3+ts+vite

npm init vite@latest
1

选择y,新建项目名称,选择vue,选择vue-ts
下载完成后执行以下命令行

cd 新建的项目名称
npm i
npm run dev
1
2
3

安装Element-Plus

npm install element-plus --save
1

安装完后给main.ts配置以下代码

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

在 tsconfig.json 中通过 compilerOptions.type 指定全局组件类型。

// tsconfig.json
{
  "compilerOptions": {
    "types": ["element-plus/global"]
  }
}
1
2
3
4
5
6

自动导入两款插件使用方法

#选择一个你喜欢的包管理器
 
#NPM
# npm install -D unplugin-vue-components unplugin-auto-import
 
#Yarn
$ yarn add -D unplugin-vue-components unplugin-auto-import
1
2
3
4
5
6
7

安装完成后打开vite.config.ts文件，复制以下代码到vite.config.ts里

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

在页面中渲染

    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
    <el-button>中文</el-button>
1
2
3
4
5
6
7

效果如下：

---

引入router，axios，Pinia

一、安装router

npm install vue-router
1

在src下新建router文件夹/index.ts
配置内容如下：

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Home from '../view/Home.vue';
const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'index',
    component: Home,
  },
]
const router = createRouter({
  history: createWebHistory(),
  routes
})
export default router;
1
2
3
4
5
6
7
8
9
10
11
12
13
14

main.ts添加router

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

更改页面结构

在src中新增view文件夹，里面新建Home.vue

<template>
  <div>
    <el-button>Defaultel-button>
    <el-button type="primary">Primaryel-button>
    <el-button type="success">Successel-button>
    <el-button type="info">Infoel-button>
    <el-button type="warning">Warningel-button>
    <el-button type="danger">Dangerel-button>
    <el-button>中文el-button>
  div>
template>

<script lang='ts'>
import { onBeforeMount, onMounted } from "vue";
export default {
  name: "",
  setup() {},
};
script>
<style scoped lang='less'>
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

App.vue页面

<script setup lang="ts">
script>
<template>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/mdImg/vue.svg" class="logo vue" alt="Vue logo" />
    a>
    <a href="https://element-plus.gitee.io/zh-CN/" target="_blank">
      <img src="./assets/mdImg/element-plus-logo.svg" class="logo element" alt="Vue logo" />
    a>
  div>
  <router-view>router-view>
template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
.logo.element:hover {
  filter: drop-shadow(0 0 2em #459FFCaa);
}
style>

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

效果：

二、安装axios

npm install axios
pnpm install axios
1
2

可参考以下封装方法：

request.ts

import axios from 'axios'

// 创建axios
const service = axios.create({
  // baseURL: '/api',
  baseURL: 'http://xxx.xxx.xx.xxx',
  timeout:80000
});

// 添加请求拦截器
service.interceptors.request.use(
  (config:any) => {
    let token:string =''//此处换成自己获取回来的token，通常存在在cookie或者store里面
    if (token) {
      // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
      config.headers['X-Token'] = token
   
      config.headers.Authorization =  + token       
     }
    return config
  },
  error => {
    // Do something with request error
    console.log("出错啦", error) // for debug
    Promise.reject(error)
  }
)

service.interceptors.response.use(
  (response:any) => {
   return response.data
 },    /*  */
 error => {
   console.log('err' + error) // for debug
   if(error.response.status == 403){
     // ElMessage.error('错了')
     console.log('错了');
     
   }else{
     // ElMessage.error('服务器请求错误，请稍后再试')
     console.log('服务器请求错误，请稍后再试');
   }
   return Promise.reject(error)
 }
)
export default service;


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

main.ts

import { createApp, useAttrs } from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css'
import router from './router/index'
import App from './App.vue'
let app = createApp(App)
import axios from './utils/request'
app.config.globalProperties.$http = axios;
const pinia = createPinia()
app.use(ElementPlus).use(router).mount('#app')
1
2
3
4
5
6
7
8
9
10

service.ts

import service from "../request"

// 获取seller
export function getSeller(params:any){
  return service.request({
    method:'POST',
    url:'接口一',
    data:params
  })
}
export function Login(params:any){
  return service.request({
    method:'POST',
    url:'接口二',
    data:params
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

页面调用

// 接口引入地址
import { getTest} from "../utils/api/service";

/* 调用接口 */
       getTest('放入params参数').then(response => {
            console.log("结果", response);
          })
          .catch(error => {
            console.log('获取失败！')
          });
1
2
3
4
5
6
7
8
9
10

三、安装Pinia

npm add pinia@next
1

挂载Pinia

main.ts
如果按照上面步骤来的话可以直接替换main.ts

import { createApp, useAttrs } from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css'
import router from './router/index'
import App from './App.vue'
import {createPinia} from 'pinia'
let app = createApp(App)
import axios from './utils/request'
app.config.globalProperties.$http = axios;
const pinia = createPinia()
app.use(ElementPlus).use(pinia).use(router).mount('#app')
1
2
3
4
5
6
7
8
9
10
11

新建store文件夹/userCount.ts

import { defineStore } from 'pinia'
// defineStore( ) 方法的第一个参数：相当于为容器起一个名字。注意：这里的名字必须唯一，不能重复。
export const user = defineStore('user', {
    state: () => {
        return {
            num:1
        }
    },
    getters: {

    },
    actions: {

    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

需要使用的页面里

<template>
    <div>
        {{num}}
    div>
template>
<script lang='ts' setup>
    import { useMainStore } from "../../store/module/useCountStore";
    const mainStore = useMainStore();
    console.log(mainStore.count);
script>
1
2
3
4
5
6
7
8
9
10

注：完整架构则将通过链接的形式上传
届时会将上传地址放在此文章中。