Vue3+Nuxt3+Element Plus 入门实践及打造SSR网站应用 - 文章 - 开发者社区

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

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

创建项目

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请求结构，便于在页面中使用，如下图
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

图片转换网站

结语

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

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