目录

前言

正文

一、项目初始化

二、引入UI框架

三、引入路由 Vue-Router

四、引入状态管理器 Vuex

五、引入 Axios

六、总结

---

前言

如今，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 -S

2、在 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 3 UI 框架 | Element Plus

此处不做展开。 

三、引入路由 Vue-Router

Vue-Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得更加简单。

1、安装

npm install vue-router@4 -S

2、在 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 -S

2、在 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

此处不做展开。 

除了 Vuex，可以跟 Vue3 搭配使用的还有另外一个状态管理工具：Pinia。感兴趣的朋友请戳： Pinia 上手指南 -- 新一代状态管理工具，它会成为 Vuex 的良好替代品吗？_前端不释卷leo的博客-CSDN博客

五、引入 Axios

前端项目多多少少都会与后端进行交互，当前主流的前后端请求交互常用库 —— Axios，该库帮助我们做了很多事情，省去了很多造轮子的时间。

1、安装

npm install axios -S

2、封装 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 service

3、在 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 项目搭建完成了，麻雀虽小，五脏俱全。之后便可以在此基础上根据业务需求进行迭代。

如本文有不巧当的地方，请不吝赐教，谢谢！