Vue--》从零开始打造交互体验一流的电商平台（一）

今天开始使用 vue3 + ts 搭建一个电商项目平台，因为文章会将项目的每处代码的书写都会讲解到，所以本项目会分成好几篇文章进行讲解，我会在最后一篇文章中会将项目代码开源到我的github上，大家可以自行去进行下载运行，希望本文章对有帮助的朋友们能多多关注本专栏，学习更多前端vue知识，然后开篇先简单介绍一下本项目用到的技术栈都有哪几个方面（阅读本文章能够学习到的技术）：

vite：快速轻量且功能丰富的前端构建工具，帮助开发人员更高效构建现代Web应用程序。

pnpm：高性能、轻量级npm替代品，帮助开发人员更加高效地处理应用程序的依赖关系。

vue3：vue最新版本的用于构建用户界面的渐进式JavaScript框架。

typescript：javascript的超集，提供了静态类型检查，使得代码更加健壮。

vue-router：Vue.js官方提供的路由管理器与Vue.js紧密耦合，非常方便与Vue.js一同使用。

pinia：vue3构建的Vuex替代品，具有响应式能力，提供非常简单的 API，进行状态管理。

element-plus：基于Vue.js 3.0的UI组件库，用于构建高品质的响应式Web应用程序。

axios：基于Promise的HTTP客户端，可以在浏览器和node.js中使用。

@vueuse/core：针对vue3功能性的API库，提供了许多实用的功能。

当然还有许多其他的需要安装的第三方库，这里就不再一一介绍了，在项目中用到的地方自行会进行讲解，大家自行学习即可，现在就让我们走进vue3+ts的实战项目吧。

初始化项目

包管理工具

src别名配置

重置默认样式

配置elementPlus

自定义全局样式

axios基础配置

API接口统一管理

全局组件封装

路由配置管理

store仓库配置

git管理配置

初始化项目

找到自己想要创建项目的文件夹，在地址栏输入cmd，从而进入当前文件路径，在当前路径下执行如下命令，使用vite构建工具进行创建vue3项目，具体的操作这里就不再赘述，不了解 vite 构建工具的朋友可以先去看 vite脚手架的搭建与使用，因为我这里使用 vite3 版本，其安装命令如下：

我这里就使用 pnpm 进行安装项目了，没有安装过pnpm的朋友，cmd进行全局安装即可，命令为：npm i -g pnpm 。

pnpm create vite

安装过程与我上面分享的文章基本一致，cd到项目路径安装下依赖，最后的结果如下表明创建项目成功：

然后将项目文件拖到编辑器中，打开终端执行 pnpm run dev 打开项目，结果如下：

包管理工具

团队开发项目的时候，需要统一包管理器工具，因为不同包管理器工具下载同一个依赖,可能版本不一样,导致项目出现bug问题,因此包管理器工具需要统一管理！只需在 package.json 中加入一行代码来限制，如下含义：只允许使用 pnpm 来进行安装

"scripts": {
    // ... 其他命令
    "preinstall": "npx only-allow pnpm"
 }

直接将上面的代码复制如下，preinstall 是包安装工具的钩子函数，在上例中作为 install 之前的拦截判断，也就是在 install 之前触发：

配置完成之后，当你使用的不是pnpm命令之后，控制台直接报错警告：

src别名配置

在开发项目的时候文件与文件关系可能很复杂，因此我们需要给src文件夹配置一个别名！在创建的项目中找到 vite.config.ts 配置文件，配置如下命令：

// vite.config.ts
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
            "@": path.resolve(__dirname, 'src') // 相对路径别名配置，使用 @ 代替 src
        }
    }
})

如果红色语法提示请安装 @type/node 其是TypeScript 的一个文件包，用于描述 Node.js 核心模块和常用的第三方库的类型信息，需要终端执行如下命令才能解决下图的警告：

pnpm i @types/node --save-dev

找到 tsconfig.json 配置文件，找到配置项 compilerOptions 添加配置，这一步的作用是让 IDE 可以对路径进行智能提示：

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".", // 解析非相对模块的基地址，默认是当前目录
    "paths": { //路径映射，相对于baseUrl
      "@/*": ["src/*"] 
    }
  }
}

验证我们是否配置成功？我们可以在main.js入口文件处进行校验，如果有提示说明配置成功！

重置默认样式

