项目结构
|----- 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. 智和网管平台SugarNMS 2019年度IT综合监控突破性成果概览

    一元复始,万象更新,欢辞旧岁,喜迎新年. 智和信通,精益求精,携手并进,迎战鼠年! 2020年1月10日,北京智和信通技术有限公司(以下简称“智和信通”)以“2020携手并进”为主题的年度庆典暨201 ...

  2. 寒假答辩作品——掘地求升C语言版

    寒假答辩—掘地求升(C语言版) 前言 这个是作为寒假答辩作品写的. 之前考虑过用Unity写个游戏,但毕竟不熟悉C#,感觉几乎都是在套模板,而且写着不顺手,有想法却只能 看着C#发呆,很是无奈,所以决 ...

  3. SQLyog12.08详细安装教程

    SQLyog安装教程 一.软件下载 为了更好的学习,我们需要可视化界面,而不仅仅是通过命令行黑窗口管理数据库.SQLyog 就是一个快速而简洁的图形化管理MYSQL数据库的工具. SQLyog12.0 ...

  4. 查询MS SQL的版本号

    可以使用全局变量@@VERSION或者是使用SERVERPROPERTY()函数: 参考: SELECT @@VERSION SELECT SERVERPROPERTY('Edition') Sour ...

  5. LAMP环境搭建+配置虚拟域名

    Centos下PHP,Apache,Mysql 的安装 安装Apache yum -y install httpd systemctl start httpd 添加防火墙 firewall-cmd - ...

  6. 版本管理git

    Git 是目前世界上最先进的分布式版本控制系统. git的主要操作步骤 git.init  初始化,显示成功后去相应的文件夹中查看是不是多了一个git文(版本库)  命令1.    git confi ...

  7. 基于axios的万能封装

    一 . 命名axios.js import axios from 'axios'; export default function ajax(url = '', params = {}, type = ...

  8. 关于将sublime中的代码高亮导出到博客中

    第一步:打开sublime编辑器,用快捷键ctrl+shift+p调出control panel,在出现的输入框中输入install,按回车键 第二步:然后输入插件名称sublimehighlight ...

  9. logback日志的基本使用

    logback的日志使用,有两种方式,可以在application.yml文件中配置,不过最常见的还是用一个单独的xml配置文件进行配置: 一.application.yml配置方式 logging: ...

  10. 又一种获取redis cluster slots分布的小脚本

    需要:昨晚学习了cluster slots命令,之前写的脚本,有可以换种方法获取到redis cluster slots 分布情况. cluster slots的结果如下: 4 5460 5.5.5. ...