Vue3.2项目架构详解
前言
随着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 -Dimport { 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<RouteRecordRaw> = [ { 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);
- 组件使用
<template> <div> <van-button type=”primary”>主要按钮</van-button> <hr> <van-field v-model=”name” label=”文本” placeholder=”请输入用户名” /> <hr> </div></template><script setup lang=”ts”>import { ref } from ‘vue’let name = ref(”);</script>
#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)
- 组件使用
<template> <div> <a-button type=”primary”>Primary Button</a-button> <a-input v-model:value=”name” placeholder=”用户名” /> </div></template><script setup lang=”ts”>import { ref } from ‘vue’let name = ref(”);</script>
#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)
- 组件使用
<template> <div> <el-button type=”primary”>Primary</el-button> <el-input v-model=”name” placeholder=”Please input” /> </div></template><script setup lang=”ts”>import { ref } from ‘vue’let name = ref(”);</script>
#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(functiоn (config) { // 在发送请求之前做些什么 return config; }, functiоn (error) { // 对请求错误做些什么 return Promise.reject(error); });// 添加响应拦截器axios.interceptors.response.use(functiоn (response) { // 对响应数据做点什么 return response; }, functiоn (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 })}
#8.3 接口调用层
调用时 异步转同步 直接获取返回数据 async await
<template> <div> </div></template><script setup lang=”ts”>import { onMounted } from ‘vue’;import {wishList,cookerList} from ‘../../api/test’//接口1const getWishList = async ()=>{ let res = await wishList({}); console.log(res); }//接口2const getCookerList = async ()=>{ let res = await cookerList({}); console.log(res); }// 进入页面调用发送请求onMounted(()=>{ getWishList(); getCookerList();})</script>
原创文章，作者：starterknow，如若转载，请注明出处：https://www.starterknow.com/126618.html
starterknow