vue使用nuxt实现服务器端渲染_nuxt.js springboot vue服务端渲染

本章介绍目前流行的vue的服务器端渲染,采用第三方框架nuxt中文文档来做vue的服务器端渲染

一、构建一个项目的基本步骤

• 1、创建一个空的目录存放项目

• 2、初始化项目

  npm init --yes
  1

• 3、安装nuxt的依赖包

  npm install --save nuxt
  1

• 4、配置几个启动、打包命令及配置端口

  **package.json**
  ...
  "config": {
  "nuxt": {
    "host": "0.0.0.0",
    "port": "3333"
  }
  },
  "scripts": {
      "dev": "nuxt",
      "build": "nuxt build",
      "start": "nuxt start",
      "generate": "nuxt generate"
  },
  ...
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15

• 5、根据文档构建一个项目全部的目录
  

  • components存放公共组件的
  • css存放公共样式,可以在nuxt.config.js中引入
  • layouts是布局文件
  • middleware是中间件文件
  • mock是自己模拟数据的文件
  • pages自己书写vue组件的文件
  • plugins是使用插件存放的目录
  • static是静态文件,一般存放图片类的
  • store可以使用vuex状态机管理项目状态
  • nuxt.config.js是nuxt的配置文件

• 5、如有需要下载我的代码跑下就好,其实这个很好理解的传送门

二、查看博主更多文章