个人项目--搭建vue-cli 整合jQuery和bootstrap

最新推荐文章于 2025-09-25 19:06:21 发布
原创 最新推荐文章于 2025-09-25 19:06:21 发布 · 2.7k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#web #vue

本文档详细介绍了如何搭建个人的vue-cli项目，并逐步整合jQuery和bootstrap。首先，通过安装node.js、vue-cli以及cnpm来创建vue项目。接着，通过修改webpack配置和安装jQuery，将jQuery引入项目。最后，从官网下载bootstrap文件并引入到项目中，完成整合。整个过程旨在帮助开发者理解vue项目结构和依赖管理。

1、 搭建自己的第一个vue-cli脚手架

  • 下载安装node.js
    下载8.11.4LTS版本，点击下一步安装即可，默认安装到C盘，具体需要改变安装路径的可以搜一下。。
    输入：npm install express -g
    这里写图片描述

  • 安装vue-cli
    vue cli是vue的脚手架工具。（比较慢。。。）
    命令行输入：npm install -g cnpm –registry=https://registry.npm.taobao.org
    这里写图片描述

  • 安装完成后检查是否安装成功
    命令行输入： node -v
    npm -v
    vue -V （V大写）

    如果成功就会显示版本号

  • 创建vue项目
    命令行输入： vue init webpack 项目名称
    （可以在自己喜欢的文件夹里面创建自己的项目）
    根据提示往下写就好了

