Vue 第三方库的使用

怼烎@ 2024-03-30 18:02 80阅读 0赞

### 1. 前言 ###

本小节我们将带大家学习如何在项目中使用第三方库。在日常的开发中，我们正在大量的使用第三方库。学会使用第三方库可以说是前端工程师最基本的技能。其实，使用第三方库非常简单，绝大部分库的文档中都会教我们如何使用。接下来我们用几个案例来学习使用第三方库。

### 2. ElementUI 的使用 ###

我们打开[ElementUI][]的官网，根据官网的教程一步步学习。

#### 2.1 安装 ####

在 Vue-cli 创建的项目中，我们可以使用以下命令进行安装：

npm install element-ui -S

也可以通过 CDN 的方式在页面上直接引入：

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

#### 2.2 使用 ####

在 main.js 中写入以下内容：

import Vue from "vue";
    import App from "./App.vue";
    import router from "./router";
    import store from "./store";
    
    Vue.config.productionTip = false;
    
    import ElementUI from "element-ui";
    import "element-ui/lib/theme-chalk/index.css";
    
    Vue.use(ElementUI);
    
    new Vue({
      router,
      store,
      render: h => h(App)
    }).$mount("#app");

此时，我们已经可以在项目中使用 Element 给我们提供的各种组件了。  
我们可以改造 ‘views/Home.vue’ 中的内容：

<template>
      <div class="home">
        <h1>使用 icon 组件</h1>
        <i class="el-icon-edit"></i>
        <i class="el-icon-share"></i>
        <i class="el-icon-delete"></i>
        <h1>使用 button 组件</h1>
        <el-button>默认按钮</el-button>
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="info">信息按钮</el-button>
        <el-button type="warning">警告按钮</el-button>
        <el-button type="danger">危险按钮</el-button>
      </div>
    </template>
    
    <script>export default {
      name: "Home",
      components: {}
    };</script>

### 3. Lodash 的使用 ###

同样的，要使用 Lodash，我们需要先通过 `npm install --save lodash` 安装 Lodash。在使用 lodash 之前，通过 `import _ from "lodash"` 引入 Lodash 包。此时，我们就可以在项目中使用 Lodash 给我们提供方法了：

### 4. 小结 ###

本节我们带大家学习了如何在项目中使用第三方库。在使用第三方库之前，我们需要先通过 `npm install` 安装第三方库，然后在项目中利用 import 加载第三方库。

[ElementUI]: https://element.eleme.cn/#/zh-CN/component/installation