集成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 EasyUI之验证框validatebox实例详解
Apr 10 jQuery
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 jQuery
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
jQuery中库的引用方法
Jan 06 jQuery
jQuery length 和 size()区别总结
Apr 26 jQuery
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 jQuery
jquery传参及获取方式(两种方式)
Feb 13 jQuery
JQuery表单元素取值赋值方法总结
May 12 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
为什么《星际争霸》是测试人工智能的理想战场
2019/12/03 星际争霸
php+jquery编码方面的一些心得(utf-8 gb2312)
2010/10/12 PHP
php实现只保留mysql中最新1000条记录
2015/06/18 PHP
Display SQL Server Version Information
2007/06/21 Javascript
Jquery焦点与失去焦点示例应用
2014/06/10 Javascript
JavaScript中Cookie操作实例
2015/01/09 Javascript
Javascript定义类(class)的三种方法详解
2015/03/13 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
2016/01/10 Javascript
JavaScript基础知识点归纳(推荐)
2016/07/09 Javascript
angular2中router路由跳转navigate的使用与刷新页面问题详解
2017/05/07 Javascript
浅谈vuex actions和mutation的异曲同工
2018/12/13 Javascript
jquery登录的异步验证操作示例
2019/05/09 jQuery
在SSM框架下用laypage和ajax实现分页和数据交互的方法
2019/09/27 Javascript
Javascript和jquery在selenium的使用过程
2019/10/31 jQuery
three.js欧拉角和四元数的使用方法
2020/07/26 Javascript
浅析JavaScript预编译和暗示全局变量
2020/09/03 Javascript
[04:44]DOTA2西游记战队视频彩蛋流出 师徒开黑巧遇林书豪
2016/08/03 DOTA
Python判断列表是否已排序的各种方法及其性能分析
2016/06/20 Python
详解Python中表达式i += x与i = i + x是否等价
2017/02/08 Python
Python实现的桶排序算法示例
2017/11/29 Python
简单实现python聊天程序
2018/04/01 Python
Python numpy 点数组去重的实例
2018/04/18 Python
python实现对csv文件的列的内容读取
2018/07/04 Python
对Python 语音识别框架详解
2018/12/24 Python
如何用Python制作微信好友个性签名词云图
2019/06/28 Python
浅谈keras的深度模型训练过程及结果记录方式
2020/01/24 Python
python实现猜单词游戏
2020/05/22 Python
python 代码实现k-means聚类分析的思路(不使用现成聚类库)
2020/06/01 Python
python正则表达式的懒惰匹配和贪婪匹配说明
2020/07/13 Python
CheapTickets泰国:廉价航班,查看促销价格并预订机票
2019/12/28 全球购物
J2ee常用的设计模式?说明工厂模式
2015/05/21 面试题
驾驶员安全责任书
2014/07/22 职场文书
签订劳动合同通知书
2015/04/16 职场文书
2015年食堂工作总结报告
2015/04/23 职场文书
MySQL中的隐藏列的具体查看
2021/09/04 MySQL
python 多态 协议 鸭子类型详解
2021/11/27 Python