Vue 第三方庫的使用

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 給我們提供方法了：

<script>
import _ from "lodash";
export default {
  name: "Home",
  created() {
    const str = _.join(["a", "b", "c"], "~");
    console.log(str);
  },
  components: {}
};
</script>

4. 小結

本節我們帶大家學習了如何在項目中使用第三方庫。在使用第三方庫之前，我們需要先通過 npm install 安裝第三方庫，然后在項目中利用 import 加載第三方庫。