摘要：趁著周末偷來一點(diǎn)閑，總結(jié)近期的工作和學(xué)習(xí)，想著該花點(diǎn)心思把這套基于的單頁應(yīng)用模板簡單的給介紹一下。同時(shí)也是一套可擴(kuò)展的單頁應(yīng)用開發(fā)模板。

趁著周末偷來一點(diǎn)閑，總結(jié)近期的工作和學(xué)習(xí)，想著該花點(diǎn)心思把N3-admin這套基于N3-components的單頁應(yīng)用模板簡單的給介紹一下。

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

首先N3-admin是一個(gè)基于vue / vuex / vue-router / N3 / axios 的單頁應(yīng)用，適用于單頁應(yīng)用的快速上手，并不僅限于N3-components的使用，而是提供一個(gè)比較完善的項(xiàng)目構(gòu)建的思路和結(jié)構(gòu)，提供給初學(xué)者學(xué)習(xí)。同時(shí)也是一套可擴(kuò)展的Vue單頁應(yīng)用開發(fā)模板。

項(xiàng)目工程基于Vue-cli，因此大部分同學(xué)都能快速上手和理解，往下介紹一下特性和結(jié)構(gòu)。

[x] 項(xiàng)目工程相關(guān)

[x] 開發(fā)環(huán)境；靜態(tài)文件服務(wù)器、HTTP代理、熱更新

[x] 生產(chǎn)構(gòu)建：代碼編譯提取壓縮合并混淆hash命名base64~

[x] eslint

[x] babel

[x] webpack 2.x

[x] vue

[x] 組件分級(jí) [路由級(jí)組件、復(fù)用型組件、基礎(chǔ)組件(N3)]

[x] Vue擴(kuò)展 [filters、directives等]

vue-router

[x] 二級(jí)路由

[x] 轉(zhuǎn)場動(dòng)畫

[x] 路由攔截器

vuex

[x] 多模塊(module)支持

[x] axios

[x] 支持多實(shí)例

[x] 請求、響應(yīng)攔截器

[x] Vue 擴(kuò)展，通過實(shí)例的方法可訪問

[x] layout 布局

[x] 全局進(jìn)度條 Nprogress

[x] css 預(yù)處理

[x] less

[x] postcss

[] stylus <= 僅需安裝預(yù)處理器和loader

[] sass / scss <= 僅需安裝預(yù)處理器和loader

[x] API 調(diào)用支持

[x] 接口配置

[] mock

二級(jí)路由下生效

.
├── README.md                           <=  項(xiàng)目介紹
├── build                               <=  工程構(gòu)建相關(guān) 
│?? ├── build.js                        <=  構(gòu)建腳本
│?? ├── check-versions.js               <=  Node Npm版本檢查
│?? ├── dev-client.js                   <=  開發(fā)客戶端：瀏覽器刷新
│?? ├── dev-server.js                   <=  開發(fā)服務(wù)器：靜態(tài)文件服務(wù)器、代理、熱更新
│?? ├── utils.js                        <=  utils
│?? ├── webpack.base.conf.js            <=  webpack基礎(chǔ)配置
│?? ├── webpack.dev.conf.js             <=  webpack開發(fā)配置
│?? └── webpack.prod.conf.js            <=  webpack生產(chǎn)配置
├── config                              <=  工程構(gòu)建配置：開發(fā)服務(wù)器端口、代理，靜態(tài)資源打包位置等
│?? ├── dev.env.js                      <=  開發(fā)環(huán)境配置
│?? ├── index.js                        <=  入口
│?? ├── prod.env.js                     <=  生產(chǎn)環(huán)境配置
│?? └── test.env.js                     <=  測試環(huán)境配置
├── index.html                          <=  單頁應(yīng)用入口
├── package-lock.json                   <=  Npm Package 版本鎖
├── package.json                        <=  Npm Package 配置
├── src                                 <=  項(xiàng)目源代碼
│?? ├── App.vue                         <=  Vue 根組件
│?? ├── api.js                          <=  api 配置
│?? ├── assets                          <=  靜態(tài)資源
│?? │?? ├── font
│?? │?? │?? ├── iconfont.eot
│?? │?? │?? ├── iconfont.svg
│?? │?? │?? ├── iconfont.ttf
│?? │?? │?? └── iconfont.woff
│?? │?? ├── images
│?? │?? │?? └── logo.png
│?? │?? ├── logo.png
│?? │?? └── styles
│?? │??     └── base.css
│?? ├── config.js                       <=  項(xiàng)目配置
│?? ├── extend                          <=  Vue 擴(kuò)展相關(guān)
│?? │?? ├── filters.js                  <=  全局過濾器
│?? │?? ├── directive.js                <=  全局指令
│?? │?? └── index.js                    <=  擴(kuò)展入口
│?? ├── 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                         <=  可復(fù)用組件
│?? └── views                           <=  路由級(jí)別的組件
│??     ├── Login.vue
│??     ├── form
│??     │?? └── index.vue
│??     ├── table
│??     │?? └── index.vue
│??     └── test
│??         └── query.vue
├── static                              <=  服務(wù)器靜態(tài)資源
│?? └── favicon.ico
└── test                                <=  測試文件夾  
    └── unit
        ├── index.js
        ├── karma.conf.js
        └── specs
            └── Hello.spec.js

開發(fā)環(huán)境

npm run dev

生產(chǎn)環(huán)境

npm run build

總覽

登錄

Table

Form