趁着周末偷了点闲暇，总结一下最近的工作和学习，觉得是时候花点时间把N3-admin做成这个了简单介绍一下基于N3-components的单页应用模板集。首发于个人博客；blog.lxstart.net项目路径：https://github.com/N3-compone...ps：该项目不同于vue-admin等模板项目，引入了大量组件。基础组件的使用请参考：https://n3-components.github....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]]webpack2.x[x]vue[x]组件分类[路由级组件、可复用组件、基础组件（N3）][x]Vue扩展[过滤器、指令等]vue-router[x]二级路由[x]过渡动画[x]路由拦截器vuex[x]多模块支持[x]axios[x]支持多实例[x]请求和响应拦截器[x]Vue扩展，通过实例方法accessible[x]布局layout[x]全局进度条Nprogress[x]csspreprocessing[x]less[x]postcss[]stylus<=只需要安装preprocessor和loader[]sass/scss<=只需要安装preprocessor和loader[x]APIcallsupport[x]interfaceconfiguration[]mock3,布局模式在二级路由下生效4、文件结构├──README.md<=项目介绍├──build<=项目构建相关│├──build.js<=buildscript│├──check-versions.js<=NodeNpm版本检查│├──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<=entry│├──prod.env.js<=生产环境配置│└──test.env.js<=测试环境配置├──index.html<=单页应用入口├──package-lock.json<=NpmPackage版本锁├──package.json<=NpmPackage配置├──src<=项目源码│├──App.vue<=Vue根组件│├──api.js<=api配置│├──assets<=静态资源││├──font│││├──iconfont.eot│││├──iconfont.svg│││├──iconfont.ttf│││└──iconfont.woff│├──图片│││└──logo.png││├──logo.png│││└──样式││└──base.css│├──config.js<=项目配置│├──extend<=Vue扩展相关││├──filters.js<=globalfilter││├──directive.js<=globaldirective││└──index.js<=extensionentry│├──layout<=layoutcomponent││├──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││├──模块│││├──app.js│││└──user.js││└──mutation-types.js│├──style<=stylefile││└──define.less│├──效用<=utils││├──axios.js<=axios││├──const.js<=const││├──index.js││└──storage.js<=storage│└──widgets<=可重用组件│└──视图<=路由级组件│├──Login.vue│├──form││└──index.vue│├──table││└──index.vue│└──test│└──query.vue├──static<=服务器静态资源│└──favicon.ico└──test<=testfolder└──unit├──index.js├──karma.conf。js└──规范└──Hello.spec.js5.使用说明开发环境npmrundev生产环境npmrunbuild6.效果图概览登录TableForm
