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

下面是Nuxt3+ElementPlus构建打包部署全过程的完整攻略。

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

环境准备

• Node.js：建议使用 LTS 版本，安装好后需配置 npm 淘宝镜像加速
• IDE：推荐使用 Visual Studio Code，并安装好相关的插件

创建 Nuxt3 项目

执行以下命令，创建一个新的 Nuxt3 项目：

npx nuxt3 create my-nuxt-project

根据提示选择安装依赖时，可以选择使用 yarn 或者 npm 进行安装。

安装 ElementPlus

使用以下命令，安装 ElementPlus 和相关依赖：

npm install element-plus @popperjs/core -S

配置 ElementPlus

在 nuxt.config.js 中添加 element-plus 和样式的引入：

export default {
  // ...
  plugins: [
    // ...
    '@/plugins/element-plus'
  ],
  css: [
    'element-plus/lib/theme-chalk/index.css'
  ]
}

创建 ElementPlus 插件

在 plugins 文件夹下创建 element-plus.js 文件，并编写以下代码：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

export default ({ app }) => {
  app.use(ElementPlus)
}

使用 ElementPlus 组件

在页面中按需引入所需的 ElementPlus 组件：

<template>
  <div>
    <el-button type="primary">Primary</el-button>
  </div>
</template>

构建打包部署

使用以下命令，生成生产环境的代码：

npm run build

构建成功后，使用以下命令，启动应用：

npm run start

部署时，可以把生成的 .nuxt 文件夹和 static 文件夹上传到服务器上即可。

示例说明

使用 ElementPlus 表格组件

在需要使用 ElementPlus 表格组件的页面中，可以像下面这样引入：

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期" width="120"></el-table-column>
      <el-table-column prop="name" label="姓名" width="120"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2021-10-01',
          name: '张三',
          address: '广东省深圳市南山区'
        },
        {
          date: '2021-10-02',
          name: '李四',
          address: '广东省广州市天河区'
        },
        {
          date: '2021-10-03',
          name: '王五',
          address: '广东省珠海市香洲区'
        }
      ]
    }
  }
}
</script>

使用 ElementPlus 弹窗组件

在需要使用 ElementPlus 弹窗组件的页面中，可以像下面这样引入：

<template>
  <div>
    <el-button type="primary" @click="showDialog">打开弹窗</el-button>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      @close="dialogVisible = false"
    >
      <span>这是一段内容</span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false
    }
  },
  methods: {
    showDialog() {
      this.dialogVisible = true
    }
  }
}
</script>

以上是 Nuxt3+ElementPlus 构建打包部署全过程的完整攻略，希望能对你有所帮助。