Nuxt3+ElementPlus构建打包部署全过程

更新时间：2023年01月11日 10:11:12 作者：北极象

网上大部分关于Nuxt打包部署教程可谓是可以用五花八门来形容,这对于第一次接触的朋友简直是无从下手,这篇文章主要给大家介绍了关于Nuxt3+ElementPlus构建打包部署的相关资料,需要的朋友可以参考下

为何选Nuxt.js?

在前后端分离出现之前，传统的web页面都是服务端渲染的，如JSP、PHP、Python Django，还有各种模板技术Freemarker, velocity，thymeleaf、mustache等等。其实这套技术都挺成熟的，也用了很多年。

但前后端分离出现后，带来两个好处：

工程上的分工，让前端专门盯前端技术，开发效率上得到提升
通过各种CDN， nodejs技术，前端的性能能持续优化，部署方式更为灵活多变，带来更多的想象空间

vue系的Nuxt.js 和 React系的Next.js谁更胜一筹？目前我还没有答案，貌似后者更成熟一些，但Nuxt也发展迅速。

工程package.json参考

{
  "name": "mall",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "serve": "nuxt dev",
    "preview": "nuxt preview",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@nuxt/content": "^1.0.0",
    "@nuxtjs/pwa": "^3.3.5",
    "core-js": "^3.25.3",
    "element-plus": "^2.2.27",
    "@element-plus/icons-vue": "^2.0.10",
    "vue": "3.2.45",
    "pinia": "^2.0.14",
    "@pinia/nuxt": "^0.4.5"
  },
  "devDependencies": {
    "nuxt": "^3.0.0",
    "nuxt-windicss": "^2.5.5",
    "vite": "^3.2.4",
    "@nuxt/types": "^2.15.8",
    "@nuxt/typescript-build": "^2.1.0",
    "@iconify/vue": "^3.2.1",    
    "@vueuse/nuxt": "^8.4.2",
    "@windicss/plugin-animations": "^1.0.9",
    "sass": "^1.51.0"
  }
}

目录结构

约定成俗的目录结构：

├── app.vue # Nuxt 3 应用程序中的主组件入口组件
├── components # 组件目录，支持自动导入
├── layouts # 布局目录
├── composables # 公共函数，支持自动导入
├── assets # 静态资源目录与vue项目的assets相同
├── middleware # 路由中间件
├── nuxt.config.ts # Nuxt 配置文件，可以理解成vue.config.js 文件名必须是nuxt.config 后缀名可以是.js,.ts或.mjs
├── package.json
├── pages # 基于文件的路由
├── plugins #插件
├── public # 不会参与打包，与vue项目的public类似直接挂在服务器的根目录
├── README.md
├── server
├── tsconfig.json
└── yarn.lock

注意：

composables下如果有嵌套目录，则需要在嵌套目录下放置index.ts，再在里面export相应对象。
components组件嵌套在目录内，可以用驼峰式引入，如引入components/user/avatar.vue，可以用<UserAvatar>
server目录，下面可以有api，middleware, plugin等子目录，api下面每个文件对应一个restful API，好像没法一个文件定义多个API。

页面之间的关系

入口点在app.vue中:

<script setup>
import { ID_INJECTION_KEY } from "element-plus";
provide(ID_INJECTION_KEY, {
  prefix: 100,
  current: 0,
});
</script>
<template>
  <div>
    <NuxtLayout>
      <NuxtLoadingIndicator :height="5" :duration="3000" :throttle="400" />
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

通过<NuxtPage>找到layout下某个layout，可以通过名称指定layout，缺省是layouts/default.vue：

<!--default.vue文件-->
<template>
  <main class="py-2 px-10 text-center">
    <slot />
    <Footer />
    <div class="mt-5 mx-auto text-center opacity-25 text-sm">
      
    </div>
  </main>
</template>

然后，default.vue中的slot会被route里指定的某个page替换，默认的page是pages/index.vue。
在page里就可以调用我们在components目录下存放的各个组件了。

<template>
  <div>
    <Header />
    <PageWrapper>
      hello world
    </PageWrapper>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
const activeIndex = ref('1')
const activeIndex2 = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const value1 = ref();
</script>
<style></style>

上面这个page用到了两个组件：Header和PageWrapper，分别对应components下的Header/index.vue和page/Wrapper.vue文件。

这就是从app.vue->layout->page->component的调用关系。

几个主要命令

