目录
前言
如今，Vue3 已成为 Vue 的默认版本。相信现在有很多人在用 Vue3 开发项目，但是很多时候没有机会从零开始搭建一个项目，毕竟只有相关负责人才有可能有机会将框架搭建出来，之后我们在此基础上进行业务迭代、模块开发。下班前几分钟，从零搭建一个 Vue3 最小原型系统，麻雀虽小，五脏俱全。
正文
一、项目初始化
既然想搭建一个 Vue3 项目，可以使用尤大的最新构建工具 Vite 来进行项目初始化。
npm init vite@latest初始化的目录结构如下。
想了解更多 Vite 相关内容请前往本人的另一篇博客：
上手体验Vue3 Vite的魅力（“快”的艺术），有了它，你还会用webpack吗？_前端不释卷leo的博客-CSDN博客
此处不做展开。
二、引入UI框架
Vite 已经帮助我们完成了项目的初始化，下一步就是引入UI框架。善于使用UI框架可以帮助我们省去很多重复造轮子的时间，提高开发效率。在 Vue3 中，比较常用的UI框架有 Element Plus。
1、安装
npm install element-plus -S2、在 main.js 全局引入
import { createApp } from 'vue'
import App from './App.vue'
// 引入element-plus
import ElementPlus from 'element-plus'
// 引入对应的样式
import 'element-plus/theme-chalk/index.css'
createApp(App).use(ElementPlus).mount('#app')除了全局引入组件外，还可以引入部分组件，从而减少打包体积。
3、直接在组件中使用
<el-button>ElementPlus按钮</el-button>更多 Element Plus 相关内容请前往官网：
此处不做展开。
三、引入路由 Vue-Router
Vue-Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得更加简单。
1、安装
npm install vue-router@4 -S2、在 src 下新建 router 文件夹，且新建一个文件 index.js
可使用如下指令构建最简单的结构（也可在项目中直接创建）。
cd ./src
mkdir router
cd ./router
touch index.js
3、index.js 中的简单内容
import { createRouter, createWebHashHistory } from 'vue-router'
const routes = [
{
path: '/',
redirect: '/componentA'
},
{
path: '/componentA',
name: 'componentA',
component: () => import('../components/ComponentA.vue')
},
{
path: '/componentB',
name: 'componentB',
component: () => import('../components/ComponentB.vue')
}
];
const router = createRouter({
history: createWebHashHistory(),
routes
});
export default router;4、在 main.js 中引入 router
// ...
import router from './router'
createApp(App).use(ElementPlus).use(router).mount('#app')5、在 App.vue 使用
<script setup>
// ...
</script>
<template>
<router-view></router-view>
</template>四、引入状态管理器 Vuex
作为 Vue 的全家桶之一，Vuex 必不可少，其采用集中式存储，管理应用的所有组件状态，并以相应的规则保证状态以一种可预测的方式发生变化。
1、安装
npm install vuex -S2、在 src 下新建 store 文件夹，且新建一个文件 index.js
可使用如下指令构建最简单的结构（也可在项目中直接创建）。
cd ./src
mkdir store
cd ./store
touch index.js
mkdir ./module
cd ./module
touch moduleA.js
3、在建立好目录结构后，补充对应文件中的简单内容
index.js
import { createStore } from "vuex"
import { moduleA } from "./modules/moduleA"
export const store = createStore({
// Vuex允许将store分割成模块（module），每个模块拥有自己的state、mutation、action、getter、甚至是嵌套子模块
// 访问moduleA的状态：store.state.moduleA
modules: {
moduleA
}
})moduleA.js
export const moduleA = {
// 默认情况下，模块内部的action、mutation和getter是注册在全局命名空间的，如果希望模块具有更高的封装度和复用性，可以通过添加namespaced:true的方式使其成为带命名空间的模块
namespaced: true,
state: {
testState1: 0
},
getters: {
testGetter1: state => {
return state.testState1;
}
},
mutations: {
testMutation1(state) {
state.testState1++;
}
},
actions: {
testAction1(context) {
setTimeout(() => {
context.commit('testMutation1');
}, 1000);
}
}
}4、在 main.js 中引入 store
// ...
import { store } from './store'
createApp(App).use(ElementPlus).use(router).use(store).mount('#app')5、在对应组件中进行使用
更多 Vuex 相关内容请参考：
此处不做展开。
除了 Vuex，可以跟 Vue3 搭配使用的还有另外一个状态管理工具：Pinia。感兴趣的朋友请戳： Pinia 上手指南 -- 新一代状态管理工具，它会成为 Vuex 的良好替代品吗？_前端不释卷leo的博客-CSDN博客
五、引入 Axios
前端项目多多少少都会与后端进行交互，当前主流的前后端请求交互常用库 —— Axios，该库帮助我们做了很多事情，省去了很多造轮子的时间。
1、安装
npm install axios -S2、封装 axios 请求（封装方式多样，视情况配置）
// request.js
import axios from 'axios'
const service = axios.create({
baseURL: '/api',
timeout: 5000
});
// 请求拦截器
service.interceptors.request.use(
config => {
// 做一些请求前的处理，例如添加一些头信息、token信息等
return config
},
error => {
return error
}
);
// 响应拦截器
service.interceptors.response.use(
response => {
// 根据响应做一些处理，例如将响应信息存储到store中等
},
error => {
return error
}
);
export default service3、在 src 下建立 api 文件，里面是与业务逻辑相关的请求
import service from "../utils/request"
export const testPost = data => {
return service({
url: '/base',
method: 'post',
data
})
}更多 Axios 相关内容请前往本人另一篇博客：
Vue axios 详细介绍（核心使用、封装、个性化配置，破万字）_前端不释卷leo的博客-CSDN博客_vue.axios
此处不做展开。
六、总结
至此，一个最小原型的 Vue3 项目搭建完成了，麻雀虽小，五脏俱全。之后便可以在此基础上根据业务需求进行迭代。
如本文有不巧当的地方，请不吝赐教，谢谢！