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


Posted in jQuery onFebruary 10, 2018

说明,项目本身使用jquery和bootstrap做的管理后台,部分登录接口跑在node服务端,大部分接口使用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-es2015": "^6.13.2",
 "cross-env": "^1.0.6",
 "css-loader": "^0.23.1",
 "file-loader": "^0.8.5",
 "style-loader": "^0.13.1",
 "vue": "^2.1.6",
 "vue-hot-reload-api": "^2.1.0",
 "vue-loader": "^9.8.0",
 "vuerify": "^0.4.0",
 "webpack": "beta",
 "webpack-dev-server": "beta"
 },
 "devDependencies": {
 "babel-plugin-component": "^0.9.1"
 }
}

说明:原先使用jquery的时候,使用的supervisor 来进行热加载。这些依赖安装后会在本地node_modules目下,建议添加下gitIgnore和exclude该文件夹。前者是为了防止git提交代码的时候把这些lib提交上去后者是为了防止IDE使用index索引这些文件,会很卡。

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

这里已经exclude了所以显示not exclude

.gitignore文件添加:

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

接下来就是进入到package.json所在目录运行npm install,安装所有依赖项。

2、新建webpack.config.js文件(webpack打包使用),文件内容如下:

module.exports = {
 entry: './project/ebook-manage/resources/node-ebook-manage/js/console/content/rechargeOrder.js',
 output: {
 filename: './project/ebook-manage/resources/node-ebook-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: 'file-loader'
 },
 {
 test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,
 loader: 'file-loader',
 query: {
  name: '[name].[ext]?[hash]'
 }
 }
 ]
 },
 resolve: {
 alias: {
 'vue': 'vue/dist/vue.js'
 }
 },
};

说明:以上是表示将rechargeOrder.js文件打包成rechargeOrder-bundle.js文件,使用vue等loader(具体知识请看webpack)

3、原先jquery的是是在html中引入js的,现在我们仍然这么做。

如下所示

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

其中bundle.js是webpack打包之后的文件,并不是源文件

4、 写一个rechargeOrder.js文件,引用vue,代码如下:

import Vue from 'vue'
 new Vue({
 el: "#secondFram",
 data: {
 userId:""
 },
 components: {},
 filters: {},
 beforeMount:function () {
 },
 methods: {
 buttonClick1() {
 this.getOrders()
 }
 },
 computed: {

 }
 });

其中secondFram是在html中的一个id为secondFram的div

5、 在html中写一个button<button type="primary" style="margin-right: 10px;float: right" @click="buttonClick1">查询</button>

6、 万事俱备,只欠······webpack打包,在webpack.config.js目录,使用webpack webpack.config.js命令,打包后会生成一个rechargeOrder-bundle.js文件。就像之前引用js文件一样,只不过现在引用的是webpack打包后的使用vue编写的经过webpack处理的浏览器能识别的js。

7、 原先的项目使用fis打包,现在还是用fis打包,没有任何影响。

以上这篇集成vue到jquery/bootstrap项目的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jquery实现图片放大点击切换
Jun 06 jQuery
jQuery 表单序列化实例代码
Jun 11 jQuery
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 jQuery
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
jquery easyui如何实现格式化列
Jul 30 jQuery
jQuery:unbind方法的使用详解
Aug 14 jQuery
解决jQuery使用append添加的元素事件无效的问题
Aug 30 jQuery
jQuery层叠选择器用法实例分析
Jun 28 jQuery
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
jQuery cookie的公共方法封装和使用示例
Jun 01 jQuery
jquery插件实现代码雨特效
Apr 24 jQuery
jQuery实现的简单图片轮播效果完整示例
Feb 08 #jQuery
jQuery 防止相同的事件快速重复触发方法
Feb 08 #jQuery
jQuery实现动态显示select下拉列表数据的方法
Feb 05 #jQuery
jQuery Dom元素操作技巧
Feb 04 #jQuery
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 #jQuery
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 #jQuery
jquery.picsign图片标注组件实例详解
Feb 02 #jQuery
You might like
PHP中的表达式简述
2016/05/29 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
PHP解密支付宝小程序的加密数据、手机号的示例代码
2021/02/26 PHP
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
2007/04/27 Javascript
jQuery EasyUI API 中文文档 - DataGrid数据表格
2011/11/17 Javascript
javascript 事件处理程序介绍
2012/06/27 Javascript
jQuery表格插件ParamQuery简单使用方法示例
2013/12/05 Javascript
javascript创建createXmlHttpRequest对象示例代码
2014/02/10 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
2015/05/15 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
2016/04/20 Javascript
JS获取checkbox的个数简单实例
2016/08/19 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
2016/12/16 Javascript
Vue响应式原理深入解析及注意事项
2017/12/11 Javascript
Vue 中axios配置实例详解
2018/07/27 Javascript
vue 解决数组赋值无法渲染在页面的问题
2019/10/28 Javascript
vue+elementUI 实现内容区域高度自适应的示例
2020/09/26 Javascript
Vue使用v-viewer实现图片预览
2020/10/21 Javascript
python中使用enumerate函数遍历元素实例
2014/06/16 Python
python自然语言编码转换模块codecs介绍
2015/04/08 Python
python中enumerate函数用法实例分析
2015/05/20 Python
使用python绘制常用的图表
2016/08/27 Python
详解Python函数可变参数定义及其参数传递方式
2017/08/02 Python
python-opencv在有噪音的情况下提取图像的轮廓实例
2017/08/30 Python
Python探索之创建二叉树
2017/10/25 Python
Django项目实战之用户头像上传与访问的示例
2018/04/21 Python
python库lxml在linux和WIN系统下的安装
2018/06/24 Python
python3 cvs将数据读取为字典的方法
2018/12/22 Python
pyqt5实现登录界面的模板
2020/05/30 Python
浅谈python处理json和redis hash的坑
2020/07/16 Python
详解Python中import机制
2020/09/11 Python
python动态规划算法实例详解
2020/11/22 Python
列车长先进事迹材料
2014/01/25 职场文书
2014党员整改措施思想汇报
2014/10/07 职场文书
优秀党员先进材料
2014/12/18 职场文书
征求意见函
2015/06/05 职场文书
《赵州桥》教学反思
2016/02/17 职场文书