Vue 第三方库的使用
Vue 第三方 使用
2023-09-11 14:18:27 时间
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 加载第三方库。
相关文章
- Vue笔记:vue项目引入bootstrap、elementUI、echarts
- VUE - 导航守卫
- VUE - 使用axios数据请求时数据绑定时 报错 TypeError: Cannot set property 'xxxx' of undefined 的解决办法
- vue-cli 3.0 index.html引入第三方js文件
- vue实例的方法
- [Vue @Component] Define Props on a Vue Class with vue-property-decorator
- Vue.js3: 页面打开前实现图片全部预加载(vue@3.2.33)
- Vue Element使用icon图标(第三方)
- 使用vue搭建应用六实现登录页
- vue框架-基础5-vue-使用第三方ui组件快速开发页面,vuetify
- 一个典型的Vue应用的App.vue
- Vue CLI 4.x安装成功,但是无法运行vue-V等指令。报错vue -V 不是内部或外部命令,也不是可运行的程序或批处理文件解决方案!!!
- vue学习:xmg vue学习笔记1/14代码案例
- vue:export default 和 export 区别(difference between Vue 'export default' and 'new Vue')
- vue利用canvas将图片上传到服务器
- Vue中vue-i18n结合element-ui实现国际化
- Vue(八)vue 脚手架、脚手架创建项目示例
- Vue(二)vue 指令及用法举例
- Vue(一)vue 概述与用法、MVVM、绑定语法、vue 指令