在项目中我们都会用到一些标签，但是这些标签可能本身自带一些默认样式，这些默认样式可能会影响我们的排版布局，如果每次引用就去清除一遍默认样式有点太过繁琐，因此这里需要我们清除一下默认样式。执行如下命令安装第三方包：

pnpm install reset.css --save

安装完成之后，我们在入口文件处进行引入即可，如下：

配置elementPlus

因为本项目需要采用 element-plus 组件库进行创建项目，其官方地址为：element-plus ，所以接下来需要对组件库进行一个安装配置，具体的实现过程如下，终端执行如下安装命令：

pnpm install element-plus

这里我们采用自动按需导入的方式，如下需要安装两个插件：

pnpm install unplugin-auto-import unplugin-vue-components -D

因为我们可以还需要用到elementplus中的图标，所以这里也采用自动导入的方式：

pnpm install unplugin-icons -D

因为本次使用的是vite + ts的模板，所以我们需要对下面文件进行如下操作修改：

// vite.config.ts
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// 配置按需导入
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

const pathSrc = path.resolve(__dirname, 'src')

export default defineConfig({
    plugins: [vue(),
        AutoImport({
            // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
            resolvers: [
              ElementPlusResolver(),
              // 自动导入图标组件
              IconsResolver({}),
            ],
        }),
        Components({
            resolvers: [
              // 自动注册图标组件
              IconsResolver({
                enabledCollections: ['ep'],
              }),
              // 自动导入 Element Plus 组件
              ElementPlusResolver(),
            ],
        }),
        Icons({
            autoInstall: true,
        }),
    ],
    resolve: {
        alias: {
            "@": pathSrc // 相对路径别名配置，使用 @ 代替 src
        }
    }
})

接下来我们直接在项目中引入一个button组件，尝试一下，如下说明我们自动按需引入成功！

接下来我们需要对elementPlus进行一个主题色的配置，这里我们采用sass样式系统，sass是一种预编译的css，作用类似于less，这里我们在vue项目中采用该预处理器进行处理样式，终端执行如下命令安装相应的插件：

pnpm install sass -D

接下来在src目录下新建styles文件夹用于存放全局样式组件，该文件夹下新建element.scss文件，设置定制化样式，如下：

@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      // 主色
      'base': #f94417,
    ),
    'success': (
      // 成功色
      'base': #f72f18,
    ),
    'warning': (
      // 警告色
      'base': #fd5e1d,
    ),
    'danger': (
      // 危险色
      'base': #e26237,
    ),
    'error': (
      // 错误色
      'base': #cf4444,
    ),
  )
)

然后我们需要在vite.config.ts文件夹下修改下面两处的内容：

回到页面可以看到我们的主题色已经生效了：

因为elementPlus默认是英文的，接下来我们还需要对其设置一下国际化配置，打开main.ys入口文件，进行如下配置：

import { createApp } from 'vue'
import 'reset.css'
import App from './App.vue'
// 配置国际化
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

createApp(App)
    .use(ElementPlus, { locale: zhCn })
    .mount('#app')

接下来我们引入一个分页器，看看是否变成中文了，如下看来是没毛病了！

自定义全局样式

在项目里一些组件共享的色值会以scss变量的方式统一放到一个名为var.scss的文件中，正常组件中使用，需要先导入scss文件，再使用内部的变量，比较繁琐，自动导入可以免去手动导入的步骤，直接使用内部的变量，如下：

我们在公共样式文件夹styles中新增一个var.scss文件，里面存放着全局公共样式：

然后我们在vite.config.ts中进行引入该文件夹：

可以看到我们的样式已经生效了！

axios基础配置

axios是一个基于promise的http客户端，用于浏览器和node.js环境中发起http请求。它提供了简单易用的api，可以用于执行各种类型的http请求，包括get、post、put、delete等。接下来对其进行简单的配置讲解：

终端执行如下命令进行安装axios：

pnpm install axios

然后我们在src文件夹下新建utils工具文件夹，在该文件夹下新建http.ts文件对axios进行二次封装

目的：

使用请求拦截器，可以在请求拦截器中处理一些业务(开始进度条、请求头携带公共参数)

使用响应拦截器，可以在响应拦截器中处理一些业务(进度条结束、简化服务器返回的数据、处理http网络错误)

// axios基础封装
import axios from 'axios'

const http = axios.create({
    baseURL: '服务器接口根地址',
    timeout: 5000,
})

// 请求拦截器
http.interceptors.request.use(config => {
    // 请求拦截器
    return config
}, error => {
    return Promise.reject(error)
})

