2 Star 1 Fork 0

非著名职业BUG撰写师/vue-loader-2

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

vue-loader

介绍

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>

注意

  • vue模板的script里的代码决定了对浏览器的兼容性。如上面使用了ES6的语法,在某些浏览器中可能不兼容(大部分浏览器是兼容的,浏览器兼容性看这里:https://caniuse.com/?search=es6)
  • vue模板不支持js以外的语言(如:不支持typescript),style支持css和less

空文件

简介

取消

发行版

暂无发行版

贡献者

全部

近期动态

不能加载更多了
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/ApeCoder/vue-loader-2.git
git@gitee.com:ApeCoder/vue-loader-2.git
ApeCoder
vue-loader-2
vue-loader-2
master

搜索帮助