# require-vue

**Repository Path**: ApeCoder/require-vue

## Basic Information

- **Project Name**: require-vue
- **Description**: 用于浏览器直接加载 vue模板的require.js 加载器


- **Primary Language**: JavaScript
- **License**: AGPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2021-06-25
- **Last Updated**: 2022-09-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# require-vue

#### 介绍
基于require.js 用于浏览器加载 vue模板的加载器

#### 编译说明
编译前需要安装uglifyjs ,然后执行 build.sh
#### 使用说明
本加载器基于require.js，支持require.js的所用语法和使用方法。
合并了txt,json,css插件,使用配置loader的方法配置require.js
使其支持后缀的用法,引入loader.min.js后安装正常的require.js使用方法即可。
vue-loader不依赖vue,仅仅将vue单文件模板翻译成js模式，示例：
```html
<!--test.html-->
<div id="app"></div>
<script src="path/loader.min.js"></script>
<script>
    require.config({
        baseURI:'./',
        paths:{
            vue:'https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue',//引用vue,可不配置,默认使用loader同目录下的vue.js和vue.min.js,
            HeyUI:'https://cdn.jsdelivr.net/npm/heyui@1.28.0/dist/heyui.min',//使用HeyUI-一套基于Vue的UI组件库
            vueRouter: 'path-to-vueRouter',
            ... //更多配置
        }
    })
    require(['vue','HeyUI','./test.vue'],(Vue,HeyUI,test)=>{
        Vue.use(HeyUI)
        new Vue(test).$mount("#app")
    })
</script>
```
```vue
<!-- test.vue-->
<template>
  <Button @click="sayHello">sayHello</Button>
</template>
<script>
import HeyUI from 'HeyUI'
export default {
  data(){
    return {
      name:'test'
    }
  },methods:{
    sayHello(){
      HeyUI.$Message("hello "+this.name)
    }
  }
}
</script>
<style>
button{
  color:red
}
</style>
```
可使在vue组件中引用其他vue组件
```vue
<template>
  <Other/>
</template>
<script>
import Other form './other.vue' //注意添加.vue后缀
export default {
  components:{Other},
  data(){
    return {}
  }
}
</script>
```
注册动态载入组件
```vue
 Vue.component('MyCom', function (resolve) {
    require(['coms/mycom.vue'], resolve)
})
```
使用VueRouter定义动态载入路由
```vue
  let router = new VueRouter({
        routes: [
            {
                path: '/login',
                name: 'Login',
                component: (r) => require(['login.vue'], r)
            }
        ]
   })
```
### 注意
- 默认本文档阅读者有requirejs使用经验
- 不支持scoped style(即scoped不生效),不支持typescript,不支持less、sass等。
- style标签不是必需标签。
- style内容会在组件加载的时候放入header中，全部被卸载后移除
- 不在require中配置vue时默认引用的vue位置为loader同目录下的vue.js和vue.min.js
- 调用require('vue')时,当location.search中含有debug字样时引入vue.js否则引入vue.min.js
- import 语法只在.vue文件中有效,js文件中请使用require
- 引用.vue文件时请带上文件名后缀，如：require("./xxx.vue")