760
一套Vue的單頁模板：N3-admin
趁著周末偷來一點閑，總結近期的工作和學習，想著該花點心思把N3-admin這套基於N3-components的單頁應用模板簡單的給介紹一下。
首發於個人博客；blog.lxstart.net
項目路徑: https://github.com/N3-components/N3-admin
ps: 本項目不同於vue-admin等模板項目介紹大量的組件，基礎組件的用法請參考：https://n3-components.github.io/N3-components/
1、概述
首先N3-admin是一個基於vue / vuex / vue-router / N3 / axios 的單頁應用，適用於單頁應用的快速上手，並不僅限於N3-components的使用，而是提供一個**比較完善的項目構建的思路和結構**，提供給初學者學習。同事也是一套可擴展的Vue單頁應用開發模板。
項目工程基於Vue-cli，因此大部分同學都能快速上手和理解，往下介紹一下特性和結構。
2、特性
- [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
3、布局方式
二級路由下生效
4、文件結構
.
├── 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
5、使用說明
- 開發環境
npm run dev
- 生產環境
npm run build
6、效果圖
- 總覽
登錄
Table
- Form
最後更新：2017-08-13 22:19:45