在上一章中,我们开始通过 Vue CLI 去搭建属于自己的前端 Vue 项目模板,就像我们 .NET 程序员在使用 asp.net core 时一样,我们更多的会在框架基础上按照自己的开发习惯进行调整。因此在后面几章的学习中,我将会在整个项目基础上,按照自己的需求进行修改设定。
PS:因为毕竟自己还是传统意义上的后端开发,所以这里最终搭建完成的前端项目模板,其实是按照 PanJiaChen 开源的 vue-admin-template 模板进行修改仿写,所以你可以把这个系列后续的文章当成是对于 vue-admin-template 模板的使用资料补充。
系列目录地址:https://www.cnblogs.com/danvic712/p/9549100.html
仓储地址:https://github.com/Lanesra712/ingos-web
二、干货合集在调整项目模板前,我们首先还是先来了解下我们通过 Vue CLI 3 所搭建的这个基于 Element UI 的项目模板,整个模板的文件结构及相关解释说明如下所示。
|-- ingos.web |-- node_modules // 项目所引用的前端组件包 |-- public // 项目发布后打包后的目录地址 |-- favicon.ico |-- index.html |-- src // 项目源文件路径 |-- assets // 静态存放路径 |-- logo.png |-- components // 项目中定义的组件存放路径 |-- HelloWorld.vue |-- plugins // 项目中引用到的第三方 Vue CLI 插件所在路径 |-- element.js |-- views // 项目中视图所在路径 |-- About.vue |-- Home.vue |-- App.vue // 项目的主组件,项目中的页面都是在此进行路由切换 |-- main.js // 主入口文件,初始化 Vue 实例并使用加载项目中需要使用的插件 |-- router.js // 项目中所有的路由定义 |-- store.js |-- tests // 单元测试文件路径 |-- units // 存放单元测试用例 |-- .eslintrc.js |-- example.spec.js |-- .browserslistrc // 指定项目的目标浏览器的范围 |-- .editorconfig // 针对不同的编辑器和 IDE 之间对于代码风格的设定 |-- .eslintrc.js // eslint 的配置文件 |-- .gitignore // git 忽略添加的文件 |-- babel.config.js // Babel 规则配置文件 |-- package-lock.json // 记录安装包的具体版本号 |-- package.json // 项目加载的组件包 |-- postcss.config.js // 针对 postcss 的配置 |-- README.md // 项目 readme 文件