项目结构
|----- 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. 【二】、UML基础知识——图图解乾坤

    [二].UML基础知识 UML概述 UML是一个通用的可视化建模语言,不同于编程语言,它通过一些标准的图形符号和文字来对系统进行建模.用于对软件进行描述.可视化处理.构建软件系统的文档.是一套总结了以 ...

  2. StarUML之八、StarUML的Entity-Relationship Diagram(实体关系图)示例

    数据库表关系设计也是常有场景,本章介绍如何设计一个实体关系图 1:新建项目,在Model Explore中Add Diagram | ER Diagram到指定的元素中: 2:从Toolbox中创建E ...

  3. MySQL - SQL语句优化方法

    1.使用 show status 了解各种 SQL 的执行频率 mysql> show status like 'Com%'; 该命令可以查询 sql 命令的执行次数. 2.定位执行效率较低的 ...

  4. nginx基础(一)

    一.nginx的安装.启动.停止及文件解读 yum -y install gcc gcc-c++ autoconf pcre-devel make automake yum -y install wg ...

  5. clr via c# 参数和属性

    1,可选参数和命名参数 当给参数指定默认值时,可以在调用的时候省略 有默认值的参数,必须放在所有没有默认值的参数后面,但是 参数数组必须放在最后面,parm 默认值必须时编译时能确定的常量值,对于值类 ...

  6. JS笔记之第二天

    一元运算符:++  -- 分为前++和后++ and 前--和后-- 如果++在后面,如:num++ +10参与运算,先参与运算,自身再加1 如果++在前面,如:++num+10参与运算,先自身加1, ...

  7. 消息队列(三)Apache ActiveMQ

    在Ubuntu上安装ActiveMQ 系统初始化 $ sudo apt update $ sudo apt dist-upgrade $ sudo apt autoremove $ sudo apt ...

  8. centos tomcat解压版安装

    解压: tar -xzvf apache-tomcat-8.5.23.tar.gz -C /usr/local/java 配置Tomcat的环境变量: export CATALINA_HOME=/us ...

  9. BUUCTF 部分wp

    目录 Buuctf crypto 0x01传感器 提示是曼联,猜测为曼彻斯特密码 wp:https://www.xmsec.cc/manchester-encode/ cipher: 55555555 ...

  10. 【学习笔记】B站-2019-NLP(自然语言处理)之 BERT 课程 -- 相关课程笔记

    BERT 课程笔记 1. 传统方案遇到的问题 BERT的核心在于Transformer,Transformer就类似seq2seq网络输入输出之间的网络结构. 传统的RNN网络:最大的问题,因为不能并 ...