vue2项目结构初搭建与项目基本流程

一、开始项目结构搭建的重要性

  1. 决定项目是否能够健康成长
  2. 决定了项目是否利于多人协作开发
  3. 决定了项目是否利于后期维护
  4. 决定了项目是否性能良好
  5. 决定了代码是否重用率降低

二、项目结构的搭建

  围绕以上五点重要性进行项目结构的搭建

  如图:

  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项目结构搭建的更多相关文章

  1. NET 项目结构搭建

    NET 项目结构搭建 我们头开始,从简单的单项目解决方案,逐步添加业务逻辑的约束,从应用逻辑和领域逻辑两方面考虑,从简单的单个项目逐步搭建一个多项目的解决方案.主要内容:(1)搭建应用逻辑和领域逻辑都 ...

  2. SpringMVC+Spring+mybatis项目从零开始--分布式项目结构搭建

    转载出处: SpringMVC+Spring+mybatis+Redis项目从零开始--分布式项目结构搭建 /** 本文为博主原创文章,如转载请附链接. **/ SSM框架web项目从零开始--分布式 ...

  3. 使用.NET 6开发TodoList应用(2)——项目结构搭建

    为了不影响阅读的体验,我把系列导航放到文章最后了,有需要的小伙伴可以直接通过导航跳转到对应的文章 : P TodoList需求简介 首先明确一下我们即将开发的这个TodoList应用都需要完成什么功能 ...

  4. vue2.0 仿手机新闻站(二)项目结构搭建 及 路由配置

    1.项目结构 $ vue init webpack-simple news $ npm install vuex vue-router axios style-loader css-loader -D ...

  5. 架构系列:ASP.NET 项目结构搭建

    我们头开始,从简单的单项目解决方案,逐步添加业务逻辑的约束,从应用逻辑和领域逻辑两方面考虑,从简单的单个项目逐步搭建一个多项目的解决方案.主要内容:(1)搭建应用逻辑和领域逻辑都简单的单项目 (2)为 ...

  6. MVC 实用构架实战(一)——项目结构搭建

    一.前言 在<上篇>中,已经把项目整体结构规划做了个大概的规划.在本文中,将使用代码的方式来一一解说各个层次.由于要搭建一个基本完整的结构,可能文章会比较长.另外,本系列主要出于实用的目的 ...

  7. 13: vue项目结构搭建与开发

    vue其他篇 01: vue.js安装 02: vue.js常用指令 03: vuejs 事件.模板.过滤器 目录: 1.1 初始化项目 1.2 配置API接口,模拟后台数据 1.3 项目整体结构化开 ...

  8. vue项目结构搭建

    1安装node.js,已集成npm 2.临时使用淘宝镜像 npm --registry https://registry.npm.taobao.org install express 3.instal ...

  9. 25、Flask实战第25天:项目结构搭建

    创建一个虚拟环境bbs,并安装flask框架 #cmd进入DOS窗口 mkvirtualenv bbs pip install flask 在本地磁盘D新建项目目录:bbs 打开pycharm,创建f ...

随机推荐

  1. HTTP发送RAW请求注意的问题

    1.使用jar httpcomponents-client-4.5.6-bin.tar.gz 解压后倒入lib中的所有包 2.参考代码如下 import org.apache.http.HttpRes ...

  2. python--对象实例化过程

    实例化过程: class luffy_stu: def __init__(self,name,age,sex): self.name = name self.age = age self.sex = ...

  3. leetcode1033

    class Solution: def numMovesStones(self, a: int, b: int, c: int) -> 'List[int]': l = list() l.app ...

  4. PHP SoapClient 调用与鉴权,以及对Java和C# 的webservice的兼容处理

    SoapClient使用注意事项: 第一要加上 cache_wsdl参数,以防服务器调用的是缓存的wsdl文件 然后是参数传递,如果是使用PHP自己写的WebService,参数传递按正常方式即可 1 ...

  5. JDBC数据库连接参数备忘

    database driver url remark MySql com.mysql.jdbc.Driver jdbc:mysql://localhost:3306/xxx mysql-connect ...

  6. Servlet学习记录2

    读取web.xml参数 上篇文章ImageServlet里只设置了JPG,GIF,DOC类型文件的Content-Type.如果这时候需求变化了,需要增加Excel文件格式的Content-Type, ...

  7. jquery通过AJAX从后台获取信息并显示在表格上的类

    前一阵我写了:<jquery通过AJAX从后台获取信息并显示在表格上,并支持行选中.>现在,我把他们处理了一下,不需要每次写代码了: 具体代码如下: //获取数据并显示数据表格 funct ...

  8. [原创] debian 9.3 搭建Jira+Confluence+Bitbucket项目管理工具(三) -- 安装confluence 6.6.1

    [原创] debian 9.3 搭建Jira+Confluence+Bitbucket项目管理工具(三) -- 安装confluence 6.6.1 有了安装Jira的经验, 这次再安装conflue ...

  9. python 二叉树实现带括号的四则运算

    #!/usr/bin/python #* encoding=utf-8 s = "20-5*(0+1)*5^(6-2^2)" c = 0 top = [0,s[c],0] op = ...

  10. pandas,对dataFrame中某一个列的数据进行处理

    背景:dataFrame的数据,想对某一个列做逻辑处理,生成新的列,或覆盖原有列的值   下面例子中的df均为pandas.DataFrame()的数据   1.增加新列,或更改某列的值 df[&qu ...