nuxt 启动一个热加载的 Web 服务器（开发模式） localhost:3000。
nuxt build 利用 webpack 编译应用，压缩 JS 和 CSS 资源（发布用）。
nuxt start 以生产模式启动一个 Web 服务器 (需要先执行nuxt build)。
nuxt generate 编译应用，并依据路由配置生成对应的 HTML 文件 (用于静态站点的部署)。

主要参数:

–config-file 或 -c: 指定 nuxt.config.js 的文件路径。

–spa 或 -s: 禁用服务器端渲染，使用 SPA 模式

–unix-socket 或 -n: 指定 UNIX Socket 的路径。

动态组件

使用vue中动态组件的写法要使用resolveComponent语法:

<template>
  <div>
    <component :is="isHeader ? TheHeader : 'div'" />
  </div>
</template>
<script setup>
const isHeader = ref(1)
// 组件
const TheHeader = resolveComponent('TheHeader')
</script>

获取后台数据

Nuxt3 再不需要axios这个模块了，直接采用内置的useFetch, useLazyFetch, useAsyncData and useLazyAsyncData几个方法。

await useFetch(() => "/my/post/url", {
        method: 'POST',
        mode: 'cors', // 允许跨域
        body: { some: true },
        initialCache: false,
        onResponse({ request, response, options }) {
    	    // Process the response data	    	 
    	},
    	
    });

也可以这么写:

onMounted(async () => {
    const{ data, pending, error, refresh } = await useFetch(() => 'http://localhost:8888/cms/api/ebook/listall', {mode: 'cors'}, { immediate: true })
    const bookList = JSON.parse(data.value) // 注意data是一个vue的ref对象，需要.value获得其值
    bookList.forEach(book => {
      console.log(book.bookName)
    });
})

SSR

部署 Nuxt.js 服务端渲染的应用不能直接使用 nuxt 命令，而应该先进行编译构建，然后再启动 Nuxt 服务，可通过以下两个命令来完成：

nuxt build
nuxt start

打包方式

nuxt build

会为我们生成 .nuxt文件

部署

三种部署形式:

SSR渲染部署。先nuxt build，再nuxt start
静态部署。先nuxt generate编译成静态文件，会生成dist 文件夹，所有静态化后的资源文件均在其中。然后扔到nginx上
SPA部署。nuxt build --spa, 自动生成dist/文件夹，然后扔到nginx上

参考文档

总结

到此这篇关于Nuxt3+ElementPlus构建打包部署的文章就介绍到这了,更多相关Nuxt3 ElementPlus打包部署内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue2.0 实现移动端图片上传功能
本文主要介绍VUE2.0图片上传功能的实现。原理是通过js控制和input标签的方式完成这一效果，无需加载其他组件。具体实例大家大家参考下本文
2018-05-05
Vue进行数据可视化图表展示的实现示例
数据可视化是现代化的数据分析和展示方式,可以使数据更加直观、易于理解和传达,Vue作为一款流行的前端框架,提供了丰富的插件和工具来实现数据可视化图表展示,本文将介绍如何使用Vue和Echarts/D3.js来实现数据可视化图表展示,并提供示例代码和实际应用场景
2023-10-10
Vue+ECharts实现中国地图的绘制及各省份自动轮播高亮显示
这篇文章主要介绍了Vue+ECharts实现中国地图的绘制以及拖动、缩放和各省份自动轮播高亮显示,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-12-12
vue微信分享插件使用方法详解
这篇文章主要介为大家详细绍了vue微信分享插件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-02-02
Vue.js中轻松解决v-for执行出错的三个方案
v-for标签可以用来遍历数组，将数组的每一个值绑定到相应的视图元素中去，下面这篇文章主要给大家介绍了关于在Vue.js中轻松解决v-for执行出错的三个方案，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
2017-06-06
vue中如何去掉空格的方法实现
这篇文章主要介绍了vue中如何去掉空格的方法实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-11-11
Vuex详细介绍和使用方法
本文详细讲解了Vuex和其使用方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-03-03
vue中的for循环以及自定义指令解读
这篇文章主要介绍了vue中的for循环以及自定义指令，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
详解vue3中如何使用youtube-player
这篇文章主要为大家介绍了详解vue3中如何使用youtube-player示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
详解vue3.0 的 Composition API 的一种使用方法
这篇文章主要介绍了vue3.0 的 Composition API 的一种使用方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-10-10