Vue之自建管理后台(二)Vue端设计
我们先设计Vue的文件夹分布。
在此之前,我们先了解下初始化创建的Vue的文件夹
https://www.cnblogs.com/luoxuemei/p/9812151.html
(我引用了这哥们写的blog,这里他写的很清楚也标记的很清楚,给力...)
接下来我们要添加的是自己需要的文件夹。
也就是在src文件夹下面的内容
默认的src下面
|-src
|-assets 图片文件
|-logo.png 官方logo
|-components 组件文件
|-HelloWord.vue 测试页面
|-router 路由设置
|-index.js 默认的路由文件
|-app.vue 项目入口
|-main.js 项目核心文件
修改后的src文件夹
|-src
|-api 这里是存放api方法的文件
一般来说会有加一个request.js文件,调用接口文件,暂时不加,后续我们会有更多的处理文件
|-assets 图片文件
|-logo.png 官方logo
|-components 组件文件
|-HelloWord.vue 测试页面
暂时不加,我们后续会开发组件的时候加入
|-config 存放配置文件夹
|-index.js 配置文件
比如我们这里可以设置baseUrl,来区分dev和pro的api地址
是否启用i18n等
|-libs 前端使用的所有function的存放
|-axios.js 数据调取方法
|-utils.js 全局方法
|-router 路由设置
|-index.js 默认的路由文件
|-locale 语言包
|-lang 语言包文件,地下会有zh_CN,en等
|-index.js 调用语言的function
|-store 调用libs方法等文件
|-user.js 用户function文件
|-page.js 页面function文件
|-view 页面文件
这文件夹下才是我们存放各个module的地方,主要开发还是在这里面
|-login 登陆文件夹
|-mock 模拟数据
|-app.vue 项目入口
|-main.js 项目核心文件
到这里基本我们确定了整个项目中,各个功能,及我们所需要开发的时候该处理哪些文件夹。。。该把代码写在哪里。。。
这样代码的分布逻辑就比较清晰了。。。
下一章我们开始设计 路由(router文件夹)
Vue之自建管理后台(二)Vue端设计的更多相关文章
- Vue之自建管理后台(一)准备工作
完成最基础的Vue环境及新建一个vue项目. 一般来说,我们拿到一个项目需求或者得到一个需求的时候,第一件应该做的事情不是立马坐在电脑前面去写代码,如果你这么做的,好吧...我只能暂时认定你为一个刚上 ...
- Vue之自建管理后台(三)登录页面
在做登录页面之前,我们必须得完成路由的设定... 按照之前的设计我们路由的文件夹是src/router 官方默认的index.js,如下: import Vue from 'vue' import R ...
- Vue/Egg大型项目开发(二)数据库设计
项目Github地址:前端(https://github.com/14glwu/stuer)后端(https://github.com/14glwu/stuer-server) 项目线上预览:http ...
- 《暗黑世界GM管理后台系统》部署+功能说明文档
http://www.9miao.com/product-10-1073.html <暗黑世界GM管理后台系统>部署+功能说明文档 <暗黑世界GM管理后台系统>部署+功能说明文 ...
- 《暗黑世界GM管理后台系统》部署+功能说明
原地址:http://blog.csdn.net/uxqclm/article/details/11969761 欢迎来到9秒:www.9miao.com 暗黑三国管理后台说明文档 (一)功能描述该后 ...
- Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二)
Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二) 前言 上篇文章对Vue.js有了初步理解,接下来我们把Vue.js基础语法快速的过一遍,先混个脸熟留个印象就 ...
- vue_shop(基于vue电商管理后台网站)
vue_shop 目录 vue_shop day01 实现登录功能 项目预开发处理 Login.vue完整代码: 处理步骤: 添加element-ui的表单组件 添加第三方字体: 添加表单验证 导入a ...
- 感谢 Vue.js 拯救我这个前端渣渣,让 PowerJob 有了管理后台界面
本文适合有 Java 基础知识的人群 作者:HelloGitHub-Salieri HelloGitHub 推出的<讲解开源项目>系列. 对于大部分非前端程序员来说,写网页无疑是一件非常痛 ...
- 管理后台Vue
管理后台 遇到的问题 搭建 基于vue 3.0 Vue CLI 4.x Ant Design Vue 2.0 搭建后台管理系统 Ant Design Vue 2.0 npm i --save ant- ...
随机推荐
- LLppdd never give up!
LLppdd never give up! Time Limit: 1 s Memory Limit: 256 MB 题目背景 LLppdd是个被毒害的小朋友,他的初中生涯充满了坎坷. 直到初三的某一 ...
- 使用Hbuilder 报错The keyword 'export' is reserved
右击文件 > 验证本文档语法(V)后报错 解决: 项目右键->”属性”->”语法&框架”界面中配置项目的javaScript版本,将ECMAScript5.1 修改为6.
- Grafana的安装配置 和 使用nginx反向代理grafana
grafana安装和配置 grafana安装非常简单:(https://grafana.com/grafana/download) 对于有apt的服务器: # apt install -y softw ...
- 初撩Django-RESTful-rest_framework序列化(将模型序列化为JSON)
官方网站: https://www.django-rest-framework.org/ 翻译网站:https://q1mi.github.io/Django-REST-framework-docum ...
- 基于Docker构建Jenkins CI平台
1.部署gitlab 1.1 部署gitlab docker run -d \ --name gitlab \ -p 8443:443 \ -p 9999:80 \ -p 9998:22 \ -v $ ...
- Robot Framework:环境安装
Windows Python2.7 前置条件:安装python2.7,下载地址:https://www.p ...
- PHP FILTER_SANITIZE_EMAIL 过滤器
定义和用法 FILTER_SANITIZE_EMAIL 过滤器删除字符串中所有非法的 e-mail 字符. 该过滤器允许所有的字母.数字以及 $-_.+!*'{}|^~[]`#%/?@&= N ...
- Shell5
sed文本编辑器(vim,notepad)非交互式的文本编辑器sed是逐行处理编辑器 sed [选项] ‘条件指令' 文件 #没有条件指令时,默认对全文所有进行修改sed的所有操作默认时在 ...
- 向量vector 容器浅析
一.什么是vector? 向量(Vector)是一个封装了动态大小数组的顺序容器(Sequence Container).跟任意其它类型容器一样,它能够存放各种类型的对象.可以简单的认为,向量是一个能 ...
- 安装nodejs nvm
安装nodejs sudo apt-get install nodejs sudo apt-get install npm 安装nvm https://www.runoob.com/w3cnote/n ...