项目结构
|----- 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. mac下搭建http服务器(apache+php),使用homebrew升级php

    新版mac依旧预装了 Apache ,但是已经不能在 「系统偏好设置」中的「Web 共享」来开启了,需要手动通过命令行开启. 启动Apache 启动:sudo apachectl start 停止:s ...

  2. 2000_narrowband to wideband conversion of speech using GMM based transformation

    论文地址:基于GMM的语音窄带到宽带转换 博客作者:凌逆战 博客地址:https://www.cnblogs.com/LXP-Never/p/12151027.html 摘要 在不改变现有通信网络的情 ...

  3. MySql基础补漏笔记

    在MySQL教程|菜鸟教程系统复习的时候有一些知识点还没掌握透的或者思维方式还没完全跟上的地方,写了一个笔记,讲道理此笔记对除我之外的任何读者不具有任何实用价值,只针对我在复习MySQL基础过程中的查 ...

  4. 前端项目引入Echarts中的dataTool的正确方式

    使用echarts画箱线图时调用echarts.dataTool.prepareBoxplotData() 报错:"echarts.dataTool.prepareBoxplotData i ...

  5. springboot 后台框架平台 mybatis 集成代码生成器 shiro 权限 websocket

    1.代码生成器: [正反双向](单表.主表.明细表.树形表,快速开发利器)freemaker模版技术 ,0个代码不用写,生成完整的一个模块,带页面.建表sql脚本.处理类.service等完整模块2. ...

  6. HUE下载HDFS文件时报ERR_CONNECTION_TIMED_OUT错误的解决办法

    1.故障描述 这是运行在公有云上的一套Hadoop集群,有一个公网IP将部分服务的端口映射出来供办公室访问. 数据分析师报告说:在HUE上面浏览HDFS文件,点击"download" ...

  7. Windows Server 2012 R2的安装(GUI桌面版本)

    镜像:cn_windows_server_2012_r2_x64_dvd_2707961.iso 1.将安装光盘插入服务器,开机会读取到Windows安装程序,点击下一步 2.点击现在安装     3 ...

  8. cf1294E

    题意简述:给一个矩阵,有两种操作可以进行 操作1:改变矩阵中一个元素的值 操作2:将矩阵中某一列的值循环下移 要求用最少的操作次数使得矩阵变成 题解:对于一列来说,我们肯定是先变化然后再循环下移,所以 ...

  9. 初学Python,需要装什么软件?

    学习Python需要安装什么软件呢?也许你是一位编程小白,还不知道如何如何安装Python软件和开发环境.那么今天我们就来学一下关于Python软件.开发环境的相关知识,希望对你有用. 学Python ...

  10. vue 父子通信

    节制地使用 $parent 和 $children - 它们的主要目的是作为访问组件的应急方法.更推荐用 props 和 events 实现父子组件通信