Vue项目中使用第三方插件

目录

• Vue使用elementui
• Bootstrap与jQuery
• axios
• cookie

Vue使用elementui

elementui可以快速构建出好看的页面。

官方地址：组件 | Element

第一步：安装elementui，在Vue项目下，输入命令：

npm i element-ui -S

-S表示安装到当前项目下，并添加到依赖(package.json)中。

第二步：在main.js中添加配置：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

第三步：去官网，复制粘贴合适的组件到<template>标签下，在调整一下即可。地址：组件 | Element

Bootstrap与jQuery

因为Bootstrap依赖jQuery，所以放一起安装。

jQuery安装到项目下：

npm install jquery -S

Bootstrap安装到项目下：

npm install bootstrap@3 -S

main.js配置添加：

import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'

vue.config.js配置如下：

const {defineConfig} = require('@vue/cli-service')

const webpack = require("webpack");

module.exports = defineConfig({
    transpileDependencies: true,
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
                "window.jQuery": "jquery",
                "window.$": "jquery",
                Popper: ["popper.js", "default"]
            })
        ]
    }
})

axios

安装模块

npm install axios -S

main.js中导入：

import axios from "axios"
Vue.prototype.$axios = axios

发送请求举例：Vue对象中

this.$axios.get('http://127.0.0.1:8000/api/v1/app01/index/').then(res => {
    console.log(res.data)
})

cookie

安装：前端项目目录下的终端：

npm install vue-cookies -S

配置：main.js

import cookies from 'vue-cookies'
Vue.prototype.$cookies = cookies

使用：

// 设置cookies
this.$cookies.set(key, value, time)
// 获取
this.$cookies.get(key)