Vue3.2项目架构详解

科技 08-10 来源：重庆源码时代

前言

随着vue3.2版本的更新，最新vue全家桶技术栈也发生了部分改变
老版本全家桶：vue2.6+vue-router+vuex+vue-cli+axios
新版本全家桶：vue3.2+vue-router@4.x+pinia+vite2+TypeScript+axios

接下来我们开始一起搭建一个移动端vue3.2的项目吧~

#1.快速创建项目

yarn create vite my-vue-app --template vue-ts   #快速初始化项目

yarn   #安装项目所有三方包yarn dev  #运行项目

#2.vite 配置

vite.config.js 配置

安装 path 模块配置@快捷路径

yarn add @types/node -D

import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import { resolve } from 'path'// https://vitejs.dev/config/export default defineConfig({  plugins: [vue()],  resolve: {    alias: {      '@': resolve(__dirname, 'src') // 设置 `@` 指向 `src` 目录    }  },  base: './', // 设置打包路径})

#3.vue-router 路由配置

安装 vue-router@4 版本

yarn add vue-router@4

创建 src/router/index.ts 路由配置文件

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'const routes: Array = [    {        path: '/',        redirect: '/home'    },    {        path: '/home',        name:'home',        component: () => import('@/views/home/Home.vue')    },    {        path: '/about',        name:'about',        component: () => import('@/views/about/About.vue')    }]const router = createRouter({    history: createWebHistory(),    routes})export default router

将路由配置文件注册到顶级对象中 main.ts

import { createApp } from 'vue'import App from './App.vue'import router from './router/index'const app = createApp(App);//挂载路由：一定要先创建app 然后注册路由，最后才是挂载 app的dom节点【必须有先后顺序】app.use(router);app.mount('#app')

#4.pinia 替代vuex

官网地址： https://pinia.vuejs.org/

pinia 是新一代状态管理仓库，是和vue3 连用的新型状态管理仓库。
尤雨溪: pinia相当于就是vuex5 ，未来vuex不会再进行更新和升级。
pinia 有非常强的类型推断特点，不必再为了类型的定义烦恼

vuex:五大核心配置： state getters mutations（同步修改数据） actions（异步修改数据） modules
pinia：四大核心配置：state getters actions【修改数据的方法】 modules

#4.1 安装 pinia

yarn add pinia

#4.2 创建文件 src/store/index.ts

import { defineStore } from 'pinia'//defineStore 函数//参数1：模块名 保证整个状态管理中的唯一//参数2：对象 包含核心配置export const testStore = defineStore('test', {  state: () => {    return {        num:100,    }  },  getters: {    getNewNum(): string {        return '最新的数字是：'+this.num;    }  },  actions: {    setNewNum(num:number) {        this.num = num;    }  }})

#4.3 main.ts 挂载

import { createApp } from 'vue'const app = createApp(App)//导入pinia 状态管理import {createPinia} from 'pinia'const store = createPinia();//注册pinia app.use(store)

#4.4 使用数据

使用数据2种方法

// 导入定义好的 状态管理类import { testStore } from '../../store';//通过testStore 创建一个一个实例const test = testStore()//使用方式1： 需要使用时获取console.log(test.num);  //使用方式2： 加入computed 每次改变自动拿到最新数据//computed 获取最新数据const num = computed(()=>{    return test.num;})

#4.5 修改状态管理中的数据

修改数据的2种方法

import { testStore } from '../../store';//通过testStore 创建一个一个实例const test = testStore()//方式1：修改状态管理库中的数据const addNum=()=>{    //直接修改数据    test.$patch({num:test.num+1})}//方式2：借助actions方法 覆盖数据const setNum=()=>{    test.setNewNum(2000);}

#4.6 getters 装饰器使用

import { testStore } from '../../store';//通过testStore 创建一个一个实例const test = testStore()let getterNum = test.getNewNum;console.log(getterNum);   //最新的数字是：100

#5. 使用vant@4

官网地址：https://vant-contrib.gitee.io/vant/v4/#/zh-CN/home

安装最新版 vant ui（vue3版本）

npm i vant或yarn add vant

#5.1 导入所有组件【不推荐】

不推荐原因：vant 封装了太多业务组件，如果一次性导入所有的组件，项目打包时会打包非常多用不到的组件，浪费性能。

main.ts

import { createApp } from 'vue'const app = createApp(App)//导入vant ui import Vant from 'vant';import 'vant/lib/index.css';app.use(Vant);

#5.2 按需导入【推荐】

main.ts

//按需导入vant ui import 'vant/lib/index.css';import { Button,Field } from 'vant';//注册组件app.use(Button).use(Field);

组件使用

#6.使用 ant design vue @3

官网地址：https://www.antdv.com/components/overview

UI框架一般只选择一个，真实项目中 vant 和 antd 选择一个即可

安装

 npm i --save ant-design-vue 或yarn add ant-design-vue

#6.1 全局导入所有组件

另外两种注册方案：按需全局注册（和vant按需引入方法一致）和组件局部注册使用方案，请移步官方文档。

import { createApp } from 'vue'const app = createApp(App)//全局导入 antd import Antd from 'ant-design-vue';import 'ant-design-vue/dist/antd.css';app.use(Antd)

组件使用

#7.使用 element plus

最新版element导入使用： https://element-plus.gitee.io/zh-CN/

UI框架一般只选择一个，真实项目中 vant antd 和 element 选择一个即可

注意：vue3的管理系统中 element plus 有很多细节的bug,使用时一定要注意！！！

安装

npm install element-plus --save或yarn add element-plus

#7.1 全局注册所有组件

import { createApp } from 'vue'const app = createApp(App)//全局导入 element import ElementPlus from 'element-plus'import 'element-plus/dist/index.css'app.use(ElementPlus)

组件使用

#8.axios 三层封装

两个接口均为测试mock数据接口

安装

yarn add axios 或npm i axios

#8.1全局配置层

主要完成全局默认配置，拦截器配置等

创建： src/utils/request.ts

import axios from 'axios';//服务器地址axios.defaults.baseURL = 'https://api.example.com';// 添加请求拦截器axios.interceptors.request.use(function (config) {    // 在发送请求之前做些什么    return config;  }, function (error) {    // 对请求错误做些什么    return Promise.reject(error);  });// 添加响应拦截器axios.interceptors.response.use(function (response) {    // 对响应数据做点什么    return response;  }, function (error) {    // 对响应错误做点什么    return Promise.reject(error);  });

#8.2 接口对应层

完成与后端接口一一对应的函数封装

创建 src/api/test.ts

import request from '../utils/request';//get请求export const wishList =(params:any)=>{    return  request({        url:'/wish/list',        method:'get',        params    })}//post请求export const cookerList =(data:any)=>{    return  request({        url:'/users/cookerList',        method:'post',        data    })}