将vue集成到jquery/bootstrap项目中的方法

说明项目本身使用jquery和bootstrap作为管理后台，部分登录接口运行在节点服务器上，大部分接口由springmvc实现。现在，使用vue开发将vue集成到原始项目中。不影响原有框架。最初的包装方法是fis。vue集成后，先用webpack打包，再用fis打包。互不影响。

1.因为最初使用了jquery和bootstrap，所以package.json文件夹下没有数据。使用vue时，所有必需的依赖项都放在package.json下，并添加了以下依赖项：

{ 'name': 'node '，' version': '0.0.1 '，' private': true，' scripts ' : { ' start ' : ' supervisor start . js ' }，' dependencies ' : { ' babel-core ' : '^6.0.0'，' babel-loader': '^6.0.0'，' babel-preset-es 2015 ' : '^6.13.2'，' cross-env': '^1.0.6'，' css '安装这些依赖项后，它们将位于本地node_modules下。建议添加gitIgnore并排除文件夹。前者是为了防止git在提交代码时提交这些lib，后者是为了防止IDE使用index对这些文件进行索引，会非常卡。

这里已经排除了，所以显示不排除

添加。gitignore文件：

接下来，转到package.json所在的目录，运行npm install，并安装所有依赖项。

2.创建一个新的webpack.config.js文件(webpack被打包并使用)。文件内容如下：

module.exports={ entry: '。/project/电子书-manage/resources/node-电子书-manage/js/console/content/rechargeorder . js '，output : { filename : }。/project/电子书-manage/resources/node-电子书-manage/js/console/dist/rechargeOrder-bundle . js ' }，module : { loaders : [{ test :/\。vue$/，loader: 'vue-loader' }，{ test: /\。js$/，loader: 'babel-loader '，exclude: /node_modules/}，{ test: /\。css$/，loader: 'style-loader！css-loader' }，{ test: /\。(eot|svg|ttf|woff|woff2)(\？\S*)？$/，loader:“文件加载器”}，{ test: /\。(png|jpe？g|gif|svg)(\？\S*)？$/，loader: '文件加载器'，query: { name: '[name]。[ext]？[hash]' } } ] }，resolve : { alias : { ' vue ' : ' vue/dist/vue . js ' }，}；注意：上面的意思是把rechargeOrder.js文件打包成rechargeOrder-bundle.js文件，使用vue等加载器(具体知识见webpack)

3.最初，jquery将js引入html，但现在我们仍然这样做。

如下

其中，bundle.js是webpack打包后的文件，不是源文件

4.写一个rechargeOrder.js文件并引用vue。代码如下：

从“Vue”中导入Vue new Vue({ El : ' # secondFram '，data: { userId:'' }，components : { components : }，beforeMount:function () { }，methods : { buttonclick 1(){ this . getorders()} }，computed : { })；其中secondFram是html中id为secondFram的div

5.在html中写一个button button type=' primary ' style=' margin-right : 10px；Float:右' @ click=' buttonclick1 '查询/按钮

6.一切都准备好了，只需要用WebPack打包。在webpack.config.js目录下，使用webpack webpack.config.js命令，打包后会生成一个名为rechargeOrder-bundle.js的文件。就像之前引用js文件一样，它只引用webpack打包后用vue编写的经过webpack处理的浏览器可以识别的js。

7.原项目由fis打包，但仍由fis打包，没有影响。

以上将vue集成到jquery/bootstrap项目中的方法就是边肖与大家分享的全部内容。希望能给大家一个参考，支持我们。