时间:2021-05-25
说明,项目本身使用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索引这些文件,会很卡。
这里已经exclude了所以显示not exclude
.gitignore文件添加:
接下来就是进入到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的,现在我们仍然这么做。
如下所示
其中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项目的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
1、首先需要在vue-cli项目中配置bootstrap,jquery2、然后新建vue文件,如index.vue,index.vue内容如下:3、配置路由即可
全选功能可以说是前端开发中非常常见的一个功能,以前的项目开发用jQuery开发比较多。最近在使用vue前端框架重构之前的项目。从jQuery到vue的转变主要是
框架应用方面的优化。在项目开发过程中,为了提高开发效率,会使用一些框架技术,例如轻量级框架Bootstrap、jQuery,以及其他很流行的框架如Vue、Rea
一、需求与准备1、准备使用bootstrap实现页面的基础样式(依赖jquery),使用vue实现功能需要2、功能需求1)、表单实现输入任务清单后加入到展示项中
最近想要学习vue,正好看到资料,如何通过命令创建vue项目的方法,就留个笔记环境要求:安装有Node.js、vue、vue-cli。创建项目:vueinitw