用 iBiu 3 秒构建出大型 Vue 项目架子

[bobiscool]

本套工具是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"
          }
        ]
      },
      {
        "name": "恐怖视频",
        "short": "scary",
        "children": [
          {
            "name": "灵异",
            "short": "ghost"
          },
          {
            "name": "血腥",
            "short": "blood"
          }
        ]
      },....
 .....
]

然后自己就屁颠屁颠生成

├── 404.vue
├── index.vue
├── login.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，重点在路由与页面的绑定上，不是样式！！！

[Troevil]

```
location / {
try_files $uri $uri/ /index.html =404;
}
```
你知道我在说什么😅....

[bobiscool]

忘了配 nginx 谢谢楼上

[HowardMei]

这是不是意味着死抱 jQuery 瑟瑟发抖地看前端血雨腥风的 JS 渣终于可以入坑了？

[Kilerd]

vue-cli 已经很好用

[aksoft]

还在 jquery。。。不可替代

[abcbuzhiming]

@HowardMei 阻碍入坑的核心问题是你需不需要支持 IE8，而不是别的什么原因

[kchum]

先 Star 为敬

[viosey]

超赞👍

[Lawlieti]

hhhhh
死抱着 jq+1

[zonghua]

用了这个更加不会写 CSS 了

[djyde]

有意思，我们也在做类似的东西，不过是 React 版本的。

[HowardMei]

@abcbuzhiming 说是这么说，然而前端变化太快，新东西一串串出来，没过几天又被淘汰，对于非前端专业人士来说，简直望而生畏，心智负担重而收效未知，不如 Good old jquery 亲切可靠。

楼主搞个脚手架把 Best practice 固定下来，有助于降低浅度用户的心智负担，无压力地快速入坑。

[flowfire]

iBiu........这个名字用起来好出戏…………

[zohar727]

百度搜了下 iBiu，结果第一条是 blued..........

[bobiscool]

@zonghua 不关 css 的事。。。。

[qdpoboy]

@zohar727 666