vue3+vite+ts+Ant Design of Vue搭建项目(常见配置)

// 安装pnpm命令行工具 npm install pnpm -g ; 

//查看源 pnpm config get registry

//切换淘宝源 pnpm config set registry registry.npm.taobao.org

一:项目创建

1:执行pnpm create vite my-vue-app --template vue

2:cd my-vue-app 

pnpm install 

pnpm dev

二:基础文件配置

1.vite配置文件 

vite.config.ts 位于项目的根路径，项目的全局配置文件，启动时会自动读取该文件

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";
const resolve = (dir) => path.join(__dirname, dir);
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": resolve("src"),
    },
  },
  server: {
    port: 4000,
    open: true,
    cors: true,
    proxy: {
      "/api": {
        target: 'xxx',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },
});

此时 TS 可能有这个错误提示：找不到模块“path”或其相应的类型声明

解决方法：

pnpm add @types/node

2.集成路由

(1)执行 

pnpm add vue-router

(2)创建 src/router/index.ts 文件

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/home.vue')
  },
]
const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

(3)页面使用路由

<script lang='ts'>
import { defineComponent } from "vue";
import { useRouter, useRoute } from "vue-router";
export default defineComponent({
  name: "home",
  setup() {
    const router = useRouter();
    const route = useRoute();
    setTimeout(() => {
      router.push({
        path: "/login",
        query: {
          name: "amdin",
        },
      });
    }, 2000);
  },
});
</script>

3.集成pinia

(1)执行 

pnpm add pinia

还需再安装个数据持久化插件

pnpm add pinia-plugin-persist

在src下创建store文件夹，并在其内创建index.js文件，文件内容如下

import { createPinia } from "pinia"
import piniaPluginPersist from "pinia-plugin-persist"
 
const store = createPinia()
store.use(piniaPluginPersist)
 
export default store

(2)在store目录下创建一个新的js文件，比如user.js

import { defineStore } from "pinia"
 
export const userStore = defineStore({
    id: "user", // id是唯一的，如果有多个文件，ID不能重复
    state: () => {
        return {
            userinfo: null,
            bank_type: 1, 
        }
    },
    actions: {
        setInfo(data) {
            this.userinfo = data
        },
        setBankType(data) {
            this.bank_type = data
        },
        // 用户退出，清除本地数据
        logout() {
            this.userinfo = null
            sessionStorage.clear()
            localStorage.clear()
        },
    },
    persist: {
        enabled: true,
    },
})

(3)页面使用pinia

<script lang='ts'>
import { userStore } from "@store/user" // 引用js，路径根据你们对应配置好的路径填写
const store = userStore()
let result={}
store.setInfo(result)
</script>

4:集成ant-design-vue

(1)执行 

pnpm add ant-design-vue

(2)(可选，对应的icon图标安装)

pnpm add @ant-design/icons-vue

5:集成HTTP工具 Axios

(1)执行 

pnpm add axios

(2)创建 src/http/axios.ts 文件

import Axios, { AxiosInstance } from 'axios'
const axios: AxiosInstance = Axios.create({
  timeout: 20000 // 请求超时 20s
})
// 前置拦截器(发起请求之前的拦截)
axios.interceptors.request.use(
  (config) => {
    /** 
    * 根据你的项目实际情况来对 config 做处理
    * 这里对 config 不做任何处理，直接返回
    */
    return config
  },
  (error) => {
    return Promise.reject(error)
  }
)

// 后置拦截器(获取到响应时的拦截)
axios.interceptors.response.use(
  (response) => {
    /**
     * 根据你的项目实际情况来对 response 和 error 做处理
     * 这里对 response 和 error 不做任何处理，直接返回
     */
    return response
  },
  (error) => {
    if (error.response && error.response.data) {
      const code = error.response.status
      const msg = error.response.data.message
      console.error(`[Axios Error]`, error.response)
    } else {
    }
    return Promise.reject(error)
  }
)
export default axios

6:集成CSS预编译器

(1)执行 

pnpm add less less-loader

(2)使用

<style lang="less"></style>

7:main.ts 文件中挂载

import { createApp } from 'vue'
import App from './App.vue'

import router from '@/router/index'
import store from '@/store/index'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';

const app = createApp(App);
app.use(router);
app.use(store);
app.use(Antd);

app.mount('#app')

7:App.vue根目录基础配置

<script setup>
import zhCN from "ant-design-vue/lib/locale/zh_CN"; // 导入中文语言包
</script>
<template>
  <a-config-provider :locale="zhCN">
    <router-view> </router-view>
  </a-config-provider>
</template>
<style scoped></style>