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

最新推荐文章于 2024-08-14 13:21:19 发布
最新推荐文章于 2024-08-14 13:21:19 发布
阅读量2.6k 收藏 4
点赞数
分类专栏： 搭建vue记录 文章标签： web vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Romatic_1/article/details/82221280
版权
本文档详细介绍了如何搭建个人的vue-cli项目，并逐步整合jQuery和bootstrap。首先，通过安装node.js、vue-cli以及cnpm来创建vue项目。接着，通过修改webpack配置和安装jQuery，将jQuery引入项目。最后，从官网下载bootstrap文件并引入到项目中，完成整合。整个过程旨在帮助开发者理解vue项目结构和依赖管理。
摘要由CSDN通过智能技术生成

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元/天 解锁文章
Romatic_1
关注
专栏目录
vue-cli 引入jQuery，Bootstrap，popper的方法
10-18
在使用Vue-cli创建Vue项目的过程中，引入第三方库如jQuery、Bootstrap和popper.js是一个常见的需求。这些库在Vue组件中可能有特定的用途，例如Bootstrap用于快速界面布局，jQuery用于DOM操作等。本文将介绍如何在...
vue中整合bootstrap
jasnet_u的博客
04-14 2534
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 122
安装插件 npm install jquery --save npm install bootstrap --save npm install popper.js --save 如果cli版本小于v3： 配置webpack.base.conf.js //在顶部添加 const webpack = require('webpack') ...
Vue和BootStrap的区别
最新发布
adendean的博客
08-14 1112
Vue.js 是一个专注于开发动态交互应用的 JavaScript 框架，而 Bootstrap 是一个用于构建响应式页面布局和界面设计的 CSS 框架。它们可以结合使用，以利用 Vue 的数据处理能力和 Bootstrap 的 UI 设计能力。
在vue-cli中使用Bootstrap-Vue
qq_41200374的博客
05-20 668
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 4067
一、在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
详解在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 cli3 引入Bootstrap-vue
kukeno1的博客
06-30 2541
1、npm install vue bootstrap-vue bootstrap 下载 2、npm install jquery -S 3、在vue.config加入 constwebpack=require("webpack"); module.exports={ configureWebpack:{ plugins:[ newwebpack.ProvidePlugin({ $:...
bootstrap搭建项目环境
04-24
bootstrap搭建项目环境，包含bootstrap的js css等简单项目环境的搭建
vue ： 引入、安装 jquery 、bootstrap
愿我如星君如月 ... 夜夜流光相皎洁 ...
12-13 506
一、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...
vue+bootstrap项目
weixin_45703004的博客
02-01 1952
文章目录vue3的安装以及使用vue3的安装vue3 router-link简单使用bootstrap的引入 vue3的安装以及使用 vue3的安装 初学vue，错误之处还请各位大佬多多指正 寒假时候学校社团中心发了任务要用vue写一个相关的界面，在此记录相关过程 之前用过一段时间的vue2(不是很熟悉，尤其是对于vue项目文件的位置很迷茫）于是各种百度，东拼西凑，凑了个寂寞 https://blog.csdn.net/weixin_38047955/article/details/109218994 这
创建vuecli工程&&vuecli使用bootstrap
weixin_52497498的博客
08-28 296
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 1541
局部安装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 334
试了很多方法，都不能完全正确引入，以下方法既简单又正确！
windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
huang100qi的专栏
03-24 895
http://blog.csdn.net/ansu2009/article/details/53305134
vue 安装 bootstrap(vue安装JQuery)
lwx931449660的博客
12-14 1123
vue项目中使用bootstrap的时候需要安装jquery，bootstrap，并配置，为什么要安装jquery呢，来看bootstrap官网的一段介绍 Bootstrap 中的许多组件需要依赖 JavaScript 才能运行。具体来说，他们依赖的是jQuery、Popper.js以及我们自己开发的 JavaScript 插件。 也就是说bootstrap依赖jQuery和Popp...
Vue-cli中详述jQuery、Bootstrap及Sass/Less CSS集成教程
总结来说，这篇文章详细介绍了如何在Vue CLI项目中整合jQuery和Bootstrap，并优化CSS编译过程。通过遵循提供的步骤，开发者可以避免常见的配置问题，轻松实现这些库的无缝集成。同时，也提到了使用Sass和Less的选项...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值