Vue3.2项目架构详解（vue3项目搭建）
前言
随着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(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
})
}#8.3 接口调用层
调用时 异步转同步 直接获取返回数据 async await
<template>
<div>
</div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue';
import {wishList,cookerList} from '../../api/test'
//接口1
const getWishList = async ()=>{
let res = await wishList({});
console.log(res);
}
//接口2
const getCookerList = async ()=>{
let res = await cookerList({});
console.log(res);
}
// 进入页面调用发送请求
onMounted(()=>{
getWishList();
getCookerList();
})
</script>