// 响应拦截器
http.interceptors.response.use(res => {
    return res.data
},  error => {
        //处理网络错误
        let msg = ''
        const status = error.response.status
        switch (status) {
            case 401:
                msg = 'token过期'
                break
            case 403:
                msg = '无权访问'
                break
            case 404:
                msg = '请求地址错误'
                break
            case 500:
                msg = '服务器出现问题'
                break
            default:
                msg = '网络出现问题'
                break
        }
        ElMessage({
            type: 'error',
            message: msg,
        })
        return Promise.reject(error)
    }
)

export default http

因为我们是自动按需导入，所以不需要像以前那样用到elementPlus组件还需要导入，这里直接使用相关api即可，不过可能ts文件会检索 ElMessage 不存在，会报错，这里我们需要在tsconfig.json中的include字段中添加auto-imports.d.ts就可以了：

"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "auto-imports.d.ts",],

接下来开始对我们封装的axios进行相关测试，我们在入口文件main.ts进行接口测试：

打开控制台可以看到我们的接口数据已经请求成功了！

这里我们把接口地址故意写错试试，可以看到如下的效果，还不错！

API接口统一管理

在开发项目的时候,接口可能很多需要统一管理。在src目录下去创建api文件夹去统一管理项目的接口：

统一管理我们项目用户的相关接口

// 统一管理我们项目用户的相关接口
import http from '@/utils/http'
import type { loginForm, loginResponseData, userResponseData } from './type'
// 统一管理接口
enum API {
  LOGIN_URL = '/user/login',
  USERINFO_URL = '/user/info',
}
// 暴露请求函数
// 登录接口的方法
export const reqLogin = (data: loginForm) =>
  http.post<any, loginResponseData>(API.LOGIN_URL, data)

// 获取用户信息接口方法
export const reqUserInfo = () =>
  http.get<any, userResponseData>(API.USERINFO_URL)

登录接口需要携带参数ts类型

// 登录接口需要携带参数ts类型
export interface loginForm {
  username: string
  password: string
}
interface dataType {
  token: string
}
// 登录接口返回数据类型
export interface loginResponseData {
  code: number
  data: dataType
}
interface userInfo {
  userId: number
  avatar: string
  username: string
  password: string
  desc: string
  roles: string[]
  buttons: string[]
  routes: string[]
  token: string
}
// 定义服务器返回用户信息相关数据类型
interface user {
  checkUser: userInfo
}
export interface userResponseData {
  code: number
  data: user
}

当然后期我们还需要其他的接口，这里仅仅作为一个展示，接下来进行接口测试：

全局组件封装

在vue3项目，有很多组件需要在多个地方进行使用，所以我们一般都将其封装成全局组件，然而单纯的封装成全局组件的话，每次使用还需要额外在每个项目中进行引入，就很烦，这里我们先将所有的全局进行全局注册，这样后面使用的话直接使用我们设置的组件名称即可，就不需要一次次再单独的进行引入了，如下：我们封装一个Loading加载组件为全局组件：

封装成全局组件之后，我们还需要在入口文件main.js进行一个引入注册：

上面index.js代码如下，方便大家复制直接使用即可：

import { defineAsyncComponent } from "vue";
// 获取要注册的全局组件
const components = import.meta.glob("./global/*.vue");

// 对外暴露插件
export default function install(app: any) {
  for (const [key, value] of Object.entries(components)) {
    const name = key.slice(key.lastIndexOf("/") + 1, key.lastIndexOf("."));
    app.component(name, defineAsyncComponent(value as any));
  }
}

然后Loading组件的加载的话，大家可以仿照网站里面的案例进行使用，还是有免费的找找就行：

然后这里我们将本次使用的Loading加载组件代码也分享出来，供大家使用：

<template>
    <div class="load">
        <div class="loading">
        <div class="vsg">
            <svg viewBox="0 0 50 50">
            <circle class="ring" cx="25" cy="25" r="20"></circle>
            <circle class="ball" cx="25" cy="5" r="3.5"></circle>
            </svg>
        </div>
        <div class="text">
            Loading
        </div>
        </div>
    </div>
</template>
  
