说明,项目本身使用jquery和引导做的管理后台,部分登录接口跑在节点服务端,大部分接口使用springmvc实现。现在,使用vue开发,集成vue到原先的项目中,不影响原先的框架。原来的打包方式是使用fis打包,集成vue之后,先用webpack打包,再用fis打包。互不影响。
由于原先使用jquery和引导,所以package.json文件夹下面没有数据。使用vue的时候,需要的依赖全部放到package.json下,添加如下依赖:
{
“名称”:“节点”,
“版本”:“0.0.1”,
“私人”:没错,
"脚本":{
“开始”:“主管start.js”
}，
“依赖”:{
:“babel-core ^ 0”,
:“babel-loader ^ 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”:“测试版”,
“webpack-dev-server”:“测试版”
}，
" devDependencies ": {
:“babel-plugin-component ^ 0.9.1”
}
}
原先使用jquery的时候,使用的主管来进行热加载。这些依赖安装后会在本地node_modules目下,建议添加下gitIgnore和排除该文件夹。前者是为了防止git提交代码的时候把这些自由提交上去后者是为了防止IDE使用指数索引这些文件,会很卡。
这里已经排除了所以显示不排除
.gitignore文件添加:
接下来就是进入到包中。json所在目录运行npm安装,安装所有依赖项。
新建webpack.config.js文件(webpack打包使用),文件内容如下:
模块。出口={
条目:“。/项目/ebook-manage/资源/node-ebook-manage/js/控制台/内容/rechargeOrder.js ',
输出:{
文件名:“。/项目/ebook-manage/资源/node-ebook-manage/js/控制台/dist/rechargeOrder-bundle.js '
}，
模块:{
加载器:(
{
测试:/\ .vue/美元,
装载机:“vue-loader”
}，
{
测试:/\ . js/美元,
装载机:“babel-loader”,
排除:/node_modules/}，
{
测试:/\ . css/美元,
装载机:“style-loader css-loader !”
}，
{
测试:/\。(测试结束svg | | ttf woff | | woff2) (\ & # 63; \ S *) & # 63;美元/,
装载机:“file-loader”
}，
{
测试:/\。(png | jpe # 63; g | gif | svg) (\ & # 63; \ S *) & # 63;美元/,
装载机:“file-loader”,
查询:{
名称:“[名字]。[ext] & # 63; (hash)”
}
}
]
}，
解决:{
别名:{
“vue”:“vue/dist/vue.js '
}
}，
};
说明:以上是表示将rechargeOrder.js文件打包成rechargeOrder-bundle.js文件,使用vue等装载机(具体知识请看webpack)
原先jquery的是是在html中引入js的,现在我们仍然这么做。
如下所示
其中bundle.js是webpack打包之后的文件,并不是源文件
写一个rechargeOrder.js文件,引用vue,代码如下:
从“Vue”进口Vue
新Vue ({
埃尔:“# secondFram”,
数据:{
用户标识:“”
}，
组件:{},
过滤器:{},
beforeMount:函数(){
}，
方法:{
buttonClick1 () {
this.getOrders ()
}
}，
计算:{
}
});
其中secondFram是在html中的一个id为secondFram的div
在html中写一个button<按钮类型=爸鳌盄click=癰uttonClick1”在查询& lt;/button>
万事俱备,只欠······webpack打包,在webpack.config。js目录,使用webpack webpack.config.js命令,打包后会生成一个rechargeOrder-bundle.js文件。就像之前引用js文件一样,只不过现在引用的是webpack打包后的使用vue编写的经过webpack处理的浏览器能识别的js。
原先的项目使用fis打包,现在还是用fis打包,没有任何影响。
以上这篇集成vue到jquery/引导项目的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
