摘要：前端开发规范之项目目录架构概述项目开发的目录结构保持一致，容易理解并方便构建与管理，方便日后的维护和其他同事的阅读。
前端开发规范之Vue项目目录架构
概述
Vue项目开发的目录结构保持一致，容易理解并方便构建与管理，方便日后的维护和其他同事的阅读。
一、Vue目录结构
二、主要项目目录介绍
1.build目录是webpack主要的配置目录
其中比较重要是 webpack.base.conf.js
兼容ES6配置
配置地址常量
配置自定义loader
2.config目录是对webpack和node最基础的配置，定义了当前所属环境，监听的端口号，生成静态文件目录位置等
其中比较重要是 index.js
配置node监听端口、静态文件位置，静态文件引用前缀、node代理等
3.js目录是项目开发过程中的自行开发或引用的小型js库
其中比较重要的是 http.js，封装了axios库的常见用法，可以配置统一的request拦截器和response拦截器，其他的有类似日期类库，echarts封装类，vue的mixin库等
4.stylus目录是css预处理语言目录
主要的样式文件
base --- 基础组件样式
mixin --- 混合函数库
reset --- 重置样式库
variable --- 全局变量声明
5.其他components、router、store目录
这三个目录结构是vue项目开发过程中独有的，分别代表vue组件目录，vue-router配置目录、以及vuex配置目录。
具体规范见
vue组件开发规范
vue-router配置规范
vuex配置规范
三、结语
目前开发vue项目的前端目录结构大致与此文大档介绍的架构一致，可能由于不同项目有具体需求会进行微量修改，但大体目录骨架与此一致，若后续进行vue项目开发，需遵循此目录架构，以方便各位同事快速在不同项目间开展工作。
后续若由于技术栈更新会适当调整此文档
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/96054.html
摘要：好的项目代码结构会大大提升项目的维护性和可扩展性。多说无益，我这里直接给大家一个示意图，大家可以按照我给的这个项目结构组织项目。你连文件目录都设计不好，我拿什么相信你能设计出来可扩展的程序 很多人都会用项目脚手架，也会跑hello world，然后再写写简单的todolist。但是再往下深入就难了。比如很多教程和老师都会说，大家要多问一个为什么。其实我想说多问你妹啊。我都不知道问为什么...
摘要：前言想想也已经做过不少架构的项目了，有基于，基于，基于，基于的。好了，介绍完毕，接下来，我就从零开始，一步一步建起前后端完全分离的前端架构了。 前言 想想也已经做过不少架构的项目了，有基于vue，基于react，基于thinkPHP，基于laravel的。 做多了，也就对现有的架构有各种想法，有好的，有坏的，总之，用起来还是不爽。vue-cli虽然可以很快地构建并使用，尤其是vue-c...
摘要：前言这一篇，我们将接着上篇来完成创建项目文件目录架构。总结这篇主要是文件和目录架构的东西，读者务必运行一下完整的项目。因此，下一篇，我们将通过实现本地数据接口模拟从零开始做前端架构项目完整代码前端架构子咻 前言 这一篇，我们将接着上篇来完成创建项目文件、目录架构。 回顾 先回顾一下现在项目有哪些东西了： . ├── app │ ├── app.vue │ ├── common ...
摘要：连接数据库如果不自己创建默认数据库会自动生成地址跟第一步的地址对应。现在回过头来看里面的入口文件最后，我们在浏览器输入，就会跳到。到此为止，我们就完成了整个前后端各自开发到正式部署的流程。 一个完整的网站服务架构包括：1、web frame ---这里应用express框架2、web server ---这里应用nodejs3、Database ---这里应用monggoDB4、...
阅读 1140·2021-11-23 10:04
阅读 2400·2021-11-22 15:29
阅读 2742·2021-11-19 09:40
阅读 714·2021-09-22 15:26
阅读 2116·2019-08-29 16:27
阅读 2483·2019-08-29 16:10
阅读 1917·2019-08-29 15:43
阅读 3274·2019-08-29 12:43
