nuxtjs+express+vue2+vuex搭建的服务端渲染（SSR）我的网站项目

5se7en.com

nuxtjs+express+vue2.0+vuex搭建的服务端渲染我的网站项目.

github项目地址: https://github.com/se7en-1992...
项目线上地址：https://5se7en.com/

注意事项

• node>=v8.0.0+ (nuxt1.0.0以上版本的node版本号必须大于v8.0.0不然启动的时候会报错)
  
• 若要测试游戏登陆请点击前往套马游戏注册一个帐号

技术选型

这里先说两句题外话，谈一谈对前端开发产生了深远影响的两个时间点

• ajax的出现，促成了Web 2.0时代的来临
• nodejs的出现，让前端能作的更多，让js不只仅只是浏览器端的语言。

这里为何要说这个呢，有些前端开发者会说node不是作后端的吗？我为何要学nodejs呢？其实随着前端的发展，尤为是node出现，前端发展突飞猛进，各类自动化工具，框架层出不穷。不少都是依赖node。node不只仅只是用来拿来写后端，能够这么说，当前时间若是你对node毫无知晓，也不去学的话，那么你已经被前端浪潮所覆盖了。

• 本项目用的是node中使用最多的express前端web框架，官网的demo是这么形容的=> ExpressJS + Nuxt.js = ⚡️ 没错能够说是很是极速了，个人我的网站服务器是阿里云1核1g学生版机，网站除了第一次打开稍微慢点，后面能够说得上是光速了。比我之前使用的任何框架都要极速。

• 下面再谈一下为何要使用服务端渲染和选用nuxtjs？

  • 知乎上有个论题你们能够看一看为何如今又流行服务端渲染html？，回答的人比较多，也比较杂，我这里就简单的总结一下

    • 服务端渲染，主要解决两个痛点 SEO优化(一些新闻资讯类的网站都须要作一些搜索引擎优化)和大型应用的首屏渲染(解决一些大型应用首页加载速度问题)
    • 其实这又要谈到历史了，一开始html就是后端渲染的，前端实际上就是在切图（CSS）和作特效(JS)，因此全部程序员中前端工资最低，职位也最低。因此先后端的鄙视链就出现了。
    • nodejs 和前端 mvc 的兴起让前端变得复杂起来，前端发现翻身的机会，因而全力支持这两种技术，形成本不应作成 spa 的网站也成了 spa。慢慢地先后端分离运动从大公司开始兴起，目的就是前端脱离后端的指指点点，独立发展。（表面上是为了「代码分离」，其实是为了「人员分离」，也就是「先后端分家」，前端再也不附属于后端团队）
    • spa 以后发现 seo 问题很大，并且首屏渲染速度贼慢，可是本身选的路再难走也要走下去，因而用 nodejs 在服务端渲染这一条路被当作是一条出路
    • 简而言之就是前端一开始骚不起来，后来node和MVC/MVVM（Vue,React,Angular）的出现前端开始骚起来了，搞独立，把本应要作成服务端渲染的东西也作成了SPA，如今新技术又出来了，要及时发现错误，进行改正。先后端分离是趋势，既然都分开了，总不能还让后端去渲染，那我们前端本身想办法作服务端渲染吧，因而服务端渲染框架也就出现了。

  • 为何选用nuxtjs?

    • 一开始我用的服务端渲染是学习N-blog利用nodejs的express+ejs模版渲染作的，效果其实也还不错，里面的代码并无彻底的组件化，我作的项目还使用的jQuery,这多low啊，那我怎么能忍，我确定要换个技术来玩。（这里没有贬低jQuery的意思，我以为jQuery是个很不错的JavaScript库，曾经也能够说是一统前端了，包括如今，不会用jQuery的前端基本上没几个，可是怎么说呢，jQuery在慢慢沉寂，操做dom在如今对比下来并非一个最优的选择了。）前端在不断发展，咱们要作的就是选择最优。
    • 在vue官网中也对nuxtjs作了强力的推荐，再加上nuxtjs的github上express模版demo介绍ExpressJS + Nuxt.js =⚡看到这个我就选了这个框架了。没错就是他了.
    • nuxtjs结合vue二、Webpack、vue-loader、babel-loader、vuex、Vue-Meta
    • 不须要在配置繁琐的webpack配置,vue-loader自动生成路由，只须要在pages目录下建立文件就是自动生成对应的路由文件

