摘要：趁著周末偷來一點閑，總結近期的工作和學習，想著該花點心思把這套基于的單頁應用模板簡單的給介紹一下。同時也是一套可擴展的單頁應用開發模板。

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

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

首先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                               <=  工程構建相關 
│?? ├── 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