Vue.js入门系列（三十一）：Element-UI的基本使用与按需引入、Vue 3简介及使用 Vue CLI 与 Vite 创建工程

Vue.js入门系列（三十一）：Element-UI的基本使用与按需引入、Vue 3简介及使用 Vue CLI 与 Vite 创建工程

引言

在 Vue.js 应用中，Element-UI 是一个非常流行的 UI 组件库，它提供了丰富的组件，帮助我们快速构建美观且功能丰富的用户界面。随着 Vue.js 的不断发展，Vue 3 也带来了许多新特性和改进。在本文中，我们将探讨 Element-UI 的基本使用与按需引入，以及 Vue 3 的简介，并展示如何使用 Vue CLI 和 Vite 创建 Vue 3 工程。

一、Element-UI 基本使用

1.1 什么是 Element-UI？

Element-UI 是由饿了么团队开发的一套基于 Vue.js 的桌面端 UI 组件库。它提供了丰富的 UI 组件，如表单、按钮、布局等，能够帮助开发者快速构建现代化的 Web 应用。

1.2 安装 Element-UI

首先，我们需要在 Vue 项目中安装 Element-UI：

npm install element-ui --save

1.3 引入 Element-UI

在 main.js 中全局引入 Element-UI 及其样式：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

new Vue({
  render: h => h(App)
}).$mount('#app');

1.4 使用 Element-UI 组件

Element-UI 的使用非常简单，直接在模板中使用对应的组件即可：

<template>
  <div>
    <el-button type="primary">Primary Button</el-button>
    <el-input placeholder="Please input"></el-input>
  </div>
</template>

在这个例子中，我们使用了 Element-UI 的按钮和输入框组件，组件提供了丰富的配置项和事件，使得开发更加便捷。

二、Element-UI 按需引入

2.1 为什么要按需引入？

按需引入是指只加载和使用需要的组件，从而减少最终打包的体积，提高应用的加载速度。在大型项目中，按需引入可以显著优化性能。

2.2 安装 babel-plugin-component

为了实现按需引入，我们需要安装 babel-plugin-component 插件：

npm install babel-plugin-component --save-dev

2.3 配置按需引入

在 babel.config.js 中配置 babel-plugin-component 插件：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk'
      }
    ]
  ]
};

2.4 使用按需引入组件

在按需引入配置完成后，我们可以在需要使用组件的地方单独引入：

import { Button, Input } from 'element-ui';

export default {
  components: {
    'el-button': Button,
    'el-input': Input
  }
};

通过这种方式，只会打包使用到的组件和样式，减少了最终的打包体积。

三、Vue 3 简介

3.1 什么是 Vue 3？

Vue 3 是 Vue.js 的下一代版本，它在性能、API 设计和开发体验上进行了大量改进。Vue 3 的一些关键特性包括：

• 组合式 API (Composition API)：通过组合函数来复用逻辑，更加灵活和强大。
• 更好的性能：通过 Proxy 实现响应式数据，减少不必要的计算和渲染。
• 更小的打包体积：Vue 3 的代码基于 ES Modules 构建，支持 Tree Shaking，从而减少了打包体积。

3.2 Vue 3 的新特性

• 组合式 API：提供了 setup 函数，允许我们在组件中更灵活地组织代码。
• Fragments：允许组件返回多个根节点，减少了不必要的 DOM 元素。
• Teleport：可以将组件的模板渲染到 DOM 的其他位置。
• 新的生命周期钩子：如 onMounted、onUpdated 等，替代了 Vue 2 中的 mounted、updated 等钩子。

四、使用 Vue CLI 创建工程

4.1 安装 Vue CLI

Vue CLI 是 Vue.js 官方提供的标准化开发工具，可以帮助我们快速创建和配置 Vue 项目。

npm install -g @vue/cli

4.2 创建 Vue 3 项目

使用 Vue CLI 创建 Vue 3 项目：

vue create my-vue3-project

在创建过程中，选择 Vue 3 版本，并根据需要选择其他配置选项，如 TypeScript 支持、Router、Vuex 等。

4.3 运行 Vue 项目

创建完成后，进入项目目录并运行项目：

cd my-vue3-project
npm run serve

Vue CLI 将自动启动一个开发服务器，并在浏览器中打开项目。

五、使用 Vite 创建工程

5.1 什么是 Vite？

Vite 是由 Vue.js 的作者尤雨溪开发的一个新型前端构建工具。它利用了现代浏览器的原生 ES 模块支持，能够快速启动开发服务器，并提供更快的构建速度。

5.2 安装 Vite

Vite 可以通过 npm 全局安装：

npm install -g create-vite

5.3 创建 Vue 3 项目

使用 Vite 创建一个 Vue 3 项目：

create-vite my-vue3-project --template vue

Vite 提供了多个模板选项，这里我们选择 vue 模板来创建 Vue 3 项目。

5.4 运行 Vite 项目

进入项目目录并启动开发服务器：

cd my-vue3-project
npm install
npm run dev

Vite 将会快速启动服务器，并且支持 HMR（热模块替换），使得开发体验更加流畅。

六、总结

通过本文的学习，你应该掌握了以下关键点：

• Element-UI 的基本使用：了解了如何在 Vue 项目中安装和使用 Element-UI 组件库。
• 按需引入 Element-UI 组件：学习了如何通过配置 babel-plugin-component 实现按需引入，优化项目的打包体积。
• Vue 3 简介：掌握了 Vue 3 的关键特性和改进，了解了其在性能和开发体验上的优势。
• 使用 Vue CLI 和 Vite 创建 Vue 3 工程：学会了如何使用 Vue CLI 和 Vite 快速创建 Vue 3 项目，并了解了它们各自的特点和使用场景。

这些知识为你在构建现代 Vue.js 应用提供了强大的工具和方法。在接下来的博客中，我们将继续探索 Vue 3 的更多高级特性和实际应用场景。如果你有任何疑问或需要进一步讨论，欢迎在评论区留言。感谢你的阅读，期待在下一篇博客中继续与大家分享更多 Vue.js 和 Vue 3 的开发技巧与经验！