NUXT.JS入门

最新推荐文章于 2023-10-24 11:21:17 发布

勒脖

最新推荐文章于 2023-10-24 11:21:17 发布

阅读量152

点赞数

什么是服务端渲染

概念：后端先调用数据库，获得数据之后，将数据和页面元素进行拼装，组合成完成的html页面，再直接返回给浏览器，以便用户浏览
举例：服务端渲染案例页面

什么是客户端渲染

概念：数据由浏览器通过ajax动态取得，在通过js将数据填充到dom元素上最终展示到网页中，这样的过程叫做客户端渲染
举例：客户端渲染案例页面

服务端渲染 vs 客户端渲染

服务器端渲染需要消耗更多的服务器端资源（ cpu 内存等）
客户端渲染可以将静态资源部署到cdn上，实现高并发
服务器端渲染对SEO更友好

vue服务器端渲染的实现

网址： vue-SSR
安装依赖：
npm install vue vue-server-renderer --save

编写代码

    
// 第 1 步：创建一个 Vue 实例
const Vue = require('vue')
const app = new Vue({
  template: `<div>Hello World</div>`
})

// 第 2 步：创建一个 renderer
const renderer = require('vue-server-renderer').createRenderer()

// 第 3 步：将 Vue 实例渲染为 HTML
renderer.renderToString(app, (err, html) => {
  if (err) throw err
  console.log(html)
  // => <div data-server-rendered="true">Hello World</div>
})

// 在 2.5.0+，如果没有传入回调函数，则会返回 Promise：
renderer
    .renderToString(app)
    .then(html => {
        console.log(html)
    })
   .catch(err => {
        console.error(err)
    })

vue服务端渲染的原理

通过express创建一个静态web服务器
通过vue-server-renderer将vue实例转换成一段html结构
通过express将转换的html结构发送到前台，在前台页面进行展示

vue服务器端渲染的实现

如果使用单文件组件，需要配合webpack来使用
如果想了解服务器端的webpack配置，可以看这个官方提供的工程：服务器端webpack配置网址
下载官网提供的项目包
vs code安装插件来查看项目 @recommended

nuxt

网址： nuxt网址

1. Nuxt的使用

npm v5.2.0引入的一条命令（npx）,引入这个命令的目的是为了提升开发者使用包内提供的命令行工具的体验
举例：使用express-generator创建项目

老方法：

    npm install express-generator -g
    
    express app

npx方式

    npx express app

npx可以减少我们全局安装脚手架

2. nuxt 安装

我们使用脚手架 create-nuxt-app

避免全局安装，我们使用npx

    npx create-nuxt-app app
    
    npm i 
    
    cd app
    
    yarn run dev

3. nuxt-目录结构

4. nuxt-配置 - nuxt.config.js

nuxt-配置：nuxt-配置

举例：配置 scss

    // 1. 在assets 目录中新建css目录，在css目录中新建  main.scss 文件
        main.scss
            body: {
                background: red;
            }
            
    // 2. 命令行安装loader
    
        yarn add node-sass sass-loader scss-loader -D
    
    // 3. 在 nuxt.config.js 文件中引入scss文件
    
  
        css: [
            'element-ui/lib/theme-chalk/index.css',
            {
                src: '@/assets/css/main.scss',
                lang: 'scss'
            }
        ],

    //