vue常用插件安装指令

最新推荐文章于 2024-07-17 15:44:40 发布

创界小吉结

最新推荐文章于 2024-07-17 15:44:40 发布

阅读量582

点赞数

CC 4.0 BY-SA版权

文章标签：前端

本文链接：https://blog.csdn.net/m0_66501633/article/details/128745953

文章介绍了如何在Vue2项目中安装和使用wangEditor富文本编辑器，以及qs库。同时，它详细说明了axios的安装和全局引用，以及设置全局跨域配置的WebMvcConfigurer。最后，文章提到了element-ui的安装和引入步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

wangEditor安装与使用 —— 轻量级 web 富文本编辑器

官网：https://www.wangeditor.com/
文档：www.kancloud.cn/wangfupeng/wangeditor3/332599
源码：github.com/wangfupeng1988/wangEditor

vue2项目中

打开项目终端输入npm i wangeditor --save

在main.js文件添加代码使用插件

import wangEditor from 'wangeditor';

Vue.prototype.wangEditor = wangEditor;

qs的安装与使用

qs是一个增加了一些安全性的查询字符串解析和序列化字符串的库。

1.在项目中使用命令行工具输入：npm install qs

2.安装完成后在需要用到的组件中：import qs from 'qs’

3.在main.js中全局引入： Vue.prototype.qs = qs

在vue2.0下安装axios

安装axios

npm install axios --save

在main.js全局引入axios

import axios from 'axios';

Vue.prototype.axios=axios;

重写WebMvcConfigurer(全局跨域)

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                //是否发送Cookie
                .allowCredentials(true)
                //放行哪些原始域
                .allowedOriginPatterns("*")
                .allowedMethods(new String[]{"GET", "POST", "PUT", "DELETE"})
                .allowedHeaders("*")
                .exposedHeaders("*");
    }
}

vue2.0安装element-ui

element ui的安装

在项目中打开cmd命令窗口，输入命令---- npm i element-ui -S命令

在main.js文件中引入 element 组件：

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)