<style lang="scss" scoped>
.load {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 3;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(0, 0, 0);
    .loading {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .vsg {
            display: flex;
            justify-content: center;
            align-items: center;
            @keyframes spin {
                to {
                    transform: rotate(360deg);
                }
            }
            svg {
                width: 3.75em;
                animation: 1.5s spin ease infinite;
            }
            .ring {
                fill: none;
                stroke: hsla(106, 97%, 59%, 0.3);
                stroke-width: 2;
            }
            .ball {
                fill: #00ff85;
                stroke: none;
            }
        }
        .text {
            text-align: center;
            font-size: 16px;
            background: linear-gradient(to right, #00ff85, #5090ff);
            background-clip: text;
            -o-background-clip: text;
            -ms-background-clip: text;
            -moz-background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
        }
    }
}
</style>

接下来我们在App.vue组件进行引入loading组件，如下：

回到浏览器可以看到我们的loading组件已经加载出来了，后期可以根据情况使用异步加载的组件或者使用v-if来进行操作，博主这里不再赘述：

路由配置管理

我们在开始搭建后台项目之前，都要仔细考虑一下路由应该如何配置，以下是本项目配置路由的详细步骤，如果想更加深入了解vue3路由知识，推荐参考我之前的文章：Vue 3 路由进阶——从基础到高级的完整指南：

安装配置路由的第三方包：

pnpm install vue-router

安装完路由包之后，接下来我们要先创建路由组件，因为项目仅仅是一个后台所以我们只需要在src目录下新进views文件，再创建3个路由组件即可：

创建完路由组件之后，接下来开始进行相关router配置：

// 通过vue-router插件实现模板路由配置
import { createRouter, createWebHistory } from 'vue-router'
import { constantRoute } from './routes'
 
// 创建路由器
const router = createRouter({
  // 路由模式
  history: createWebHistory(),
  routes: constantRoute,
  // 滚动行为
  scrollBehavior() {
    return {
      left: 0,
      top: 0,
    }
  },
})
export default router

这里我单独将routes的属性对象抽离出一个js文件出来，便于后期的维护，代码如下：

// 对外暴露路由(常量路由)
export const constantRoute = [
  {
    path: '/login',
    name: 'login', // 命名路由
    component: () => import('@/views/login/index.vue'),
    meta: {
      title: '登录页面',
    },
  },
  {
    path: '/',
    name: 'home',
    component: () => import('@/views/home/index.vue'),
    meta: {
      title: '后台页面',
    },
  },
  {
    path: '/404',
    name: '404',
    component: () => import('@/views/404/index.vue'),
    meta: {
      title: '404界面',
    },
  },
  {
    path: '/:pathMatch(.*)*',
    name: 'any',
    redirect: '/404',
  },
]

接下来在入口文件 main.ts 处进行路由router的挂载：

如果想把写好的路由进行展示的话，需要通过 router-view 作为路由出口，路由匹配到的组件将进行响应的渲染，这里在App根组件上进行展示：

最终呈现的效果如下所示：

store仓库配置

接下来我们需要对我们项目进行一个仓库管理，这里用到了pinia状态管理工具，不了解pinia的朋友，推荐看一下我之前讲解的文章：探索Pinia：Vue状态管理的未来，本项目就不再着重讲解其具体知识了。具体讲解如下：

终端执行如下命令安装pinia仓库：

pnpm install pinia

在src目录下新建store文件夹，文件夹下新建 index.ts 文件，暴露如下代码：

// 设置pinia仓库
import { createPinia } from 'pinia'
const pinia = createPinia()
// 对外暴露：入口文件需要安装仓库
export default pinia

在main.ts入口文件出进行pinia的挂载：

import { createApp } from 'vue'
import 'reset.css'
import App from './App.vue'
// 配置国际化
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
// 引入自定义插件对象：注册整个项目的全局组件
import globalComponents from '@/components'
// 导入路由配置
import router from '@/router'
// 导入仓库
import pinia from '@/store'

createApp(App)
    .use(ElementPlus, { locale: zhCn }) // 配置中文国际化
    .use(globalComponents) // 安装全局路由组件
    .use(router) // 安装路由
    .use(pinia) // 安装仓库
    .mount('#app')

接下来在store中新建文件夹modules用于存储仓库文件，在该文件夹创建一个login.js文件，用来存储登录相关数据，这里采用组合式API的写法，如下案例：

import { defineStore } from "pinia";
import { ref } from "vue"

export const useMemberStore = defineStore("login", () => {
    const profile = ref();
    const setProfile = (val: number) => {
        profile.value = val;
    }
    const clearProfile = () => {
        profile.value = undefined
    }
    return { profile, setProfile, clearProfile }
})