集成vue到jquery/bootstrap项目的方法
说明,项目本身使用jquery和bootstrap做的管理后台,部分登录接口跑在node服务端,大部分接口使用springmvc实现。现在,使用vue开发,集成vue到原先的项目中。不影响原先的框架。原来的打包方式是使用fis打包,集成vue之后,先用webpack打包,再用fis打包。互不影响。 1、由于原先使用jquery和bootstrap,所以package.json文件夹下面没有数据。使用vue的时候,需要的依赖全部放到package.json下,添加如下依赖:说明:原先使用jquery的时候,使用的supervisor 来进行热加载。这些依赖安装后会在本地node_modules目下,建议添加下gitIgnore和exclude该文件夹。前者是为了防止git提交代码的时候把这些lib提交上去后者是为了防止IDE使用index索引这些文件,会很卡。 这里已经exclude了所以显示not exclude .gitignore文件添加: 接下来就是进入到package.json所在目录运行npm install,安装所有依赖项。 2、新建webpack.config.js文件(webpack打包使用),文件内容如下:说明:以上是表示将rechargeOrder.js文件打包成rechargeOrder-bundle.js文件,使用vue等loader(具体知识请看webpack) 3、原先jquery的是是在html中引入js的,现在我们仍然这么做。如下所示 其中bundle.js是webpack打包之后的文件,并不是源文件 4、写一个rechargeOrder.js文件,引用vue,代码如下:}
}); 其中secondFram是在html中的一个id为secondFram的div 5、在html中写一个button |