一、框架选型
-
前后端分离已成为互联网项目开发的业界标准使用方式,通过nginx+tomcat的方式有效的进行解耦,并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务(多种客户端,例如:浏览器,车载终端,安卓,IOS等等)打下坚实的基础
-
门户网站采用SPA单页面模式会影响网站SEO搜索引擎优化,为了解决SEO采用了SSR服务端渲染 Nuxt.js (@nuxt/express)
-
Nuxt.js 是一个基于 Vue.js 的通用应用框架。通过对客户端/服务端基础架构的抽象组织,Nuxt.js 主要关注的是应用的 UI渲染
二、框架模块
-
框架集成:Nuxt + Vue2 + Ant-Design-Vue + Less + Express + Webpack4 + ES6
-
Nuxt:基于 Vue、Webpack 和 Babel集成了以下组件/框架,Vue 2 、Vue-Router、Vuex、Vue-Meta。另外,Nuxt.js 使用 Webpack 和 vue-loader 、 babel-loader 来处理代码的自动化构建工作(如打包、代码分层、压缩等等)
-
Vue:提供MVVM数据双向绑定的库,专注于UI层面,核心思想:数据驱动、组件系统
-
Ant-Design-Vue:开箱即用的高质量 Vue 组件,支持服务端渲染
-
Less:CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充
-
Express:一个简洁而灵活的 Node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具
-
Webpack4:静态模块的打包工具,将工程中的静态资源根据我们声明的依赖关系,打包出最后的正常运行的输出文件
三、项目依赖
-
@nuxtjs/axios:代理跨域请求
-
postcss-px2rem:自动转换px/rem移动端兼容
-
vue-i18n:静态国际化
-
less-loader:编译.less > .css
四、目录介绍
-
nuxt:Nuxt编译文件目录,自动生成
-
api:express文件目录
-
assets:资源目录assets用于组织未编译的静态资源如LESS、SASS或JavaScript
-
components:组件目录components用于组织应用的Vue.js组件。Nuxt不会扩展增强该目录下 Vue组件,即这些组件不会像页面组件那样有asyncData方法的特性
-
layouts:布局目录layouts用于组织应用的布局组件
-
locales:国际化语言包目录
-
middleware:目录用于存放应用的中间件
-
node_modules:项目依赖目录
-
pages:页面目录pages用于组织应用的路由及视图。Nuxt框架读取该目录下所有的Vue文件并自动生成对应的路由配置
-
plugins:插件目录plugins用于组织那些需要在根Vue应用实例化之前需要运行的Javascript插件
-
static:静态文件目录static用于存放应用的静态文件,此类文件不会被 Nuxt调用 Webpack 进行构建编译处理。 服务器启动的时候,该目录下的文件会映射至应用的根路径/下
-
store:目录用于组织应用的Vuex状态树文件。Nuxt框架集成了Vuex 状态树的相关功能配置
-
Nuxt.config.js:Nuxt配置详情
-
package.json:项目信息及项目依赖管理