跟着杨村长学nuxt3,每天收获一点点(3)

卡卡军
2,653 阅读2分钟

继上一篇跟着杨村长学nuxt3,每天收获一点点(2)

知识点

  1. UI组件库安装
  2. 打包部署爬坑

我的环境

这边由于Nuxt3刚出来,问题还很多,比如node14的版本在nuxt.config.ts 中配置buildModules时就会宕机,但在node16中可以, 所以有必要记录一下环境配置

node 版本 16.13.0

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

UI组件库安装

这边尝试了两个组件库的安装和使用, 一个是我比较喜欢的devui, 另一个就是公司用到的element-plus,首先在跟目录在创建plugins文件夹.

devUI使用

在plugins文件夹中建devui.ts文件,然后粘贴下面代码, Nuxt3就会全局自动导入plugins文件夹中所有注册的组件,支持在任何文件中进行使用(我这边还在公共自定义组件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)
})

在pages中的uitest.vue(这里pages中任何vue文件中都行)

<template>
  <div class="">
    <d-button>按钮</d-button>
  </div>
</template>

element-plus

在plugins文件夹中建element.ts文件(名字随便取,不重名就行了)

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

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

在pages中的uitest.vue(这里pages中任何vue文件中都行)

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

两个的效果图如下

image.png

打包部署爬坑

这边打包部署暂时还没有成功,一开始实验的是gh-pages, 主要只能部署在根目录下, 但是实际我git仓库已经有了一个其他目录的页面, 不可能让nuxt直接部署在根目录下的, 所以需要建在取名为nuxt3-test的目录下, 那么和vite的配置一样,我们需要配置base, nuxt3请求基于路由, 所以在nuxt.config中配置了(这个是参考的Nuxt2配置的,3的官方文档并没有讲这个东西) router: { base: process.env.NUXT_ROUTER_BASE || '/' }, 环境NUXT_ROUTER_BASE是在打包gh-pages配置时注入的,

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

这样子配置后请求sw.js位置是正确的, 但又出了新问题, 后面的请求出现了404, 在gh-pages中打包的_nuxt也带了nuxt3-test, 那么肯定是因为这个缘故所以index.mjs后续的请求报了404,所以至此可以大概分析nuxt3配置router还是存在bug的(或许压根就不是这么配置的), 如果有知道的小伙伴还请给我留言,告诉我

image.png

image.png

贴一下本文的 git源码地址

avatar
文章
阅读
粉丝