在项目中将vue2升级到了vue3版本,但是业务核心代码已完善,为了兼容已开发功能,引用了些老版本插件,以此记录
下载
yarn add jquery jquery-ui-dist bootstrap
-此处jquery-ui下载jquery-ui-dist版本
main.ts
// 引入插件
// import $ from 'jquery'; // 此处引用非全局变量 需vite.config.ts中配置全局引用
// import go from 'gojs'; // 按需引用 simulation.js
import 'bootstrap' // vite.config.ts中设置引用路径
import 'bootstrap/dist/css/bootstrap.min.css'
// import "@popperjs/core"; // bootstrap定位文件 - 非必要
// import * as d3 from 'd3'; // 按需引用
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
// 使用jquery-ui css必须引用
import 'jquery-ui-dist/jquery-ui';
import 'jquery-ui-dist/jquery-ui.css';
vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import inject from '@rollup/plugin-inject'; // 必须重要!效果和webpack.ProvidePlugin中相同
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
inject({
$: "jquery", // 这里会自动载入 node_modules 中的 jquery jquery全局变量
jQuery: "jquery",
"windows.jQuery": "jquery"
})
],
resolve:{
//设置路径别名
alias: {
'@': path.resolve(__dirname, './src'),
'*': path.resolve(''),
},
}
})
三方插件静态类型声明文件下载
yarn add @types/jquery @types/bootstrap
- 静态类型文件,就是声明文件 *.d.ts
- 有些包直接下载时包含,jquery这些老的插件需要单独下载
- 并不是所有文件都有声明文件 像jquery-ui就没有
参考文档
在vite中使用bootstrap - Bootstrap & Vite
注入全局变量插件@rollup/plugin-inject - @rollup/plugin-inject