开发环境

• Node.js: ^8.9.4
• express: ^4.16.2
• nuxtjs: ^1.0.0-rc11
• vue: ^2.5.3

npm install
npm run dev

使用浏览器打开 http://localhost:5757

友情提示

• N-blog(一个不错的Nodejs + Express + MongoDB入门项目)
• vue2.0官网文档
• nuxtjs官方文档
• vue2-elm(一个不错的vue2.0我的项目)
• nuxtjs.org

nuxt介绍

• nuxt详细的入门教程这里不作详细的介绍，官方文档讲解的已经很是详细了。这里简单介绍一下项目目录做用

nuxt目录介绍

• assets

  • 若是你的静态资源文件须要 Webpack 作构建编译处理，能够放到 assets 目录，不然能够放到 static 目录中去。
  • Nuxt 服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下，像 robots.txt 或 sitemap.xml 这种类型的文件就很适合放到 static 目录中。

• components

  • 组件目录 components 用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展加强该目录下 Vue.js 组件，即这些组件不会像页面组件那样有 asyncData 方法的特性。

简而言之此目录就是普通的vue组件目录。

• layouts

  • 该目录名为Nuxt.js保留的，不可更改。
  • 你能够自定义合适本身网站的默认样式和错误样式

• middleware

  • 中间件执行流程顺序：

    • nuxt.config.js
    • 匹配布局
    • 匹配页面

• pages

  • 该目录名为Nuxt.js保留的，不可更改。
  • 页面目录 pages 用于组织应用的路由及视图。Nuxt.js 框架读取该目录下全部的 .vue 文件并自动生成对应的路由配置。
  • 此页面的.vue文件都具备asyncData、fech方法。

• plugins

  • 插件目录 plugins 用于组织那些须要在 根vue.js应用 实例化以前须要运行的 Javascript 插件。
  • 咱们能够将element-ui或者mint-ui以及其余更多的插件均可以放在plugins中使用

• static

  • 该目录名为Nuxt.js保留的，不可更改。
  • 静态文件目录 static 用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。 服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。

• store

  • 该目录名为Nuxt.js保留的，不可更改。
  • store 目录用于组织应用的 Vuex 状态树 文件。 Nuxt.js 框架集成了 Vuex 状态树 的相关功能配置，在 store 目录下建立一个 index.js 文件可激活这些配置。

nuxt配置介绍

• config

  • 此目录并非nuxt自身目录而是一些项目经验促使我添加此目录历来更加方便的去管理和使用在项目中所须要的变量。
  • NEWRELIC_KEY:newrelic的密钥，newrelic是服务器端性能监控的一款软件
  • TIMBER_KEY:timber的密钥，timber是一种云日志记录系统，简单的来讲就是纪录线上的一些日志
  • SENTRY_PROJECT_ID/SENTRY_PUBLIC_KEY/SENTRY_PRIVATE_KEY:Sentry的项目id,公钥,私钥，Sentry是一个开源的实时错误报告工具
  • porductionProxy/developmentProxy: 是nuxt的axios模块代理请求的路径设置
  • 其实我在项目启动的时候还使用了pm2有express项目经验的人用过都说好，有日志记录状态监控等，真的很好用。
• nuxt.config.js

• .editorconfig

  • EditorConfig是一套用于统一代码格式的解决方案

• .eslintrc.js

  • ESLint是一个应用普遍的 JavaScript 代码检查工具

• gitignore

  • git提交忽略项配置文件

• newrelic.js

  • newrelic配置文件

• start.js

  • express启动入口文件，开发环境直接使用nuxt启动并无走start.js，生产环境用pm2启动的该文件