Vue3集成BootStrap4

这里的Vue项目是 Vue3 + Vite

相关博客：https://blog.csdn.net/weixin_37064409/article/details/128339393

初始化项目

下载相关依赖

npm i jquery bootstrap@4 @rollup/plugin-inject -S

相关框架配置如下

main.js

import './assets/main.css'

// import $ from 'jquery';
import "bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.min.js"


import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(router)

app.mount('#app')

vite.config.js

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import inject from "@rollup/plugin-inject";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
      // JQuery相关配置
      inject({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
      })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    }
  },
  // 设置代理
  server: {
    proxy: {
      '/api': {
        target: "http://localhost:9000/",
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, "")
      }
    }
  }
})

表单校验

相关博客: https://blog.csdn.net/m0_66492535/article/details/127740876

注意

这里的校验只是单纯的css方面的校验，而且还没有提示输入信息哪里不合法