这两天学习了Vue.js ，所以，今天添加一点小笔记。
一、引入jQuery
在当前项目的目录下（就是package.json），运行命令 cnpm install jquery –save-dev 这样就将jquery安装到了这个项目中。
然后修改webpack.base.conf.js(在build文件下)两个地方：
1：加入
var webpack=require('webpack');
2 在module.exports的里面加入
plugins: [
new webpack.optimize.CommonsChunkPlugin('common.js'),
new webp
在Vue.js项目中引入jQuery和Bootstrap是开发过程中常见的需求，特别是在需要使用Bootstrap的UI组件或者jQuery的DOM操作功能时。以下是如何在Vue项目中完成这一过程的详细步骤：
### 一、引入jQuery
1. **安装jQuery**：
在你的项目根目录下，确保你已经安装了`npm`或`cnpm`。然后，通过运行以下命令来安装jQuery，并将其标记为开发依赖项：
```
npm install jquery --save-dev
或
cnpm install jquery --save-dev
```
2. **配置Webpack**：
由于Vue项目通常使用Webpack进行打包，我们需要配置Webpack来使jQuery全局可用。打开`webpack.base.conf.js`文件（位于`build`文件夹下），进行以下修改：
- 引入Webpack模块：`var webpack = require('webpack');`
- 修改`module.exports`对象，添加`plugins`配置：
```javascript
plugins: [
new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery"
})
]
```
这里的`ProvidePlugin`使得Webpack在任何需要`jQuery`或`$`的地方自动引入它。
3. **在主入口文件中引入jQuery**：
在`main.js`文件中，引入jQuery：
```javascript
import $ from 'jquery'
```
### 二、引入Bootstrap CSS
1. **安装Bootstrap**：
安装Bootstrap库，可以使用以下命令：
```
npm install bootstrap --save
或
cnpm install bootstrap --save
```
2. **配置Webpack**：
在`webpack.base.conf.js`的`resolve.alias`部分，添加对Bootstrap路径的别名：
```javascript
alias: {
// 其他别名...
'bootstrap': resolve('src/assets/bootstrap'),
}
```
3. **在主入口文件中引入CSS**：
在`main.js`文件中，引入Bootstrap的CSS样式：
```javascript
import 'bootstrap/css/bootstrap.min.css'
```
### 三、引入Bootstrap JS
1. **引入Bootstrap JS**：
在`main.js`文件中，引入Bootstrap的JavaScript库：
```javascript
import 'bootstrap/js/bootstrap.min.js'
```
这样，jQuery和Bootstrap已经在Vue项目中成功引入并可以使用。需要注意的是，由于Vue.js提倡组件化开发，过度依赖jQuery可能会影响项目的可维护性。尽量避免在Vue组件中直接使用jQuery，而是利用Vue提供的API和指令来处理数据和DOM操作。在必须使用jQuery时，可以考虑封装成Vue插件，以减少与Vue生命周期的冲突。
