Nuxt.js

nuxt.js简单来说是Vue.js的通用框架，最常用的就是SSR（服务端渲染），nuxt.js这个框架，用Vue开发多页面应用，并在服务端完成渲染，可以直接用命令把我们制作的vue项目生成为静态的html。

那么首先要知道什么是客户端渲染与服务端渲染

什么是服务端渲染？

后端先调用数据库，获得数据之后，将数据何页面元素进行拼接，组合成完整的html页面，在直接返回给浏览器，以用户浏览。

什么是客户端渲染？

数据由浏览器通过ajax动态取得，再通过js将数据填充到demo元素上最终展示到网页中，这样的过程叫客户端渲染。

服务端渲染与客户端渲染那个更优秀？

服务端渲染需要消耗更多的服务端资源（cpu,内存）

客户端渲染可以将静态资源部署到cdn上，实现高并发。

服务端渲染对seo更友好。

 

Nuxt.js是特点（优点）：

• 基于Vue
• 自动代码分层
• 服务端渲染
• 强大的路由功能，支持异步数据
• 静态文件服务
• EcmaScript6和EcmaScript7的语法支持
• 打包和压缩JavaScript和Css
• HTML头部标签管理
• 本地开发支持热加载
• 集成ESLint
• 支持各种样式预编译器SASS、LESS等等
• 支持HTTP/2推送

 

Nuxt.js的适用情况？

nuxt.js适合做博客，电影，咨询，新闻这样的需要收索引擎提供流量的项目，如果要做移动端的项目那么大可没必要只用这个框架了。

 

Vue是如何实现服务端渲染的？

 

1）安装依赖：

 

用npm来安装vue-cli这个框架。npm install vue-cli -g

安装完成后可以使用vue -V 来测试是否安装成功。（注意：这里要使用大写的V，小写无效）

 

2）使用vue安装 nuxt

安装好vue-cli后，就可以使用init命令来初始化Nuxt.js项目。

vue init nuxt/starter

这时候他会在github上下载模版，然后会询问你项目的名称叫什么，作者什么的，这些完全可以根据自己的爱好填写。

3）使用npm install安装依赖包

npm install

这个过程是要等一会的，如果你这个过程安装失败，可以直接诶删除项目中的node_modules文件夹后，重新npm install进行安装。

4）使用npm run dev 启动服务

直到点开目录，看到以下目录结构的介绍。

└─my-nuxt-demo
  ├─.nuxt               // Nuxt自动生成，临时的用于编辑的文件，build
  ├─assets              // 用于组织未编译的静态资源如LESS、SASS或JavaScript,对于不需要通过 Webpack 处理的静态资源文件，可以放置在 static 目录中
  ├─components          // 用于自己编写的Vue组件，比如日历组件、分页组件
  ├─layouts             // 布局目录，用于组织应用的布局组件，不可更改⭐
  ├─middleware          // 用于存放中间件
  ├─node_modules
  ├─pages               // 用于组织应用的路由及视图,Nuxt.js根据该目录结构自动生成对应的路由配置，文件名不可更改⭐
  ├─plugins             // 用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。
  ├─static              // 用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。 服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。文件夹名不可更改。⭐
  └─store               // 用于组织应用的Vuex 状态管理。文件夹名不可更改。⭐
  ├─.editorconfig       // 开发工具格式配置
  ├─.eslintrc.js        // ESLint的配置文件，用于检查代码格式
  ├─.gitignore          // 配置git忽略文件
  ├─nuxt.config.js      // 用于组织Nuxt.js 应用的个性化配置，以便覆盖默认配置。文件名不可更改。⭐
  ├─package-lock.json   // npm自动生成，用于帮助package的统一设置的，yarn也有相同的操作
  ├─package.json        // npm 包管理配置文件
  ├─README.md

nuxt的常用配置文件以及配置项

const pkg = require('./package')
module.exports = {
  mode: 'universal',    //  当前渲染使用模式
  head: {       //  页面head配置信息
    title: pkg.name,        //  title
    meta: [         //  meat
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: pkg.description }
    ],
    link: [     //  favicon，若引用css不会进行打包处理
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  loading: { color: '#fff' },   //  页面进度条
  css: [    //  全局css（会进行webpack打包处理）
    'element-ui/lib/theme-chalk/index.css'  
  ],
  plugins: [        //  插件
    '@/plugins/element-ui'
  ],
  modules: [        //  模块
    '@nuxtjs/axios',
  ],
  axios: {},
  build: {      //  打包
    transpile: [/^element-ui/],
    extend(config, ctx) {       //  webpack自定义配置
    }
  }
}

nuxt的运行命令

{
  "scripts": {
    //  开发环境
    "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
    //  打包
    "build": "nuxt build",
    //  在服务端运行
    "start": "cross-env NODE_ENV=production node server/index.js",
    //  生成静态页面
    "generate": "nuxt generate"
  }
}

具体以及详细的介绍可以去一个不知名的大神那里去学习，附上大神的地址https://juejin.im/post/5cc81e1a6fb9a032414f695b