项目结构
|----- 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. css沉默

    css变色龙实现. ==== css 1 水平居中和垂直居中. 2 css布局方式. 3 你写过UI框架么.

  2. day1 对java的认识

    对java的认识 1.java是一门跨平台的语言,由jvm进行预编译,转换成类似伪代码一样的东西,最后再转换成机器语言. 2.程序是由数据结构和算法构成,其他所有的工具类,方法都是为数据结构或者算法服 ...

  3. js 预编译

    js 运行代码的时候分为几个步骤:语法分析 ==>预编译  ==>解释执行 语法解析:通篇扫描代码,查看语法是否出错 解释执行:读一行 - 解释一行 - 执行一行 预编译执行的操作: // ...

  4. 05.JS函数

    前言: 学习一门编程语言的基本步骤(01)了解背景知识(02)搭建开发环境(03)语法规范(04)常量和变量(05)数据类型(06)数据类型转换(07)运算符(08)逻辑结构(09)函数9.函数——f ...

  5. Python基础之基础知识

    目录 Python基础知识 Python 变量 Python 字符编码 Python 二进制 Python 十六进制 Python bytes Python 注释 Python 用户输入 Python ...

  6. No mapping found for HTTP request with URI [/SLSaleSystem/js/jquery.dataTables.min.js] in DispatcherServlet with name 'spring' 静态资源文件访问不到,无解!!!!!!!

    报错信息:   网上三种修改 web.xml 文件方法尝试未果 尝试未果:<mvc:default-servlet-handler/> 尝试未果:方法2:直接告诉spring,这个你就得这 ...

  7. CentOS7.6安装MySQL8.0(图文详细篇)

    目录 一.安装前准备 二.安装MySQL 三.设置远程登录 四.安装问题解决 五.设置MySQL开机自启 一.安装前准备 1.在官网下载MySQL安装包(注意下载的安装包类型)  2.查看是否安装ma ...

  8. MATLAB应用专题part1-电力电子仿真技术

    士不可以不弘毅,任重而道远.仁以为己任,不亦重乎?死而后已,不亦远乎?  --曾参 C语言系列需要过一段时间才能更新了.这些天学习C语言我感觉有点崩溃了,所以我先开另外一个专题-matlab应用专题. ...

  9. c#学习心得(2)

    1.foreach与IEnumerable和IEnumerator的结合使用????? using System; using System.Collections; class Program { ...

  10. matlab仿真随机数的产生

    概率论和数理统计实验(matlab中实现) 一.伯努利分布 R=binornd(N,P); //N,P为二次分布的俩个参数,返回服从参数为N,P的二项分布的随机数,且N,P,R的形式相同. R=bin ...