36《Vue 入门教程》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 加载第三方库。
原创文章,作者:starterknow,如若转载,请注明出处:https://www.starterknow.com/126492.html