摘要:趁著周末偷來一點閑,總結(jié)近期的工作和學習,想著該花點心思把這套基于的單頁應用模板簡單的給介紹一下。同時也是一套可擴展的單頁應用開發(fā)模板。
趁著周末偷來一點閑,總結(jié)近期的工作和學習,想著該花點心思把N3-admin這套基于N3-components的單頁應用模板簡單的給介紹一下。
1、概述首發(fā)于個人博客;blog.lxstart.net
項目路徑: https://github.com/N3-compone...
ps: 本項目不同于vue-admin等模板項目介紹大量的組件,基礎(chǔ)組件的用法請參考:https://n3-components.github....
首先N3-admin是一個基于vue / vuex / vue-router / N3 / axios 的單頁應用,適用于單頁應用的快速上手,并不僅限于N3-components的使用,而是提供一個比較完善的項目構(gòu)建的思路和結(jié)構(gòu),提供給初學者學習。同時也是一套可擴展的Vue單頁應用開發(fā)模板。
項目工程基于Vue-cli,因此大部分同學都能快速上手和理解,往下介紹一下特性和結(jié)構(gòu)。
2、特性
[x] 項目工程相關(guān)
[x] 開發(fā)環(huán)境;靜態(tài)文件服務器、HTTP代理、熱更新
[x] 生產(chǎn)構(gòu)建:代碼編譯提取壓縮合并混淆hash命名base64~
[x] eslint
[x] babel
[x] webpack 2.x
[x] vue
[x] 組件分級 [路由級組件、復用型組件、基礎(chǔ)組件(N3)]
[x] Vue擴展 [filters、directives等]
vue-router
[x] 二級路由
[x] 轉(zhuǎn)場動畫
[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 調(diào)用支持
[x] 接口配置
[] mock
3、布局方式4、文件結(jié)構(gòu)二級路由下生效
. ├── README.md <= 項目介紹 ├── build <= 工程構(gòu)建相關(guān)5、使用說明│?? ├── build.js <= 構(gòu)建腳本 │?? ├── check-versions.js <= Node Npm版本檢查 │?? ├── dev-client.js <= 開發(fā)客戶端:瀏覽器刷新 │?? ├── dev-server.js <= 開發(fā)服務器:靜態(tài)文件服務器、代理、熱更新 │?? ├── 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ā)服務器端口、代理,靜態(tài)資源打包位置等 │?? ├── dev.env.js <= 開發(fā)環(huán)境配置 │?? ├── index.js <= 入口 │?? ├── prod.env.js <= 生產(chǎn)環(huán)境配置 │?? └── test.env.js <= 測試環(huán)境配置 ├── index.html <= 單頁應用入口 ├── package-lock.json <= Npm Package 版本鎖 ├── package.json <= Npm Package 配置 ├── src <= 項目源代碼 │?? ├── 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 <= 項目配置 │?? ├── extend <= Vue 擴展相關(guān) │?? │?? ├── 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 <= 服務器靜態(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 build6、效果圖
總覽
登錄
Table
Form
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/87255.html
摘要:趁著周末偷來一點閑,總結(jié)近期的工作和學習,想著該花點心思把這套基于的單頁應用模板簡單的給介紹一下。同時也是一套可擴展的單頁應用開發(fā)模板。 趁著周末偷來一點閑,總結(jié)近期的工作和學習,想著該花點心思把N3-admin這套基于N3-components的單頁應用模板簡單的給介紹一下。 首發(fā)于個人博客;blog.lxstart.net項目路徑: https://github.com/N3-co...
摘要:趁著周末偷來一點閑,總結(jié)近期的工作和學習,想著該花點心思把這套基于的單頁應用模板簡單的給介紹一下。同時也是一套可擴展的單頁應用開發(fā)模板。 趁著周末偷來一點閑,總結(jié)近期的工作和學習,想著該花點心思把N3-admin這套基于N3-components的單頁應用模板簡單的給介紹一下。 首發(fā)于個人博客;blog.lxstart.net項目路徑: https://github.com/N3-co...
摘要:前端日報精選新特性一覽動畫的種創(chuàng)建方式,每一種都不簡單精讀,和它們在之中的優(yōu)先級變量作用域與提升變量的生命周期詳解讓完成背景圖加載完畢后顯示之解析的原理中文深入理解筆記改進數(shù)組的功能百度外賣前端周刊第期知乎專欄基礎(chǔ)繼承基礎(chǔ)作用域和 2017-08-14 前端日報 精選 ES8 新特性一覽React Web 動畫的 5 種創(chuàng)建方式,每一種都不簡單精讀 React functional s...
摘要:現(xiàn)在是不是有些期待這套全新的后臺管理系統(tǒng)模板呢那現(xiàn)在就去看看的預覽版本是什么樣的吧歡迎大家對踴躍吐槽。同時也歡迎加入碼友網(wǎng)的群更有其他學習資源和干貨下載,歡迎入群。本文出至碼友網(wǎng)一款基于的單頁無刷新無多選項卡的后臺管理系統(tǒng)模板 前言 很高興今天在這里跟大家分享一款全新的后臺管理系統(tǒng)UI模板--TsAdmin. TsAdmin是碼友網(wǎng)自主開發(fā)的一款基于Vue.js+Element UI...
閱讀 1794·2023-04-26 02:14
閱讀 3719·2021-11-23 09:51
閱讀 1381·2021-10-13 09:39
閱讀 3963·2021-09-24 10:36
閱讀 3009·2021-09-22 15:55
閱讀 3511·2019-08-30 12:57
閱讀 2036·2019-08-29 15:30
閱讀 1980·2019-08-29 13:19