Vue3项目框架搭建

news2025/1/11 8:09:25

前言

大多时候是在别人搭建好的项目上开发需求，突然要自己从新项目搭建开始，纯纯赶鸭子上架，参考一些项目，试着搭建的，记录一下历程，主要怕忘了。有些地方本该贴上代码截图更好，但是我此刻手头没有启动代码，所以重在分享一个思路历程吧，某个环节的具体实现可以上网搜下。

技术选择

首先要确定我们用哪些技术、组件库等等，这里我搭建的选择是：Vue3、Typescript、Vite、Element Plus、Axios、scss、Echart。

过程

创建项目

在命令行窗口执行以下命令可以创建基础项目，自己自定义选择，如果执行命令报错，检查下node版本是否过低，升级到18+再试。

npm create vue@latest

安装三方插件

接下来要安装一些必须的插件：UI组件库、http请求库、css样式库

Element Plus安装和使用

安装命令如下，安装完要在main.ts中引入才能使用，别忘记还要引入它的样式文件。

npm install element-plus --save

Axios安装和使用

调接口我用的比较多的就是axios了。安装完成后，一般会封装一个request.ts文件，用来编写请求拦截器和响应拦截器以及接口请求地址。再把要用的接口封装到一个或多个单独的文件api.ts里，api.ts会引用request.ts ，为每一个接口定义一个方法并导出，页面上用的时候就可以直接调用api.ts里的方法了，这样通过api.ts统一管理我们用的接口就很好。

axios请求拦截器：通过可以统一为接口请求添加token等一些请求头

axios响应拦截器：拦截错误码401 500 404等统一给出提示或跳转处理，优化用户体验。

npm install axios

scss安装和使用

样式库一般用的也比较多，scss、less都行，可以方便我们写嵌套样式，所以装上一个。

npm install -D sass sass-loader

其余的插件

到这里就是看自己需不需要用的插件了，没有也行。推荐几个吧。

unplugin-vue-router安装和使用

这个是可以自动生成路由的，一般我们新建一个页面就要去route目录下定义一条路由配置，这个插件只要你在src\pages目录下新建的vue组件，它可以按照层级自动生成路由配置。比如src\pages\login.vue 直接能通过/login访问这个页面，不用手动去定义这个/login的路由。

npm i -D unplugin-vue-router

Echart安装和使用

如果项目里需要画图表，那就装上吧。

在要用的页面import导入才能用哦，而且重点是显示图表的div一定要设置height和width才能生效。我记得我主页好像也有一篇用echart的文章。Vue2项目引用echart插件_npm install echarts --save-CSDN博客

npm install echarts --save

Layout布局

要用的插件装完，就开始布局整体页面结构了，页面、菜单、路由这三个是相关联的，我感觉这里还是有点讲究的，我做的是一个管理系统，所以顶部导航栏、侧边菜单栏以及底部这部分就是公用的，通过route的配置，我们可以实现每个页面都继承这部分公共的内容。

就上面这个效果来布局，首先新建一个layout.vue组件，它的内容就是上面的布局代码，这个要自己写，我用的是elementplus里的el-container布局容器划分结构的，当前页面的那个区域我们只需要定义一个<router-view>标签，它会根据当前访问的路由动态渲染出对应的页面，往下我们看看路由怎么个配置法。

我们定义根路由/指向这个layout.vue组件，然后所有基于这个layout布局的页面的路由都定义在根路由/的children子路由里，这样就可以实现我们访问某个页面的路由，这个布局结构依然在的。