vue-cli快速构建项目:

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

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

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

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



vue项目中使用jq 和bootstrap

引入jq:

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

  

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

   

1、加入webpack对象:


var webpack=require('webpack');


 2、在module.exports里面加入:


vue项目中使用jq 和bootstrap

引入bootstrap:


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

vue项目中使用jq 和bootstrap

然后在main.js引用:

vue项目中使用jq 和bootstrap

在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>

这样既成功引入了:

vue项目中使用jq 和bootstrap

相关文章: