一套Vue的單頁模板：N3-admin

趁着週末偷來一點閒，總結近期的工做和學習，想着該花點心思把N3-admin這套基於N3-components的單頁應用模板簡單的給介紹一下。

首發於我的博客；blog.lxstart.net
項目路徑: https://github.com/N3-compone...
ps: 本項目不一樣於vue-admin等模板項目介紹大量的組件，基礎組件的用法請參考：https://n3-components.github....

<!-- more -->

一、概述

首先N3-admin是一個基於vue / vuex / vue-router / N3 / axios 的單頁應用，適用於單頁應用的快速上手，並不只限於N3-components的使用，而是提供一個比較完善的項目構建的思路和結構，提供給初學者學習。同時也是一套可擴展的Vue單頁應用開發模板。

項目工程基於Vue-cli，所以大部分同窗都能快速上手和理解，往下介紹一下特性和結構。

二、特性

• [x] 項目工程相關

  • [x] 開發環境；靜態文件服務器、HTTP代理、熱更新

  • [x] 生產構建：代碼編譯提取壓縮合並混淆hash命名base64~

  • [x] eslint

  • [x] babel

  • [x] webpack 2.x

• [x] vue

  • [x] 組件分級 [路由級組件、複用型組件、基礎組件(N3)]

  • [x] Vue擴展 [filters、directives等]

• vue-router

  • [x] 二級路由

  • [x] 轉場動畫

  • [x] 路由攔截器

• vuex

  • [x] 多模塊(module)支持

• [x] axios

  • [x] 支持多實例

  • [x] 請求、響應攔截器

  • [x] Vue 擴展，經過實例的方法可訪問

• [x] layout 佈局

• [x] 全局進度條 Nprogress

• [x] css 預處理

  • [x] less

  • [x] postcss

  • [] stylus <= 僅需安裝預處理器和loader

  • [] sass / scss <= 僅需安裝預處理器和loader

• [x] API 調用支持

  • [x] 接口配置

  • [] mock

三、佈局方式

二級路由下生效

四、文件結構

.
├── README.md                           <=  項目介紹
├── build                               <=  工程構建相關 <Vue-cli>
│   ├── build.js                        <=  構建腳本
│   ├── check-versions.js               <=  Node Npm版本檢查
│   ├── dev-client.js                   <=  開發客戶端：瀏覽器刷新
│   ├── dev-server.js                   <=  開發服務器：靜態文件服務器、代理、熱更新
│   ├── utils.js                        <=  utils
│   ├── webpack.base.conf.js            <=  webpack基礎配置
│   ├── webpack.dev.conf.js             <=  webpack開發配置
│   └── webpack.prod.conf.js            <=  webpack生產配置
├── config                              <=  工程構建配置：開發服務器端口、代理，靜態資源打包位置等
│   ├── dev.env.js                      <=  開發環境配置
│   ├── index.js                        <=  入口
│   ├── prod.env.js                     <=  生產環境配置
│   └── test.env.js                     <=  測試環境配置
├── index.html                          <=  單頁應用入口
├── package-lock.json                   <=  Npm Package 版本鎖
├── package.json                        <=  Npm Package 配置
├── src                                 <=  項目源代碼
│   ├── App.vue                         <=  Vue 根組件
│   ├── api.js                          <=  api 配置
│   ├── assets                          <=  靜態資源
│   │   ├── font
│   │   │   ├── iconfont.eot
│   │   │   ├── iconfont.svg
│   │   │   ├── iconfont.ttf
│   │   │   └── iconfont.woff
│   │   ├── images
│   │   │   └── logo.png
│   │   ├── logo.png
│   │   └── styles
│   │       └── base.css
│   ├── config.js                       <=  項目配置
│   ├── extend                          <=  Vue 擴展相關
│   │   ├── filters.js                  <=  全局過濾器
│   │   ├── directive.js                <=  全局指令
│   │   └── index.js                    <=  擴展入口
│   ├── layout                          <=  佈局組件
│   │   ├── container.vue
│   │   ├── header.vue
│   │   ├── index.vue
│   │   ├── levelbar.vue
│   │   └── navbar.vue
│   ├── main.js                         <=  Vue 入口
│   ├── mock                            <=  Mock
│   ├── router                          <=  路由配置
│   │   ├── index.js
│   │   └── routes.js
│   ├── store                           <=  Vuex
│   │   ├── actions
│   │   │   └── user.js
│   │   ├── index.js
│   │   ├── modules
│   │   │   ├── app.js
│   │   │   └── user.js
│   │   └── mutation-types.js
│   ├── style                           <=  樣式文件 
│   │   └── define.less
│   ├── utils                           <=  utils
│   │   ├── axios.js                    <=  axios
│   │   ├── const.js                    <=  常量
│   │   ├── index.js
│   │   └── storage.js                  <=  storage
│   └── widgets                         <=  可複用組件
│   └── views                           <=  路由級別的組件
│       ├── Login.vue
│       ├── form
│       │   └── index.vue
│       ├── table
│       │   └── index.vue
│       └── test
│           └── query.vue
├── static                              <=  服務器靜態資源
│   └── favicon.ico
└── test                                <=  測試文件夾  
    └── unit
        ├── index.js
        ├── karma.conf.js
        └── specs
            └── Hello.spec.js

五、使用說明

• 開發環境

npm run dev

• 生產環境

npm run build

六、效果圖

• 總覽

• 登陸
  

• Table

• Form