• jq和boostrap占了在以前的前端半壁江山
• 如今是vue react augular 三分天下
• jq和boostrap有着成熟体系和架构 那我们用vue-cli如何引用jq和boostrap呢？

---

1 安装vue-cli脚手架

vue-cli脚手架工具快速构建项目架构：

。。首先默认了有已经安装了node。。。

1. npm install -g vue-cli 全局安装vue-cli
2. vue init webpack cnm 生成项目名为cnm的的项目模板，cnm自定义
3. npm install 到cnm文件夹中打开git bash或者命令窗口初始化安装依赖

然后输入npm run dev。。不出意外浏览器会自动弹出一个欢迎页面，如果不自动弹出就打开:8080

如果成功运行就会看到vue的logo

2 引入jq

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

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

1、加入webpack对象：

var webpack=require('webpack');

2、在module.exports里面加入：

plugins: [    new webpack.ProvidePlugin({      $:"jquery",      jQuery:"jquery",      "windows.jQuery":"jquery"    })  ]

3、在入口文件main.js中加入

<span style="font-size:18px;">import $ from 'jquery'</span>

这样就全局引入jq了

3 引入boostrap

1、修改webpack.base.conf.js文件：

alias: {        'vue$': 'vue/dist/vue.esm.js',        '@': resolve('src'),        'assets': path.resolve(__dirname, '../src/assets'),        'jquery': "jquery/src/jquery"      }

2、在入口文件main.js中加入：

import './assets/css/bootstrap.min.css'  import './assets/js/bootstrap.min'

3、在assets文件目录中拷贝bootstrap各种文件

试试bootstrap引入成功没：

打开hello.vue文件

替换组件模板

如果引入成功，下边导航栏就会出现