15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > 一套Vue的单页模板:N3-admin

一套Vue的单页模板:N3-admin

时间:2023-06-12 01:15:02 | 来源:网站运营

时间:2023-06-12 01:15:02 来源:网站运营

一套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、特性






















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 devnpm run build

6、效果图





















关键词:模板

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