Vue项目目录架构

2018-07-12 admin

前端开发规范之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项目开发,需遵循此目录架构,以方便各位同事快速在不同项目间开展工作。 后续若由于技术栈更新会适当调整此文档

原文链接:https://segmentfault.com/a/1190000015612346

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-35814.html

文章标题:Vue项目目录架构

相关文章
vue-awesome-swiper的使用以及API整理
一、先说一个看关于vue-awesome-swiper的一个坑 vue项目的package.json中显示的<span style=“color: orange;”>“vue-awesome-swiper”: “^2.5.4”&...
2018-04-26
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
按照正常的产品逻辑,我们在进行页面切换时滚动条应该是在页面顶部的,可是。。。在使用vue-router进行页面切换时,发现滚动条所处的位置被自动记录了下来,且在另一个组件内定义的滚动监听事件仍会运行,着实吃了一大惊。。。 说说我的破解方法:...
2017-03-13
Vue 短信验证码组件开发详解
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此...
2017-03-17
Vue.js 2.0中select级联下拉框实例
在网上搜索了Vuejs2.0 动态级联select许久未果,决定自己总结一下自己的经验,有关select在Vue.js 2.0版本中的应用。首先我先说一下的我使用的技术,我参考了网上成熟的经验,选择以Vue.js 2.0+Vue-route...
2017-03-14
Vue.js原理分析之observer模块详解
介绍 observer是Vue核心中最重要的一个模块(个人认为),能够实现视图与数据的响应式更新,底层全凭observer的支持。 **注意:**本文是针对Vue@2.1.8进行分析 observer模块在Vue项目中的代码位置是src/c...
2017-03-16
详解vue-validator(vue验证器)
官方文档:http://vuejs.github.io/vue-validator/zh-cn/index.html github项目地址:https://github.com/vuejs/vue-validator 单独使用vue-val...
2017-03-07
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
如果我有几个页面都需要有分页效果,不可能每个页面都去复制一下这段代码吧,意思是封装一下,变成通用的组件。 首先使用基础 Vue 构造器,创建一个“子类”,Vue.extend( options ) var barHtml = '&...
2017-03-15
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
发现问题 在 vue2 中对表单控件有着良好的双向数据绑定机制,但是对于要特定实现某些功能的输入时,我们就不得不使用到 contenteditable=“true” 的 div ,而在这个 div 上是使用 v-model 是没有效果的。那...
2017-03-20
详解Vue2 无限级分类(添加,删除,修改)
本人对vue不是很懂,搜索了很多关于Vue2 无限级分类介绍,下面我来记录一下,有需要了解Vue2 无限级分类的朋友可参考。希望此文章对各位有所帮助。 <!DOCTYPE html> <html lang="en...
2017-03-13
优化RequireJS项目的相关技巧总结
本文将演示如何合并与压缩一个基于RequireJS的项目。本文中将用到苦干个工具,这其中就包括Node.js。 因此,如果你手头上还没有Node.js可以点击此处下载一个。 动机 关于RequireJS已经有很多文章介绍过了。这个工具可以将...
2017-03-27
回到顶部