vue2项目结构搭建
vue2项目结构初搭建与项目基本流程
一、开始项目结构搭建的重要性
- 决定项目是否能够健康成长
- 决定了项目是否利于多人协作开发
- 决定了项目是否利于后期维护
- 决定了项目是否性能良好
- 决定了代码是否重用率降低
二、项目结构的搭建
围绕以上五点重要性进行项目结构的搭建
如图:

1、搭建出服务于vue2框架的文件
(1)router(路由)搭建,将所有的配置路由放入到router文件夹,并注入vue
(2)store(vuex存储器)搭建,将vuex的存储器独立出一个文件夹统一管理,并注入vue
1)在store中区分各自模块,并将http请求加入到独立的request文件夹
(3)filters(过滤器)搭建,将filters全局注册到入口文件
(4)directives(自定义指令系统)搭建,将directives全局注册到入口文件
2、搭建出服务于page页面的文件
(1)components(组件)搭建,将组件区分模块,利于管理
(2)constants(常量)搭建, 将页面或者组件中出现的常量放入到constants中统一管理
(3)utils(公用方法)搭建,将页面常用的方法分类抽取来放到utils中统一管理
(4)assets(图片文件)搭建,将图片按模块分类放入到assets中统一管理
(5)config(请求配置)搭建,将请求配置文件统一管理
三、主要流程

vue2项目结构搭建的更多相关文章
- NET 项目结构搭建
NET 项目结构搭建 我们头开始,从简单的单项目解决方案,逐步添加业务逻辑的约束,从应用逻辑和领域逻辑两方面考虑,从简单的单个项目逐步搭建一个多项目的解决方案.主要内容:(1)搭建应用逻辑和领域逻辑都 ...
- SpringMVC+Spring+mybatis项目从零开始--分布式项目结构搭建
转载出处: SpringMVC+Spring+mybatis+Redis项目从零开始--分布式项目结构搭建 /** 本文为博主原创文章,如转载请附链接. **/ SSM框架web项目从零开始--分布式 ...
- 使用.NET 6开发TodoList应用(2)——项目结构搭建
为了不影响阅读的体验,我把系列导航放到文章最后了,有需要的小伙伴可以直接通过导航跳转到对应的文章 : P TodoList需求简介 首先明确一下我们即将开发的这个TodoList应用都需要完成什么功能 ...
- vue2.0 仿手机新闻站(二)项目结构搭建 及 路由配置
1.项目结构 $ vue init webpack-simple news $ npm install vuex vue-router axios style-loader css-loader -D ...
- 架构系列:ASP.NET 项目结构搭建
我们头开始,从简单的单项目解决方案,逐步添加业务逻辑的约束,从应用逻辑和领域逻辑两方面考虑,从简单的单个项目逐步搭建一个多项目的解决方案.主要内容:(1)搭建应用逻辑和领域逻辑都简单的单项目 (2)为 ...
- MVC 实用构架实战(一)——项目结构搭建
一.前言 在<上篇>中,已经把项目整体结构规划做了个大概的规划.在本文中,将使用代码的方式来一一解说各个层次.由于要搭建一个基本完整的结构,可能文章会比较长.另外,本系列主要出于实用的目的 ...
- 13: vue项目结构搭建与开发
vue其他篇 01: vue.js安装 02: vue.js常用指令 03: vuejs 事件.模板.过滤器 目录: 1.1 初始化项目 1.2 配置API接口,模拟后台数据 1.3 项目整体结构化开 ...
- vue项目结构搭建
1安装node.js,已集成npm 2.临时使用淘宝镜像 npm --registry https://registry.npm.taobao.org install express 3.instal ...
- 25、Flask实战第25天:项目结构搭建
创建一个虚拟环境bbs,并安装flask框架 #cmd进入DOS窗口 mkvirtualenv bbs pip install flask 在本地磁盘D新建项目目录:bbs 打开pycharm,创建f ...
随机推荐
- Java 8 Optional 类
转自:https://www.runoob.com/java/java8-optional-class.html Optional 类是一个可以为null的容器对象.如果值存在则isPresent() ...
- 用原生js简单模仿angular的依赖注入
大家都知道angular 依赖注入很神奇,跟我们平常写代码的风格思维差别很大,不过仔细分析确是一个很有意思的东西,依赖注入早期也叫依赖倒置,是java中有的.废话不多少直接上例子 本帖属于原创,转载请 ...
- Unexpected error: java.security.InvalidAlgorithmParameterException: the trustAnchors parameter must be non-empty 报错
项目中遇到的获取https的数据接口数据时,Unexpected error: java.security.InvalidAlgorithmParameterException: the trustA ...
- 有哪些api接口可以实现微信自动唤醒浏览器,下载app,打开网页
现在微信渠道可以说是拉新最快的渠道,因为微信具备强裂变性.但是目前微信对第三方下载链接的拦截是越来越严格了,那么想要在微信内肆无忌惮地推广链接就需要用到微信跳转浏览器的接口,那如何获取该接口呢? ...
- python之路:数据类型初识
python开发之路:数据类型初识 数据类型非常重要.不过我这么说吧,他不重要我还讲个屁? 好,既然有人对数据类型不了解,我就讲一讲吧.反正这东西不需要什么python代码. 数据类型我讲的很死板.. ...
- webpack 4.0配置2
上个博客记录了webpack 的基本配置今天主要是css-loader的介绍,包括单独提出css,压缩css.js文件 这里使用的插件npm 地址:https://www.npmjs.com/pack ...
- 工程启动没有报错,但是dubbo后台显示没有提供者,工程没有提供服务
先说一下我遇到的问题:服务工程启动没有异常,消费者工程启动会出现很多nested(嵌套的)错误,但其根本错误是No provider available(缺少服务提供者).可是服务工程起来的时候明明没 ...
- HTTP协议中request和response常用方法
一.request的常用方法:1.获取请求的方式 getMethod()2.目录的路径 getContextPath()3.获取servlet路径 getServletString()4.获得get请 ...
- python 列表去重的几种方法
1 a = [,,,,,,,,,,] a1 = [] for i in a: if i not a1: a1.append(i) else: continue 2 a = [,,,,,,,,,] a1 ...
- leetcode 字谜
242. Valid Anagram Easy 66298FavoriteShare Given two strings s and t , write a function to determine ...