学vue第一记：Vuejs整合bootstrap和jQuery

2018-08-23 本文已影响0人 ai耳边的呢喃

一. vue 2.0环境下

1.创建vue项目 npm init webpack new-vue

2.安装jQuery npm install jquery --save

如果想查看npm上jquery有哪些版本，可以执行命令： npm view jquery versions

1) 在webpack.base.conf.js中增加声明webpack

var webpack=require('webpack')

2) 在module.exports = {}中添加以下代码

plugins: [

new webpack.optimize.CommonsChunkPlugin('common'),

new webpack.ProvidePlugin({

jQuery:'jquery',

$:'jquery',

"windows.jQuery":"jquery"

})

]

3) 在用到 jquery 代码的页面

import $ from 'jqyery' 或 import jQuery from 'jquery'

3. 安装Bootstrap指定版本 npm install bootstrap@3.3.7 --save

Bootstrap 的dropdown插件是依赖popper.js 的，所以要安装popper.js 不然会报错 npm install popper.js --save

在main.js中导入bootstrap

import 'bootstrap/dist/css/bootstrap.min.css'

import 'bootstrap/dist/js/bootstrap.min.js'

1.创建项目 vue create new-vue

2. 安装 jQuery 和 bootstrap，在 main.js 引入bootstrap，同上

3. 配置

1）打开 .eslintrc.js 文件，添加代码

2）在根目录下创建 vue.config.js 文件，并添加代码