Vite项目结构与Vue Router 4集成教程

本文档详细介绍了项目基础搭建流程，主要分为两大部分：接口文档管理和Vue应用的构建。首先，对于接口文档管理，提到的是一个HTTP接口地址（http://121.89.205.189:3001/admindoc/#api-Banner-GetBannerList），这可能是一个用于API文档查看或测试的后台服务。 项目创建部分： 1. 使用Vite框架初始化一个新的Vue项目：通过运行`npminit vue@latest`命令，这将设置项目的基本结构和配置。然后，切换到项目目录并安装所有依赖项，例如可能包括但不限于Vue CLI和其他开发工具，通过`npminstall`命令实现。 2. 配置项目的代码风格规则：在`.eslintrc.json`文件中，关闭多单词组件命名检查，设置了其他样式选项如单引号、尾随逗号和换行风格。 3. 启动项目进行预览：通过运行`npm run dev`命令启动开发服务器，以便实时查看和调试项目。 第二部分是Vue路由的引入与配置： 1. 安装Vue Router v4版本：使用`npminstall vue-router@4`确保安装最新版本的路由管理器。 2. 创建路由文件`src/router/index.js`（可以是TypeScript版本），定义了两个基本路由：首页`/`显示`HomeView.vue`组件，登录页`/login`显示`LoginView.vue`组件。使用`createRouter`函数创建一个带有哈希历史模式的历史记录管理器，并导出默认的路由器实例。 3. 在`App.vue`模板中，使用`<router-view>`组件来渲染当前路由选择的组件。 4. 在主入口文件`main.js`中，导入并使用`router`，将其挂载到页面的根元素`#app`上，实现了应用的路由功能。 5. 提到了对Vue的别名配置，但具体如何配置依赖于具体的Vite配置，由于没有提供Vite配置信息，这里假设Vite内已经自动处理了别名，无需额外配置。 总结来说，本篇文章涵盖了从Vite项目初始化、依赖安装，到配置代码风格、Vue路由的引入和设置，以及Vue别名的简要提及，这些步骤对于构建一个基础的Vue应用至关重要。如果你打算开发一个带有动态路由控制的前端项目，这些内容提供了很好的起点。