脚本宝典收集整理的这篇文章主要介绍了

Vue项目目录架构

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

前端开发规范之Vue项目目录架构
概述
Vue项目开发的目录结构保持一致,容易理解并方便构建与管理,方便日后的维护和其他同事的阅读。
一、Vue目录结构

clipboard.png

二、主要项目目录介绍
1.build目录是webpack主要的配置目录

clipboard.png

其中比较重要是 webpack.base.conf.js
兼容ES6配置

clipboard.png

配置地址常量

clipboard.png

配置自定义loader

clipboard.png

2.config目录是对webpack和node最基础的配置,定义了当前所属环境,监听的端口号,生成静态文件目录位置等

clipboard.png

其中比较重要是 index.js
配置node监听端口、静态文件位置,静态文件引用前缀、node代理等

clipboard.png

3.js目录是项目开发过程中的自行开发或引用的小型js库

clipboard.png

其中比较重要的是 http.js,封装了axios库的常见用法,可以配置统一的request拦截器和response拦截器,其他的有类似日期类库,echarts封装类,vue的mixin库等

4.stylus目录是css预处理语言目录

clipboard.png

主要的样式文件
base --- 基础组件样式
mixin --- 混合函数库
reset --- 重置样式库
variable --- 全局变量声明

5.其他components、router、store目录
这三个目录结构是vue项目开发过程中独有的,分别代表vue组件目录,vue-router配置目录、以及vuex配置目录。
具体规范见
vue组件开发规范
vue-router配置规范
vuex配置规范

三、结语
目前开发vue项目的前端目录结构大致与此文大档介绍的架构一致,可能由于不同项目有具体需求会进行微量修改,但大体目录骨架与此一致,若后续进行vue项目开发,需遵循此目录架构,以方便各位同事快速在不同项目间开展工作。
后续若由于技术栈更新会适当调整此文档

总结

以上是脚本宝典为你收集整理的

Vue项目目录架构

全部内容,希望文章能够帮你解决

Vue项目目录架构

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过