前端技术栈整合

1.  vue-cli的安置

　　gitbash指令： npm install -g @vue/[email protected]版本号

　　注：npm view vue-cli versions --json 检察可用vue版本

2. 操作vue-cli创建项目

　　gitbash指令：vue init webpack 项目名

3. 安置jQuery

　　gitbash指令：npm install [email protected]  --save

4. 安置bootstrap

　　gitbash指令：npm install [email protected]

5. 整合jquery

　　1. 找到build目录下的webpack.base.conf.js文件

　　2. 在webpack.base.conf.js文件中填加以下内容

var webpack=require(‘webpack‘)

　　在module.exports = {.....}中填加以下代码，可以加在末尾

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

　　到此jquery就可以正常使用了。测试如下：

6. 整合bootstrap

　　因为我们是先整合的jquery，，所以对付整合bootstrap长短常简单的。直接在main.js中引入bootstrap样式文件和js文件即可

到这里 vue + bootstrap + jquery整合就全部完成了。这里需要注意的是vue中引入bootstrap和jquery是没有语法提示的。

vue+jQuery+bootstrap整合