集成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实现提示语淡入效果
May 05 jQuery
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
jQuery制作input提示内容(兼容IE8以上)
Jul 05 jQuery
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
jquery使用FormData实现异步上传文件
Oct 25 jQuery
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 jQuery
jQuery 选择方法及$(this)用法实例分析
May 19 jQuery
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 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
模仿OSO的论坛(五)
2006/10/09 PHP
使用数据库保存session的方法
2006/10/09 PHP
php单文件版在线代码编辑器
2015/03/12 PHP
浅谈PHP中其他类型转化为Bool类型
2016/03/28 PHP
Laravel中服务提供者和门面模式的入门介绍
2017/11/06 PHP
CentOS7编译安装php7.1的教程详解
2019/04/18 PHP
javascript 字符串连接的性能问题(多浏览器)
2008/11/18 Javascript
ExtJs grid行 右键菜单的两种方法
2010/06/19 Javascript
分享8款优秀的 jQuery 加载动画和进度条插件
2012/10/24 Javascript
js工具方法弹出蒙版
2013/05/08 Javascript
浅谈jQuery双事件多重加载的问题
2016/10/05 Javascript
微信小程序开发经验总结(推荐)
2017/01/11 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
2017/05/25 jQuery
vue2.x 父组件监听子组件事件并传回信息的方法
2017/07/17 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
2017/12/14 Javascript
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
2018/04/03 Javascript
AngularJS模态框模板ngDialog的使用详解
2018/05/11 Javascript
JavaScript JMap类定义与使用方法示例
2019/01/22 Javascript
Vue.js特性Scoped Slots的浅析
2019/02/20 Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
2019/09/21 Javascript
element form 校验数组每一项实例代码
2019/10/10 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
2020/02/21 Javascript
[03:24]DOTA2超级联赛专访hao 大翻盘就是逆袭
2013/05/24 DOTA
python中WSGI是什么,Python应用WSGI详解
2017/11/24 Python
浅谈Python使用Bottle来提供一个简单的web服务
2017/12/27 Python
python 去除txt文本中的空格、数字、特定字母等方法
2018/07/24 Python
解决Shell执行python文件,传参空格引起的问题
2018/10/30 Python
浅谈Python大神都是这样处理XML文件的
2019/05/31 Python
opencv3/C++实现视频读取、视频写入
2019/12/11 Python
python实现从ftp上下载文件的实例方法
2020/07/19 Python
python 线程的五个状态
2020/09/22 Python
浅谈Html5多线程开发之WebWorkers
2018/05/02 HTML / CSS
芬兰攀岩、山地运动和户外活动用品购物网站:Bergfreunde
2016/10/06 全球购物
中华美德颂演讲稿
2014/05/20 职场文书
酒店总经理岗位职责
2015/04/01 职场文书
2015年卫生局工作总结
2015/07/24 职场文书