Vue脚手架安装Jquery、LayUI、Bootstarp、element、Axios以及前端解决跨域问题

1.安装过程

PS E:\VSCODE前端\VueCLIProject\layui_test> npm install layui

added 1 package in 2s

99 packages are looking for funding

  run `npm fund` for details

PS E:\VSCODE前端\VueCLIProject\layui_test> npm install element-ui

npm WARN deprecated core-js@2.6.12: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.

added 9 packages in 4s

99 packages are looking for funding

  run `npm fund` for details

PS E:\VSCODE前端\VueCLIProject\layui_test> npm install bootstrap

added 2 packages in 2s

101 packages are looking for funding

  run `npm fund` for details

PS E:\VSCODE前端\VueCLIProject\layui_test> npm install axios

added 6 packages in 2s

101 packages are looking for funding

  run `npm fund` for details

PS E:\VSCODE前端\VueCLIProject\layui_test> npm install jquery

added 1 package in 2s

101 packages are looking for funding

  run `npm fund` for details

PS E:\VSCODE前端\VueCLIProject\layui_test>

2引入

1. jquery引入

安装完成后，可以在需要使用 jQuery 的地方引入它。在 Vue 组件中引入 jQuery 的方式有两种：

a. 在单个组件中引入：

import $ from 'jquery'

b. 在整个项目中全局引入（在项目的入口文件 main.js 中）：

import jQuery from 'jquery'

window.$ = window.jQuery = jQuery

建议在需要使用的组件中局部引入 jQuery，以避免全局污染和冲突。

2. Layui引入

在 Vue 脚手架中安装 Layui 并使用它需要遵循以下步骤：

在项目根目录下打开终端或命令行界面。

使用 npm 或 yarn 安装 Layui，执行以下命令：

npm install layui

# 或者

yarn add layui

在 Vue 项目的入口文件（例如 main.js）中引入 Layui 的 CSS 文件和 JavaScript 文件：

import 'layui-src/dist/css/layui.css'

import 'layui-src/dist/layui.js'

在需要使用 Layui 组件的地方，按照 Layui 的文档和用法，使用相应的 HTML 结构和 Layui 提供的样式类名来创建组件。

注意：Layui 是一个基于 jQuery 的前端UI框架，它依赖于 jQuery 库。在使用 Layui 之前，确保项目中已经引入了 jQuery 库

3.bootstrap引入

在 main.js 文件中引入 Bootstrap 的样式。示例如下：

import Vue from 'vue'

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

new Vue({

  // ...其他配置

})

上述代码中，首先导入 Vue 库，然后引入 Bootstrap 的 CSS 文件 (bootstrap.css)。

如果还需要使用 Bootstrap 的 JavaScript 组件（如模态框、弹出框等），可以在 main.js 中引入 Bootstrap 的 JavaScript 文件。如下：

import 'bootstrap/dist/js/bootstrap.js'

4.axios引入

在需要使用 Axios 的地方引入并使用它：import axios from 'axios'

5.element的引入

import Vue from 'vue'

import ElementUI from 'element-ui'

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

Vue.use(ElementUI)

6.Vue解决跨域问题：CORS 错误

使用代理服务器。Vue CLI 提供了 vue.config.js 文件来配置代理服务器。在该文件中添加一个代理配置来解决 CORS 错误。示例如下：

// vue.config.js

module.exports = {

  devServer: {

    proxy: {

      '/api': {

        target: 'http://example.com', // 后端接口地址

        ws: true,

        changeOrigin: true

      }

    }

  }

}