代码拉取完成,页面将自动刷新
vue单文件模板的java解析器,可将vue单文件模板文件解析为require.js可加载的js文件。集成了Solon 的支持
在Solon系统中使用,当debug==1或者设置vue.mode=0时, .vue文件直接返回模板内容,由loader解析,否则,文件响应同名的vjs文件,vjs文件由vue-maven-plugin编译而来 loader基于require.js,可兼容所有兼容require.js的js模块,如:vue2.x,vuex.2.x,vueRouter.2.x 等 loader在require.js 基础上扩展了vue静态模板文件支持,并且可以自动以后缀名判断加载器
loader详见:https://gitee.com/ApeCoder/require-vue
当需要在浏览器中使用vue调试工具调试时,在访问地址中添加?debug可启用调试,同时需要自行在static/js目录下添加vue.js(vuejs的完整版),如:http://localhost:8080/index.html?debug#/xxx
在solon项目中引用
<dependency>
<groupId>com.palm</groupId>
<artifactId>vue-loader</artifactId>
<version>2.0</version>
</dependency>
<!-- 在发行版中排除vue源文件--->
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-jar-plugin</artifactId>
<version>3.2.0</version>
<configuration>
<excludes>
<exclude>**/*.vue</exclude>
</excludes>
</configuration>
</plugin>
<!-- 打包前编译vue文件-->
<plugin>
<groupId>com.palm</groupId>
<artifactId>vue-maven-plugin</artifactId>
<version>2.0.3</version>
<executions>
<execution>
<!-- 配置compile执行 -->
<phase>prepare-package</phase>
<goals>
<!-- 配置执行目标 -->
<goal>compile</goal>
</goals>
</execution>
</executions>
</plugin>
由于项目未发到中央仓库,需添加制品库到pom.xml中
<distributionManagement>
<repository>
<id>palmxj-framewrok-central</id>
<name>central</name>
<url>https://palmxj-maven.pkg.coding.net/repository/framewrok/central/</url>
</repository>
</distributionManagement>
index.html
<div id="app"></div>
<script src="js/loader.min.js" data-main="main.js"></script>
main.js
//配置需要使用的模块,满足requirejs的规范即可
//可配置常用的vue插件,ui等
require.config({
paths:{
vuex:'https://cdn.bootcdn.net/ajax/libs/vuex/3.6.2/vuex.min',
vueRouter:'https://cdn.bootcdn.net/ajax/libs/vue-router/3.5.3/vue-router.min'
}
})
require(['vue','test.vue'],function(Vue,test){
/** 注册动态组件
Vue.component('MyCom', function (resolve) {
require(['coms/mycom.vue'], resolve)
})
**/
/** 注册路由
let router = new VueRouter({
routes: [
{
path: '/login',
name: 'Login',
component: (r) => require(['login.vue'], r)
}
]
})
**/
new Vue(test).$mount("#app");
})
test.vue
<template>
<div>
<button @click="hello">Hello</button>
{{count}}
</div>
</template>
<script>
// import xx from './xx.vue' //引用其他组件
// import { mapGetters } from 'vuex' //引用vuex
export default {
name:'Hello',
data(){
return {
count:0
}
},
/**
// 使用对象展开运算符将 getter 混入 computed 对象中
computed: {
...mapGetters([
'doneTodosCount',
'anotherGetter',
// ...
])
}
**/
methods:{
hello(){
this.count++
}
}
}
</script>
test.vue(兼容写法)
<template>
<div>
<button @click="hello">Hello</button>
{{count}}
</div>
</template>
<script>
// var xx = require('./xx.vue')//引用其他组件
// 属性提取不能使用了
// var vuex=require('vuex')
// var mapGetters=vuex.mapGetters
// 对象展开运算符将不兼容,需要手动改写
// var getters=mapGetters(['a','b'])
// getters.someElse=function(){
// return this.count
// }
// 还有更多的地方
export default {
name:'Hello',
data:function(){
return {
count:0
}
},
/**
computed:getters,
*/
methods:{
hello:function(){
this.count++
}
}
}
</script>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。