现在临近期末考试了 需要花时间去复习一下专业课内容了 准备做完这个demo级别的PC端项目就收手了 寒假再专心做一个大型的完整项目

这个大事件管理系统是由Vue3来进行开发 预计五天内完成 视频课中用到了Git版本控制 但是这部分知识没有学过 所以只能先不用Git 等有时间了再把这块知识补充一下

通过这一篇文章的学习 我们主要要了解如何做好一个项目的准备工作

本项目的技术栈

本项目技术栈基于 ES6、vue3、pinia、vue-router 、vite 、axios 和 element-plus

项目页面介绍

pnpm包管理器—创建项目

一些优势：比同类工具快 2倍 左右、节省磁盘空间https://www.pnpm.cn/

npm install -g pnpm 安装pnpm

pnpm create vue 创建项目

调整项目目录

1.删除部分文件

2.修改&&添加内容

src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: []
})

export default router

src/App.vue

<script setup></script>

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<style scoped></style>

src/main.js

import { createApp } from ‘vue’
import { createPinia } from ‘pinia’

import App from ‘./App.vue’
import router from ‘./router’

const app = createApp(App)

app.use(createPinia())
app.use(router)
app.mount(‘#app’)

3.新增需要目录 api utils

4.将项目需要的全局样式 和 图片文件，复制到 assets 文件夹中, 并将全局样式在main.js中引入

import '@/assets/main.scss'

安装sass依赖 pnpm add sass -D

VueRouter4路由代码解析

import { createRouter, createWebHistory } from 'vue-router'

// createRouter 创建路由实例，===> new VueRouter()
// 1. history模式: createWebHistory()   http://xxx/user
// 2. hash模式: createWebHashHistory()  http://xxx/#/user

// vite 的配置 import.meta.env.BASE_URL 是路由的基准地址，默认是 ’/‘
// https://vitejs.dev/guide/build.html#public-base-path

// 如果将来你部署的域名路径是：http://xxx/my-path/user
// vite.config.ts  添加配置  base: my-path，路由这就会加上 my-path 前缀了

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: []
})

export default router

引入Element-Plus组件库

安装

pnpm add element-plus

自动按需导入

1.安装插件

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

2.然后把下列代码插入到你的 Vite 或 Webpack 的配置文件中

...
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    ...
    AutoImport({
      resolvers: [ElementPlusResolver()]
    }),
    Components({
      resolvers: [ElementPlusResolver()]
    })
  ]
})

3.直接使用(无需注册!!!) (默认components下的文件也会被自动注册!!!)

Pinia构建用户仓库和持久化

1.安装持久化插件pinia-plugin-persistedstate

pnpm add pinia-plugin-persistedstate -D

2.在main.js中使用

import persist from ‘pinia-plugin-persistedstate’
…
app.use(createPinia().use(persist))

3.配置stores/user.js

import { defineStore } from 'pinia'
import { ref } from 'vue'

// 用户模块
export const useUserStore = defineStore(
  'big-user',
  () => {
    const token = ref('') // 定义 token
    const setToken = (t) => (token.value = t) // 设置 token

    return { token, setToken }
  },
  {
    persist: true // 持久化
  }
)

Pinia – 配置仓库统一管理

pinia 独立维护

– 现在：初始化代码在 main.js 中，仓库代码在 stores 中，代码分散职能不单一

– 优化：由 stores 统一维护，在 stores/index.js 中完成 pinia 初始化，交付 main.js 使用

仓库 统一导出

– 现在：使用一个仓库 import { useUserStore } from ./stores/user.js 不同仓库路径不一致

– 优化：由 stores/index.js 统一导出，导入路径统一 ./stores，而且仓库维护在 stores/modules 中

数据交互 – 请求工具设计

我们使用 axios 来请求后端接口, 一般都会对 axios 进行一些配置 (比如: 配置基础地址等)

一般项目开发中, 都会对 axios 进行基本的二次封装, 单独封装到一个模块中, 便于使用

创建axios实例

1.安装axios pnpm add axios

2.新建utils/request.js封装axios模块

利用 axios.create 创建一个自定义的 axios 来使用

http://www.axios-js.com/zh-cn/docs/#axios-create-config

import axios from 'axios'

const baseURL = 'http://big-event-vue-api-t.itheima.net'

const instance = axios.create({
  // TODO 1. 基础地址，超时时间
})

instance.interceptors.request.use(
  (config) => {
    // TODO 2. 携带token
    return config
  },
  (err) => Promise.reject(err)
)

instance.interceptors.response.use(
  (res) => {
    // TODO 3. 处理业务失败
    // TODO 4. 摘取核心响应数据
    return res
  },
  (err) => {
    // TODO 5. 处理401错误
    return Promise.reject(err)
  }
)

export default instance

完成axios基本配置

import { useUserStore } from '@/stores/user'
import axios from 'axios'
import router from '@/router'
import { ElMessage } from 'element-plus'

const baseURL = 'http://big-event-vue-api-t.itheima.net'

const instance = axios.create({
  baseURL,
  timeout: 100000
})

instance.interceptors.request.use(
  (config) => {
    const userStore = useUserStore()
    if (userStore.token) {
      config.headers.Authorization = userStore.token
    }
    return config
  },
  (err) => Promise.reject(err)
)

instance.interceptors.response.use(
  (res) => {
    if (res.data.code === 0) {
      return res
    }
    ElMessage({ message: res.data.message || '服务异常', type: 'error' })
    return Promise.reject(res.data)
  },
  (err) => {
    ElMessage({ message: err.response.data.message || '服务异常', type: 'error' })
    console.log(err)
    if (err.response?.status === 401) {
      router.push('/login')
    }
    return Promise.reject(err)
  }
)

export default instance
export { baseURL }

首页整体路由设计

实现目标:

• 完成整体路由规划【搞清楚要做几个页面，它们分别在哪个路由下面，怎么跳转的…..】
• 通过观察, 点击左侧导航, 右侧区域在切换, 那右侧区域内容一直在变, 那这个地方就是一个路由的出口
• 我们需要搭建嵌套路由

目标：

• 把项目中所有用到的组件及路由表, 约定下来

到这里项目的准备工作就基本完成了 后面我们就可以进行页面的设计,前后端交互,页面渲染等操作了 对于项目的准备 我们应该做到十分熟练 这可以让我们提高编写代码的效率 更好地管理项目 从而写出更好的Vue3项目