Covers the function

  • Serverless Deplores the NUXT service
  • Nuxt project
    • PWA (Progressive Web Applications) aims to use existing Web technologies to provide a better user experience.
    • Nuxt Color Mode Switching Automatically switches the web page color mode based on the system color mode
    • SSR server rendering, better SEO

Serverless Deplores the NUXT service

Log in to Tencent Cloud background, find Serverless Application Center, create a new application, select NUxT template after successful creation, download the code in the function management console or directly develop the function code (it is recommended to download to local development); Tencent Cloud will automatically generate serverless. Yml in the NuxT template; You can configure it according to your needs. SECRET_ID and SECRET_KEY are also stored in env

Install Serverless globally after the local code is developed

npm install -g serverless
Copy the code

In the root directory of the serverless. Yml file, run the following command to pop up the TWO-DIMENSIONAL code and scan the code to authorize deployment

serverless deploy
Copy the code

This is all about the publishing process of Serverless. Of course, you can configure your own domain name in the serverless background. The disadvantage of Serverless is the cold start speed, the first time to visit the cold start time is longer, of course, this is related to the characteristics of Serverless, like Tencent cloud and Ali cloud Serverless will provide free resource usage and volume, deployment of a small blog is still possible.

Progressive Web applications

  1. Install @ nuxtjs/pwa
  2. Configuration pwa; Pwa requires static/icon. PNG by default. If the file location or name is changed, for example, static/icon2.png, you need to configure icon.

The @nuxtjs/ pWA plugin will automatically generate [64, 120, 144, 152, 192, 384, 512] images from static/icon.png and will automatically generate the corresponding ICONS configuration at Mainfest. Manifest is a technical solution that enables sites to create ICONS on the home screen and customize PWA’s splash screen ICONS and colors

/ / nuxt. Config. Js configuration
export default {
  / /... head
  buildModules: ["@nuxtjs/pwa"].pwa: {
    icon: {
      source: "/icon.png".// The path is icon.png in static
      fileName: 'icon.png'
    },
    
    manifest: {
      name: "I am a name.".short_name: "I am a name.".lang: "zh-CN".theme_color: "#fff".description:
        "I am describing."
    },
    // Workbox: {// Development environment uncomment, debug PWA, comment while packaging
    // dev: true
    // }}},Copy the code

The resulting JSON for Mainfest is as follows

{
  "name": "I am a name."."short_name": "I'm an acronym."."description": "Describe..."."start_url": "/"."display": "standalone"."orientation": "any"."background_color": "#ffffff"."theme_color": "#8a00f9"."icons": [{"src": "images/icons/icon_32.png"."sizes": "32x32"."type": "image/png"
    },
    {
      "src": "images/icons/icon_72.png"."sizes": "72x72"."type": "image/png"
    },
    {
      "src": "images/icons/icon_128.png"."sizes": "128x128"."type": "image/png"
    },
    {
      "src": "images/icons/icon_144.png"."sizes": "144x144"."type": "image/png"
    },
    {
      "src": "images/icons/icon_192.png"."sizes": "192x192"."type": "image/png"
    },
    {
      "src": "images/icons/icon_256.png"."sizes": "256x256"."type": "image/png"
    },
    {
      "src": "images/icons/icon_512.png"."sizes": "512x512"."type": "image/png"}}]Copy the code

Mainfest. Json properties

  • Name – The full name of the page displayed to the user;
  • Short_name – this is used when there is not enough space to display the full name of the Web application;
  • Description – a detailed description of a website;
  • Start_url – the initial relative URL of a web page such as /)
  • Display – the preferred display mode for an application;
    • Fullscreen – fullscreen display;
    • Standalone – The application will look like a standalone application;
    • Minimal – UI – App will look like a standalone app, but will have browser address bar;
    • Browser – This application opens in a traditional browser TAB or in a new window.
  • Orientation – Preferred display orientation for applications;
  • Background_color – The background color of the startup screen;
  • Theme_color – The theme color of a website;
  • ICONS – an array of image objects defining SRC, Sizes and Type, which are used as application ICONS in various environments;

@nuxtjs/pwa will automatically add manifest.json links to the generated HTML; Will bring the hash

<! -- @nuxtjs/ PWA will automatically add the following link tag to the generated HTML page -->
<link rel="manifest" href="/manifest.json" />
Copy the code

Nuxt color mode toggle

  1. Install @ nuxtjs/color – mode
  2. configuration
/ / nuxt. Config. Js configuration
export default {
  buildModules: ['@nuxtjs/color-mode'],}Copy the code

Next is the CSS | less | sass style of development, in nuxt. Config. Js, CSS module is introduced into the corresponding CSS | less | sass files

/* Initialize the color variable */
:root{-color: # 243746;
  --color-primary: # 158876;
  --color-secondary: #0e2233;
  --bg: #f3f5f4;
  --bg-secondary: #fff;
  --border-color: #ddd;
}
/* Dark variable */
.dark-mode{-color: #ebf4f1;
  --color-primary: #41b38a;
  --color-secondary: #fdf9f3;
  --bg: #091a28;
  --bg-secondary: # 071521;
  --border-color: #0d2538;
}
/* Sepia eye color variable */
.sepia-mode{-color: # 433422;
  --color-secondary: # 504231;
  --bg: #f1e7d0;
  --bg-secondary: #eae0c9;
  --border-color: #ded0bf;
}
Copy the code
// My own color variable is maintained in main.less
export default {
  css: ['@/assets/style/main.less'],}Copy the code

Next is the module style or global background color, mainly according to the defined color variables; For example,

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans'.'Helvetica Neue', sans-serif;
  background-color: var(--bg);
  color: var(--color);
  transition: background-color .3s;
}
a {
  color: var(--color-primary);
}
Copy the code

Preference is used to control the colorMode, colormode. preference is used to control the colorMode, colormode. preference is used to control the colorMode, colormode. preference is used to control the colorMode, ColorMode is a global variable registered by @nuxtjs/color-mode and can be accessed from any component

The core is to use the HTML class to control global variables to achieve color mode switching

It injects the $colorMode helper as follows:

  • Preference: The actual color mode is selected (can be ‘system’) and updated to change the user’s preferred color mode
  • Value: helps to know when which colorMode $colorMode === ‘system’ was detected, so you should not update it
  • Unknown: It is useful to know if a placeholder needs to be rendered during SSR or generation
  • Forced: Helps to know if the current color mode is forced on the current page (used to hide the color picker)
<template> <div> <h1>Color mode: {{ $colorMode.value }}</h1> <select v-model="$colorMode.preference"> <option value="system">System</option> <option value="light">Light</option> <option value="dark">Dark</option> <option value="sepia">Sepia</option> </select> </div> </template> <style> body { background-color: #fff; Color: rgba (0,0,0,0.8); } .dark-mode body { background-color: #091a28; color: #ebf4f1; } .sepia-mode body { background-color: #f1e7d0; color: #433422; } </style>Copy the code

Nuxt project address github.

Experience address blog.