首發(fā)于個人博客;blog.lxstart.net
項(xiàng)目路徑: https://github.co" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 在線咨詢 在線咨詢
15158846557 在線咨詢
所在位置: 首頁 > 營銷資訊 > 網(wǎng)站運(yùn)營 > 一套Vue的單頁模板:N3-admin

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

時間:2023-06-12 01:15:02 | 來源:網(wǎng)站運(yùn)營

時間:2023-06-12 01:15:02 來源:網(wǎng)站運(yùn)營

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

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

1、概述

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

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

2、特性






















3、布局方式

二級路由下生效






4、文件結(jié)構(gòu)

.├── README.md <= 項(xiàng)目介紹├── build <= 工程構(gòu)建相關(guān) <Vue-cli>│ ├── 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 <= 路由級別的組件│ ├── 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

5、使用說明

npm run devnpm run build

6、效果圖





















關(guān)鍵詞:模板

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果,本站不支持IE9及以下版本的瀏覽器,建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