用 iBiu 3 秒构建出大型 Vue 项目架子
本套工具是iview cli 的二次开发,意在解决项目创建时路由与页面对应的大痛点
项目地址
windows 64位版本软件下载
MAC 软件下载
linux ,windows 32位版本 你们可以自己build
我从去年11月开始用vue写项目,算算到现在已经经历了4-5个项目的历练了,但是即使每次项目搭建有脚手架的辅助以及自己每次对自己项目架构的优化,总会遇到一件恶心的事,那就是创建页面,并且将页面绑定到路由上,而且每次项目页面结构改变,就得又重新注册一路由,极其繁琐,没有意义。况且在一些页面层级繁多的产品中这一点更是折磨人。
孔子曾经说过懒惰是程序员的第一美德
,而我是懒癌晚期,不想浪费时间写那些重复几十次的东西,我就想给他个数组
[{"name": "视频","short": "video","children": [{"name": "搞笑视频","short": "funny","children": [{"name": "恶搞","short": "sproof"},{"name": "无厘头","short": "wulitou"}]},}...,..., // 假比这里有很多。。。]复制代码
然后自己就屁颠屁颠生成
├── 404.vue
└── video├── funny│ ├── index.vue│ ├── sproof│ │ └── index.vue│ └── wulitou│ └── index.vue├── index.vue├── scary│ ├── blood│ │ └── index.vue│ ├── ghost│ │ └── index.vue│ └── index.vue├── sports│ ├── index.vue│ ├── skating│ │ └── index.vue│ └── surfing│ └── index.vue└── travel├── history│ └── index.vue├── index.vue└── scenery└── index.vue................. //剩余的不再赘述复制代码
还给我注册好了路由 ?
import Vue from 'vue';
import Router from 'vue-router';
import contend from 'views/index.vue'
import login from 'views/login.vue'
import notF from 'views/404.vue'import video from './video.js';
import posts from './posts.js';
import games from './games.js';
import music from './music.js';Vue.use(Router);export default new Router({mode: 'history',routes: [{path: '/',name: 'home',redirect: '/video',component: contend,children: [video, // 这里面全是每个主要页面的子页面路由posts,games,music,]},{path: '/login',name: 'login',component: login},{path: '*',name: '404',component: notF}]
})复制代码
这才是我心中更好的脚手架工具,说干就干,于是自己操刀写了一个 cli工具,意在解决开发者不用浪费时间在路由的注册上。
于是...
iBiu诞生了
你只需要三步操作
然后打开目录,terminal敲下
npm install
然后
npm run dev
NOW 见证奇迹的时刻!!!!
你会发现你的前端网页架子已经搭好了,而且你会发现所有页面的路由已经为你配置好了(注意看 地址栏)?,而且,而且还给你贴心的加上了一个login页面!!!
而你现在只需要做的就是在各个页面里面填交互代码就行了!?
是不是特别方便快捷!
生成的demo在此
注意 这是个脚手架工具 不是admin template,重点在路由与页面的绑定上,不是样式!!!
转载于:https://juejin.im/post/5970c678f265da6c317ddbcd
用 iBiu 3 秒构建出大型 Vue 项目架子相关推荐
- vue编译速度过慢?大型vue 项目使用dll插件优化编译速度,效果显著
为什么要优化编译速度 vue项目过大,引用的组件过多,当启动项目打包项目或者修改代码的时候会发现编译速度太慢,浪费时间,甚至每改一行代码都可能需要编译三十秒以上,所以必须要优化,这样是在浪费生命 如何 ...
- 中大型Vue项目的前端架构-1
目录 前言 项目目录 Api后端接口 公共Helper sevice 网络请求封装(axios封装) utils工具类 main.js webpack入口文件 使用方法 前言 接触Vue已经有几年了, ...
- jenkins docker 自动部署 构建_jenkins+docker+vue项目的自动部署环境
亮点 采用shell自定义脚本,控制集成部署环境更加方便灵活 如果服务器更换,重新部署的工作量会比较小 准备工作 首先我们得有一台服务器.我这里用的是阿里云ECS,华东节点.具体的购买操作的话百度会有 ...
- js 返回上一页面_构建大型 Vue.js 项目的10条建议
下面是我在开发大型 Vue 项目时的最佳实践.这些技巧将帮助你开发更高效.更易于维护和共享的代码. 今年做自由职业的时候,我有机会开发了一些大型 Vue 应用程序.我所说的这些项目,Vuex stor ...
- Vue学习之环境构建--------vue-cli构建vue项目
周围的朋友一直都在说vue的优点,之前一直在看angular,抱着好奇心学习了vue,想从最基础的地方记录我的vue.首先第一步离不开环境的搭建,那么就来记录我的vue环境搭建之路. 同作为前端的流行 ...
- Vue项目设置局域网访问方法
本人Vue脚手架版本为@vue/cli 5.0.4 创建出的Vue项目工程格式如图 方法为修改config 文件夹下的index.js文件 将host默认的localhost修改即可.
- Vue项目构建开发入门
Vue项目构建开发入门 开篇:Vue CLI 3 项目构建基础 大家好,当你点进这个标题,开始阅读本章的时候,说明你对 Vue.js 是充满好奇心和求知欲的.我之前写过一篇文章,这样评价 Vue.js ...
- vuex构建vue项目_如何使用Vue.js,Vuex,Vuetify和Firebase构建单页应用程序
vuex构建vue项目 如何使用Vuetify和Vue路由器安装Vue并构建SPA (How to install Vue and build an SPA using Vuetify and Vue ...
- 智慧门户、信创门户、国产门户、数字化门户,如何构建出七大特色亮点?
作者:郑文平 概述 调研结果显示,世界500强企业100%建设了适合自己的集团门户管 ...
最新文章
- 机器学习入门(07)— MNIST 数据集手写数字的识别
- docker容器学习笔记
- docker install
- 设计模式-单件模式(Singleton pattern)
- Thymeleaf3语法详解
- IntelliJ IDEA 连接数据库 详细过程
- 读取设置config.ini配置
- Hyperledger下子项目
- 中国互联网Web2.0 100名单
- 制作banner思路
- Spring5框架day01之IOC容器
- VLOOKUP函数的多条件引用
- 【教学类-23-01】20221217《不会写学号的中班幼儿的学号描字贴》(中班描字)
- java spider爬虫_Java网络爬虫实操(2)
- 基于RabbitMq的削峰实例
- 流浪地球的终点正是三体人要逃离的地方
- 清北学堂2019NOIP提高储备营DAY1
- ngixn负载+keepalived高可用shell脚本
- CSDN【精品专栏】第24期
- 【运筹学】线性规划数学模型 ( 线性规划求解 | 根据非基变量的解得到基变量解 | 基解 | 基可行解 | 可行基 )
热门文章
- 软工视频(33~36)-用户界面设计
- WordPress WP cleanfix插件‘eval()’函数跨站请求伪造漏洞
- Inno Setup使用技巧
- JNI 之 HelloWorld
- 利用反射动态实例化类执行方法并传值
- Moodle中的角色与权限控制
- AndroidStudio_从Eclipse到AndroidStudio开发工具_两者使用的区别_通过向导新建项目和引入module---Android原生开发工作笔记68
- 持续集成部署Jenkins工作笔记0015---编辑SVN钩子程序
- 超高并发优化技能001--隔离
- 沙盒机制和应用程序目录