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引入
-
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
}
}
}
}
