Vuejs+elementUI框架开发的项目结构及文件关系
项目结构
|----- 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框架开发的项目结构及文件关系的更多相关文章
- Vue实例:vue2.0+ElementUI框架开发pc项目
开发前准备 vue.js2.0中文,项目所使用的js框架 vue-router,vue.js配套路由 vuex,状态管理 Element,UI框架 1,根据官方指引,构建项目框架 安装vue npm ...
- YII框架开发一个项目的通用目录结构
YII框架开发一个项目的通用目录结构: 3 testdrive/ 4 index.php Web 应用入口脚本文件 5 assets/ 包含公开的资源文件 6 css/ 包含 CSS 文件 7 ima ...
- 上门洗车APP --- Androidclient开发 之 项目结构介绍
上门洗车APP --- Androidclient开发 之 项目结构介绍 前言 尽管公司项目较紧,但还是抽空给大家继续更新. o_O"~ 欢迎大家的关注,非常高兴和大家共同学习.前面给大家分 ...
- SSM框架开发web项目系列(二) MyBatis真正的力量
前言 上篇SSM框架环境搭建篇,演示了我们进行web开发必不可少的一些配置和准备工作,如果这方面还有疑问的地方,可以先参考上一篇“SSM框架开发web项目系列(一) 环境搭建篇”.本文主要介绍MyBa ...
- SSM框架开发web项目系列(三) MyBatis之resultMap及关联映射
前言 在上篇MyBatis基础篇中我们独立使用MyBatis构建了一个简单的数据库访问程序,可以实现单表的基本增删改查等操作,通过该实例我们可以初步了解MyBatis操作数据库需要的一些组成部分(配置 ...
- SSM框架开发web项目系列(五) Spring集成MyBatis
前言 在前面的MyBatis部分内容中,我们已经可以独立的基于MyBatis构建一个数据库访问层应用,但是在实际的项目开发中,我们的程序不会这么简单,层次也更加复杂,除了这里说到的持久层,还有业务逻辑 ...
- 二十四、【开源】EFW框架Winform前端开发之项目结构说明和调试方法
回<[开源]EFW框架系列文章索引> EFW框架源代码下载V1.2:http://pan.baidu.com/s/1hcnuA EFW框架实例源代码下载:http://pan ...
- 使用Slua框架开发Unity项目的重要步骤
下载与安装 下载地址 GitHub 安装过程1.下载最新版,这里, 解压缩,将Assets目录里的所有内容复制到你的工程中,对于最终产品,可以删除slua_src,例子,文档等内容,如果是开发阶段则无 ...
- AngularJS+Ionic开发-2.项目结构介绍
使用上篇博客<开发环境搭建>中的命令创建完成IonicHelloWorld项目,在VSCode中的左侧,显示该项目的结构信息,如下图所示: 1 .sourcesmaps文件夹 调试状态的j ...
随机推荐
- vue路由--静态路由
vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的页面应用,是用一些超链接来实现页面切换和跳转的.在vue-router单页面应用中,则是路径之间的切换,也就是 ...
- C#个推SDK推送安卓+iOS
下载个推SDK,找到这两个dll直接引用. using引用 using com.gexin.rp.sdk.dto; using com.igetui.api.openservice; using co ...
- [MySQL]ANALYZE TABLE 更新索引基数
MySQL使用存储的键分布基数来确定表连接顺序在决定对查询中的特定表使用哪些索引时,也会使用使用键分布基数 ANALYZE TABLE 表名 可以更新表的索引基数,使其更接近非重复的记录数,记录数可以 ...
- redis集群redis-cluster搭建
redis集群搭建--参考微信公众号(诗情画意程序员):https://mp.weixin.qq.com/s/s5eJE801TInHgb8bzCapJQ 这是来自redis官网的一段介绍,大概意思就 ...
- webStorm 2019 激活码,phpStorm 2019激活,idea激活,pyCharm激活【永久使用】
[2020-01-16 亲测可用] 无废话版!----直接激活 [麻烦激活后,在评论发表:eg:2020-01-11 09:00 测试可用],有问题直接反馈 我及时修改,建议收藏此博客 都能永久激活, ...
- C#实现的一些常见时间格式
string aa = DateTime.Now.ToShortDateString();//"2019/9/23" string bb = DateTime.Now.ToShor ...
- css 隐藏滚动条
如何使用css隐藏滚动条 如何隐藏滚动条,同时仍然可以在任何元素上滚动? 首先,如果需要隐藏滚动条并在内容溢出时显示滚动条,只需要设置overflow:auto样式即可.想要完全隐藏滚动条只需设置ov ...
- vue中报错Do not use built-in or reserved HTML elements as component id details
原因是定义了一个叫做details的comonent 跟现有的html网页中的标签重合 export default { name: 'details', data () { return { equ ...
- 手动配置IP地址
更改适配器属性 -> 选择一个网络,单击右键 -> 属性 -> Internet 协议版本 4 (TCP/IPv4)-> 属性 进入如下界面,开始配置: IP地址: IP地址用 ...
- Programming on C 学习笔记
目录 include不同的声明方式有什么不同? if defined 与 #ifdef 有什么区别? undef 是怎么工作的? 如何利用 typedef 来定义数组? 枚举中,如果有个元素被赋予值, ...