最低0.47元/天 解锁文章
在Vue.js中使用Bootstrap
JhzDev的博客
09-27 636
你可以通过安装Bootstrap、引入Bootstrap的CSS和JavaScript文件，并使用Bootstrap的CSS类和JavaScript组件来构建响应式的界面。我们使用了Bootstrap的CSS类来设置导航栏的样式，并使用了Bootstrap的JavaScript组件来实现导航栏的折叠功能。如果你计划使用Bootstrap的JavaScript组件，你还需要引入Bootstrap的JavaScript文件。这将会从安装的Bootstrap包中加载Bootstrap的JavaScript文件。
Vue安装/使用boostrap-vue 插件
阿威的博客
07-15 370
1安装 详细可看boostrap-vue官网 npm install boostrap-vue --save 2main.js引用boostrap-vue import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap-vue/dist/bootstrap-vue.css' //我这里是按需引用 import { BootstrapVue,Button } from 'bootstrap-vue' Vue.use( BootstrapVue,Bu
Vue3与Bootstrap结合使用的实操指南、常见场景示例及问题解决方案总结
繁若华尘的博客
02-20 1949
单独引入插件（如Modal、Dropdown），减少打包体积。
VUE、jquery、React、Ant Design、element ui、bootstrap 前端框架的 功能总结，示例演示、使用场景介绍、完整对比总结
最新发布
bsklhao的博客
09-25 716
基于 Hooks 的状态管理和声明式 UI[可根据项目需求、团队技术栈和性能要求综合选择。：与 Vue 无缝集成，提供丰富的表单控件[：开箱即用的高质量组件，支持主题定制[：链式调用简化 DOM 操作和动画[：通过类名快速实现响应式布局[
vue中整合bootstrap
jasnet_u的博客
04-14 2736
vue整合bootstrap过程 1、初始化项目 vue init webpack vue_bootstrap 2、main.js中引入jquery,bootstrap的css和js import './bootstrap-3.3.7/dist/jquery.min.js'; import './bootstrap-3.3.7/dist/css/bootstrap.css'; im...
在vue-cli项目中使用bootstrap
weixin_34414650的博客
04-20 151
安装插件 npm install jquery --save npm install bootstrap --save npm install popper.js --save 如果cli版本小于v3： 配置webpack.base.conf.js //在顶部添加 const webpack = require('webpack') ...
vue-cli 引入jQuery，Bootstrap，popper的方法
10-18
在使用Vue-cli创建Vue项目的过程中，引入第三方库如jQuery、Bootstrap和popper.js是一个常见的需求。这些库在Vue组件中可能有特定的用途，例如Bootstrap用于快速界面布局，jQuery用于DOM操作等。本文将介绍如何在...
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
10-19
在Vue CLI中引用jQuery、Bootstrap以及使用Sass和Less编写CSS是常见的前端开发需求，本文将详细介绍这些步骤。 首先，让我们来看看如何在Vue CLI项目中引入Bootstrap。Bootstrap是一款流行的前端框架，提供了丰富的...
在vue-cli项目中使用bootstrap的方法示例
12-10
在Vue CLI创建的项目中集成Bootstrap，需要遵循一系列步骤，以确保Bootstrap的样式和JavaScript功能能够在Vue组件中正常工作。以下是一个详细的指南： 首先，为了使用Bootstrap，你需要安装必要的依赖。Bootstrap...
在vue-cli中使用Bootstrap-Vue
qq_41200374的博客
05-20 753
1、安装bootstrap-vue、bootstrap @4.x版本 npm install bootstrap-vue npm install bootstrap@4.6.0 --save --save-exact 2、main.js中引入 //此处省略引入vue import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap-vue/dist/bootstrap-vue.css' import { BootstrapVue, IconsPlugi
在vue-cli脚手架项目中使用bootstrap框架
qq_39784865的博客
06-07 4207
一、在vue-cli脚手架项目中使用bootstrap3框架的步骤 1、先在项目中安装bootstrap和jquery npm i jquery bootstrap@3 -S 2、在main.js中引入bootstrap import 'bootstrap/dist/js/bootstrap.js' import 'bootstrap/dist/css/bootstrap.css' 3、在项目的根目录新建一个配置文件vue.config.js,输入以下代码 const webpack = requir
bootstrap搭建项目环境
04-24
bootstrap搭建项目环境，包含bootstrap的js css等简单项目环境的搭建
vue cli3 引入Bootstrap-vue
kukeno1的博客
06-30 2659
1、npm install vue bootstrap-vue bootstrap 下载 2、npm install jquery -S 3、在vue.config加入 constwebpack=require("webpack"); module.exports={ configureWebpack:{ plugins:[ newwebpack.ProvidePlugin({ $:...
vue ： 引入、安装 jquery 、bootstrap
愿我如星君如月 ... 夜夜流光相皎洁 ...
12-13 562
一、vue安装jquery 1、新建一个vue工程。 2、在项目文件夹下，使用命令 npm install jquery --save-dev 引入jquery。 npm install jquery --save-dev 3、在build/webpack.base.conf.js中添加如下内容： var webpack = require('webpack') plugi...
创建vuecli工程&&vuecli使用bootstrap
weixin_52497498的博客
08-28 362
1、创建vue-cli工程 1、在命令行下进入到工作空间文件夹中，输入如下命令： vue create jtlc_vuecli_01_dcb（注意：工程名必须全部小写） 2、选择预设模板。这里选择“Manually select features”（手动选择特征） 3、通过 ↑↓ 箭头选择依赖，按 “空格” 选中，按 “a” 全选，按 “i” 反选。 Babel：转码器，可以将ES6代码转为ES5代码，可兼容不支持ES6的浏览器。 TypeScript：是JavaScript的超集（.ts文件），包含并扩
vue-cli3.x引入bootstrap
WF帆少的博客
06-25 1578
局部安装bootstrap npm install bootstrap -D 修改src下的main.js import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' import './registerServiceWorker' ...
Vue中引入Bootstrap、jQuery[最简单]
Kzj_19的博客
02-16 429
试了很多方法，都不能完全正确引入，以下方法既简单又正确！
windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
huang100qi的专栏
03-24 936
http://blog.youkuaiyun.com/ansu2009/article/details/53305134
Vue-cli中详述jQuery、Bootstrap及Sass/Less CSS集成教程
总结来说，这篇文章详细介绍了如何在Vue CLI项目中整合jQuery和Bootstrap，并优化CSS编译过程。通过遵循提供的步骤，开发者可以避免常见的配置问题，轻松实现这些库的无缝集成。同时，也提到了使用Sass和Less的选项...
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值