Vue3+Nuxt3+Element Plus 入门实践及打造SSR网站应用

社区征文前端

由于公司产品需要进行SEO推广优化,所以就选择了Nuxt作为网站前端框架,之前所有的项目基本都是单页面应用,对于服务端渲染也是一知半解,项目整个开发的过程也是一边学习一边实践,如有不正确的地方,欢迎指正👏👏

关于nuxt版本,当时搭建产品初始化时,nuxt3稳定版本刚刚发布(V3.0.0),并且考虑到vue3已经相当成熟,就果断的选择了3.0.0版本,目前情况来看,nuxt的更新频率是相当的快,截至目前版本已经更新到了V3.6.2。

创建项目

打开nuxt官网链接

picture.image 在控制台中运行下方命令,就会创建一个最小Nuxt应用

npx nuxi@latest init my-app

运行yarn dev以开发模式启动nuxt,默认地址http://localhost:3000 (这是nuxt默认组件<NuxtWelcome />)

picture.image 至此,一个最小化的Nuxt应用就创建好了

重构项目结构

现在要对项目的结构做一些调整

├── app             重写路由
├── assets          
│   ├── images
│   └── scss
├── components      公共组件
├── composables     放置自动导入方法
├── config          配置文件
├── layouts         布局组件
├── pages           页面
├── public    
├── server
│   ├── api         书写服务端API
│   └── middleware  服务端中间件
├── types           typescript 声明
└── utils           公共方法及工具方法

app.vue中的<NuxtWelcome />组件替换为<NuxtPage />组件,以显示pages/目录中的顶级或嵌套页面。

<template>
  <div>
    <NuxtPage></NuxtPage>
  </div>
</template>

页面布局

新建layouts/文件夹,可以创建多个布局框架,默认使用default.vue

在具体的页面中,如果需要使用其他布局的话,需要使用<NuxtLayout />组件,同时在layouts/文件夹下需要新建.vue布局文件,<Nuxtlayout />组件的name属性值就是文件名。

  • layouts/home.vue
<template>
  <main>
    <header></header>
    <section 
      class="layout-section home-layout" 
    >
      <slot></slot>
    </section>
    <footer></footer>
  </main>
</template>
  • pages/home.vue
<template>
  <NuxtLayout name="home">
  ...
  </NuxtLayout>
</template>

路由

因为需要页面路径地址最后默认后缀.html,当时就没有使用nuxt默认的路由规则,而是在app/router.options.ts中,重新导出了路由规则。

import type { RouterConfig } from '@nuxt/schema';
export default <RouterConfig> {
    routes: () => [
        ...
    ]
}

nuxt.config.ts文件配置

  • runtimeConfig 可以放置公共API接口地址,各种key等
  • css 公共的css导入
  • modules 使用modules的方式引入element-plus
    modules: [
      '@element-plus/nuxt',
    ]
    
  • elementPlus 还可针对elementPlus做一些其他配置,文档地址
    elementPlus: {
      importStyle: 'scss',
    }
    
  • app
    • head 设置页面<head></head>
  • vite vite的一些配置(下文会讲到)
  • nitro nitro的一些配置,我的项目中有用到redis,就是在nitro中设置,还有devProxy也需要在nitro中配置。

封装公共方法及组件

  • components/中,封装页面公共组件。

  • composables/中,书写自动导入方法(例如:网络请求fetch方法封装)

    export const $defaultFetch = async (url: string, params?: IRequestParams) => {
       const runtimeConfig = useRuntimeConfig();
       return $fetch(url, {
         baseURL: runtimeConfig.baseUrl,
         ...params
       })
     }
    
  • server/api,为了将后端 API接口统一管理,重写了API请求结构,便于在页面中使用,如下图

    picture.image

  • types 定义typescript接口类型等

  • utils 公共方法(节流、防抖、数字计算精度、正则等等...)

其余优化

刚开始上线之后,网站的打开速度是稍微有点慢的,不过gzip都是初始化时就配置了的,每个页面逐一的排查,修改了一些逻辑代码及删除不必要执行的语句,只能起到微乎其微的作用。

接下来就是压缩图片,速度稍微快了一点点,因为应用中图片本来也不是很多,其实有时候后端API的响应速度也应该注意一下

在网上查找了许多优化加载速度的,都没有很好的一个解决方案,各位看官如果有好的方法,可以分享分享🚀🚀

使用gzip

nuxt.config.ts

import { visualizer } from 'rollup-plugin-visualizer'
import viteCompression from 'vite-plugin-compression'
export default defineNuxtConfig({
    vite: {
        plugins: [
          visualizer({
            open: true,
            gzipSize: true
          }),
          viteCompression({
            verbose: true, // 默认即可
            disable: false, //开启压缩(不禁用),默认即可
            deleteOriginFile: false, //删除源文件
            threshold: 10240, //压缩前最小文件大小
            algorithm: 'gzip', //压缩算法
            ext: '.gz', //文件类型
          }),
        ],
    }
})

图片转webp

图片转换网站

结语

可能还是会有很多点没有涉及到,也算是做一个记录吧。

技术永无止境,永远保持一颗学习的心态,去充实自己,完善自己。

0
0
0
0
关于作者
相关产品
评论
未登录
看完啦,登录分享一下感受吧~
暂无评论