集成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 校验中国身份证号码实例详解
Apr 11 jQuery
简单实现jQuery弹幕效果
May 06 jQuery
jquery点赞功能实现代码 点个赞吧!
May 29 jQuery
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
解决jquery有正确返回值但不执行success函数的问题
Aug 20 jQuery
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
jquery插件开发模式实例详解
Jul 20 jQuery
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
jQuery实现轮播图源码
Oct 23 jQuery
jQuery实现验证用户登录
Dec 10 jQuery
jQuery操作元素追加内容示例
Jan 10 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获取数组最后一个值的2种方法
2015/01/21 PHP
经典PHP加密解密函数Authcode()修复版代码
2015/04/05 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
JavaScript创建一个object对象并操作对象属性的用法
2015/03/23 Javascript
js获取当前日期时间及其它操作汇总
2015/04/17 Javascript
JavaScript实现点击按钮直接打印
2016/01/06 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
2016/05/05 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
2016/05/18 Javascript
Vue.js每天必学之数据双向绑定
2016/09/05 Javascript
深入了解JavaScript的逻辑运算符(与、或)
2016/12/20 Javascript
node中使用es6/7/8(支持性与性能)
2019/03/28 Javascript
vscode vue 文件模板的配置方法
2019/07/23 Javascript
在Uni中使用Vue的EventBus总线机制操作
2020/07/31 Javascript
以Flask为例讲解Python的框架的使用方法
2015/04/29 Python
Python3中的真除和Floor除法用法分析
2016/03/16 Python
Python学习小技巧之利用字典的默认行为
2017/05/20 Python
Python实现MySQL操作的方法小结【安装,连接,增删改查等】
2017/07/12 Python
python 分离文件名和路径以及分离文件名和后缀的方法
2018/10/21 Python
Python3实现获取图片文字里中文的方法分析
2018/12/13 Python
在python中以相同顺序shuffle两个list的方法
2018/12/13 Python
pytorch中torch.max和Tensor.view函数用法详解
2020/01/03 Python
解决torch.autograd.backward中的参数问题
2020/01/07 Python
python自动下载图片的方法示例
2020/03/25 Python
python中什么是面向对象
2020/06/11 Python
Python暴力破解Mysql数据的示例
2020/11/09 Python
目前不被任何主流浏览器支持的CSS3属性汇总
2014/07/21 HTML / CSS
英语系本科生求职信
2014/07/15 职场文书
社区党员志愿服务活动方案
2014/08/18 职场文书
2014年质检员工作总结
2014/11/18 职场文书
志愿者事迹材料
2014/12/26 职场文书
2015年学生资助工作总结
2015/05/25 职场文书
搞笑婚庆主持词
2015/06/29 职场文书
学习杨善洲同志先进事迹心得体会
2016/01/23 职场文书
python3 hdf5文件 遍历代码
2021/05/19 Python
MySQL选择合适的备份策略和备份工具
2022/06/01 MySQL
win7配置本地ftp服务器的图文教程
2022/08/05 Servers