用 iBiu 3 秒構建出大型 Vue 項目架子

本套工具是iview cli 的二次開發,意在解決項目建立時路由與頁面對應的大痛點前端

項目地址

windows 64位版本軟件下載

MAC 軟件下載

linux ,windows 32位版本 大家能夠本身build vue

我從去年11月開始用vue寫項目,算算到如今已經經歷了4-5個項目的歷練了,可是即便每次項目搭建有腳手架的輔助以及本身每次對本身項目架構的優化,總會遇到一件噁心的事,那就是建立頁面,而且將頁面綁定到路由上,並且每次項目頁面結構改變,就得又從新註冊一路由,極其繁瑣,沒有意義。何況在一些頁面層級繁多的產品中這一點更是折磨人。linux

孔子曾經說過懶惰是程序員的第一美德,而我是懶癌晚期,不想浪費時間寫那些重複幾十次的東西,我就想給他個數組git

[
    {
    "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
        ....
        ...
    .....
    ..... //剩餘的再也不贅述複製代碼

還給我註冊好了路由 🕶github

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工具,意在解決開發者不用浪費時間在路由的註冊上。
因而...vue-router

iBiu誕生了

你只須要三步操做macos

而後打開目錄,terminal敲下
npm install
而後
npm run dev
NOW 見證奇蹟的時刻!!!!npm

你會發現你的前端網頁架子已經搭好了,並且你會發現全部頁面的路由已經爲你配置好了(注意看 地址欄)😱,並且,並且還給你貼心的加上了一個login頁面!!!windows

而你如今只須要作的就是在各個頁面裏面填交互代碼就好了!🕶
是否是特別方便快捷!

生成的demo在此

注意 這是個腳手架工具 不是admin template,重點在路由與頁面的綁定上,不是樣式!!!

相關文章
相關標籤/搜索