vue项目中使用jq 和bootstrap

最新推荐文章于 2025-06-24 14:25:18 发布

原创最新推荐文章于 2025-06-24 14:25:18 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍如何使用 Vue CLI 全局安装并快速构建一个名为 ycx 的项目模板，包括安装依赖、引入 jQuery 和 Bootstrap 的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue-cli快速构建项目:

npm install -g vue-cli 全局安装vue-cli

vue initwebpack ycx 生成项目名为ycx的的项目模板，ycx自定义

npm install 先cd到ycx项目中然后安装依赖

npm run dev 如果成功就会出现下面的成功页面

引入jq：

输入 npm install jquery --save-dev 用npm下载jq依赖、

找到build文件夹下的webpack.base.conf.js文件打开，修改配置：

1、加入webpack对象：

var webpack=require('webpack');

2、在module.exports里面加入：

引入bootstrap：

在assets文件目录中拷贝bootstrap官网下载的bootstrap 里的dist文件夹里面有css js

然后在main.js引用：

在vue中尝试是否成功：

<div 
class="row">
<div 
class="col-md-1">.col-md-1</div>
<div 
class="col-md-1">.col-md-1</div>
<div 
class="col-md-1">.col-md-1</div>
<div 
class="col-md-1">.col-md-1</div>
<div 
class="col-md-1">.col-md-1</div>
<div 
class="col-md-1">.col-md-1</div>
<div 
class="col-md-1">.col-md-1</div>
<div 
class="col-md-1">.col-md-1</div>
<div 
class="col-md-1">.col-md-1</div>
<div 
class="col-md-1">.col-md-1</div>
<div 
class="col-md-1">.col-md-1</div>
<div 
class="col-md-1">.col-md-1</div>
</div>