项目结构
|----- build #webpack编译相关文件目录,一般不用动
|----- config #配置目录
|         |------ dev.env.js #开发环境变量
|    |------ index.js #主配置文件,配置主访问路径端口
|    |------ prod.env.js #生产环境变量
|----- dist #生产环境下build后的文件存放目录(发布目录)
|----- src #前端项目源码目录
|    |------api #封装的接口文件目录
|    |   |------api.js #接口脚本配置,请求后台路径接口配置(ajax请求路径)
|    |   |------websocket.js #前端与服务器建立连接
|    |------assets #资源目录(图片资源等)
|    |------common/js #公共文件目录
|    |------components / views #组件及页面文件目录,调用api.js中的方法
|       |    |------例如login/index.vue #登录模块
|    |    |------Home.vue #主页面模板template
|    |------router #路由目录,配置页面路径、组件名称
|    |    |------index.js #import进主要页面,并一一配置路径
|    |------App.vue #项目入口文件 |
|    |------main.js #项目的核心文件 |这两个文件是关联的
|----- static #开发模式下的静态资源目录
|----- index.html #首页入口文件,你可以添加一些 meta 信息或同统计代码啥的
|----- package.json #项目配置文件,依赖等的版本信息
|----- README.md #项目的说明文档,markdown 格式

以登录模块为例,文件关系如下:
登录页面login/index.vue --> 调用接口脚本api.js的方法确认登录信息,成功后通过路由配置文件router/index.js跳转到后台主页面Home.vue,Home.vue页面可以直

接使用路由配置中的属性($router.options.routes访问路由配置文件的属性)

项目参考github地址:http://blog.csdn.net/wwaenig521314/article/details/74977813

Vuejs+elementUI框架开发的项目结构及文件关系的更多相关文章

  1. Vue实例:vue2.0+ElementUI框架开发pc项目

    开发前准备 vue.js2.0中文,项目所使用的js框架 vue-router,vue.js配套路由 vuex,状态管理 Element,UI框架 1,根据官方指引,构建项目框架 安装vue npm ...

  2. YII框架开发一个项目的通用目录结构

    YII框架开发一个项目的通用目录结构: 3 testdrive/ 4 index.php Web 应用入口脚本文件 5 assets/ 包含公开的资源文件 6 css/ 包含 CSS 文件 7 ima ...

  3. 上门洗车APP --- Androidclient开发 之 项目结构介绍

    上门洗车APP --- Androidclient开发 之 项目结构介绍 前言 尽管公司项目较紧,但还是抽空给大家继续更新. o_O"~ 欢迎大家的关注,非常高兴和大家共同学习.前面给大家分 ...

  4. SSM框架开发web项目系列(二) MyBatis真正的力量

    前言 上篇SSM框架环境搭建篇,演示了我们进行web开发必不可少的一些配置和准备工作,如果这方面还有疑问的地方,可以先参考上一篇“SSM框架开发web项目系列(一) 环境搭建篇”.本文主要介绍MyBa ...

  5. SSM框架开发web项目系列(三) MyBatis之resultMap及关联映射

    前言 在上篇MyBatis基础篇中我们独立使用MyBatis构建了一个简单的数据库访问程序,可以实现单表的基本增删改查等操作,通过该实例我们可以初步了解MyBatis操作数据库需要的一些组成部分(配置 ...

  6. SSM框架开发web项目系列(五) Spring集成MyBatis

    前言 在前面的MyBatis部分内容中,我们已经可以独立的基于MyBatis构建一个数据库访问层应用,但是在实际的项目开发中,我们的程序不会这么简单,层次也更加复杂,除了这里说到的持久层,还有业务逻辑 ...

  7. 二十四、【开源】EFW框架Winform前端开发之项目结构说明和调试方法

    回<[开源]EFW框架系列文章索引>        EFW框架源代码下载V1.2:http://pan.baidu.com/s/1hcnuA EFW框架实例源代码下载:http://pan ...

  8. 使用Slua框架开发Unity项目的重要步骤

    下载与安装 下载地址 GitHub 安装过程1.下载最新版,这里, 解压缩,将Assets目录里的所有内容复制到你的工程中,对于最终产品,可以删除slua_src,例子,文档等内容,如果是开发阶段则无 ...

  9. AngularJS+Ionic开发-2.项目结构介绍

    使用上篇博客<开发环境搭建>中的命令创建完成IonicHelloWorld项目,在VSCode中的左侧,显示该项目的结构信息,如下图所示: 1 .sourcesmaps文件夹 调试状态的j ...

随机推荐

  1. vue element 表头添加斜线

    <template> <div class="app-container"> <el-table :data="tableData3&quo ...

  2. [LeetCode] [链表] 相关题目总结

    刷完了LeetCode链表相关的经典题目,总结一下用到的技巧: 技巧 哑节点--哑节点可以将很多特殊case(比如:NULL或者单节点问题)转化为一般case进行统一处理,这样代码实现更加简洁,优雅 ...

  3. GNU make doc - 函数总结

    $(value variable) 使用variable未展开状态的值 FOO = $(PATH) all: $(warning $(FOO)) $(warning $(value FOO)) #ou ...

  4. Git push时不需要总输入密码

    遇到问题: 最近因为换了自己的邮箱密码后,每次push的时候都需要填写密码,账号.很烦 解决方法: [戎马半生的答案] (http://www.cnblogs.com/zhaoyu1995/p/650 ...

  5. java设计模式1——单例模式

    java设计模式1--单例模式 1.单例模式介绍 1.1.核心作用:保证一个类只有一个实例,并且提供一个访问该实例的全局访问点 1.2.常见场景 1.3.单例模式的优点 1.4.常见的五种单例模式实现 ...

  6. 股票数据获取到了,导入MT4中,是否可以做出很好的量化交易策略呢?

    寻找了很久,看到有tushare这个python的类库,但研究了几个小时都没有研究明白,anaconda安装和pycharm的使用都不是特别顺手,最后也是失败告终.还有就是我的低配的平板suerfac ...

  7. clr via c# 定制特性

    1,特性的应用范围:特性可应用于程序集,模块,类型,字段,方法,方法参数,方法返回值,属性,参数,泛型参数 2,利用前缀告诉编译器表明意图---下面的倾斜是必须的表明了我们的目标元素: [assemb ...

  8. 安装Linux系统时LSI RAID卡的驱动挂载

    转载原文地址:https://www.jianshu.com/p/64415712401e 当使用较新的SAS卡来安装Linux系统时,经常会遇到在系统安装界面读不到RAID的情况,这时就需要考虑Li ...

  9. elementui_day02

    Elementui_day02 1. maven多模块搭建 1.1 搭建多模块的好处 1. 方便维护(代码增加,拆分越细,越好维护) 2. 有些公共的内容(BaseDomain.BaseService ...

  10. maven第一次创建项目太慢解决方法

    问题: 第一次用maven创建项目的时候,因为本地仓库中没有jar包,需要从中央仓库下载,所以会比较慢 解决方法: 因为从中央仓库下载默认使用的国外的镜像下载,速度比较慢,我们可以把镜像修改为从阿里云 ...