Learn NuxT3 from Village Head Yang and gain a Little every day (2)

knowledge

  1. UI component library installation
  2. Pack and deploy to climb pits

My environment

For example, node14 will crash when buildModules are configured in nuxt.config.ts, but node16 will, so it’s worth documenting the environment configuration

The node version 16.13.0

 "element-plus": 5 "" ^ 1.2.0 - beta.."nuxt3": "27307420.6 a25d3e 3.0.0 -"."vue-devui": "9 1.0.0 - beta.".Copy the code

UI component library installation

Here, I tried to install and use two component libraries, one is Devui, which I like better, and the other is Element-Plus, which is used by the company. First, I created the plugins folder along with the directory.

DevUI use

Nuxt3 automatically imports all registered components in the plugins folder and can be used in any file (I also use it in the public custom component theheader.vue).

import { defineNuxtPlugin } from "#app"
import { Button } from 'vue-devui';
import 'vue-devui/button/style.css'
export default defineNuxtPlugin((nuxtApp) = > {
 nuxtApp.vueApp.use(Button)
})
Copy the code

Uitest. Vue in Pages (here any Vue file in Pages will work)

<template>
  <div class="">
    <d-button>button</d-button>
  </div>
</template>
Copy the code

element-plus

Create the element.ts file in your plugins folder (name it whatever you want, but don’t use the same name)

import * as ElementPlus from 'element-plus/lib';
import 'element-plus/dist/index.css';

export default defineNuxtPlugin((nuxtApp) = > {
  nuxtApp.vueApp.use(ElementPlus, {
    size: 'small'}); });Copy the code

Uitest. Vue in Pages (here any Vue file in Pages will work)

<template>
  <div class="">
    <el-button type="success" plain>Success</el-button>
  </div>
</template>
Copy the code

The renderings of both are shown below

Pack and deploy to climb pits

At the beginning, I tested gh-Pages, which can only be deployed in the root directory. However, in fact, MY git repository already has a page in another directory, so it is impossible for nuxT to be directly deployed in the root directory, so I need to build it under the directory named nuxt3-test. Router: {base: {base: {base: {base: {base: {base: {base: {base: {base: {base: {base: {base: {base: {base: {base: {base: {base: {base: {base: {base: {base: {base: {base: Process. The env. NUXT_ROUTER_BASE | | ‘/’}, environmental NUXT_ROUTER_BASE is injected in packaging gh – pages configuration,

   - name: Build
        run: npm run build
        env:
          NITRO_PRESET: browser
          NUXT_ROUTER_BASE: /nuxt3-test/
Copy the code

_nuxt in gh-pages also contains nuxt3-test. The nuxT3 router is not configured in this way. If the router is not configured in this way, please leave a message to me

Post the git source address of this article