Vue 第三方库的使用方法

发布时间：2023-04-04 08:54:38 所属栏目：教程来源：

导读：学会使用第三方库，可以说是前端工程师最基本的技能。其实，使用第三方库非常简单，绝大部分库的文档中都会教我们如何使用。

接下来我们用几个案例来学习使用第三方库。

我们打开 ElementUI 的官网，根据官网的

学会使用第三方库，可以说是前端工程师最基本的技能。其实，使用第三方库非常简单，绝大部分库的文档中都会教我们如何使用。

接下来我们用几个案例来学习使用第三方库。

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

在 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>

在 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>

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>

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

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!