# jQuery.Vue.js

**Repository Path**: mettmac/jQuery.Vue.js

## Basic Information

- **Project Name**: jQuery.Vue.js
- **Description**: 基于jQ实现免编译开发Vue项目。
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: https://gitee.com/haimadongli001/jQuery.Vue.js
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2020-11-23
- **Last Updated**: 2021-11-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# jQuery.Vue.js

#### 介绍

基于jQ实现免编译开发Vue项目。

jQuery.Vue.js 是一个jQ插件，定位于开发小型web项目，在不需要使用node、webpack等前端工具的情况下，直接干。

项目的主要开发思路参(chao)考(xi) 藤之内 的 [Vue-rap](https://gitee.com/tengzhinei/Vue-rap) ，在此对Vue-rap项目表示万分感谢！

jQuery.Vue.js 支持 Vue 单页组件，并提供基于hash的简单路由。



### 开始使用


1. 引入jQuery及jQuery.Vue.js

```
<script src="../static/jquery-3.5.1.js"></script>
<script src="../static/jQuery.Vue.js"></script>
```

2. 在html页面增加app节点

```
    <div id="app">
        <!--childView是固定值-->
        <component v-bind:is="childView"></component>
    </div>
```

3. 在js代码中初始化Vue

```
    $.Vue({
        el: '#app', // Vue组件的容器节点，默认值为'#app'，
        debug: true, // 是否开启debug模式，如果开启，则会在console中输出jQuery.Vue.js执行流程日志
        version: Date.now(),  // 应用版本，在请求js、css、vue等文件时，会附加上?v=version
        default_page: 'pages/main', // 默认页面值，必须指定，具体值参考路由说明
        hide_default: false, // 是否在hash地址中隐藏default_page
        base_url: '', // 项目base路径，当指定base_url时，会基于base_url去请求文件资源
        css: [
            'static/libs/Vant/index.css', // 加载全局css文件
        ],
        js: [
            'static/js/Vue/vue.2.6.11.min.js', // 必须加载Vue
            'static/libs/Vant/vant.js', // 加载其他全局js文件
        ],
        ready: function() {
            // 加载css、js文件完成后，执行下面代码实例化Vue
            window.APP = $.Vue.app({
                el: '#app',
                data: {}
            });
        }
    })
```


### 路由说明


1. 地址规则

jQuery.Vue.js 仅支持hash路由，基本功能：


> https://www.xxx.com/#main 对应 https://www.xxx.com/main.vue

> https://www.xxx.com/#pages/main 对应 https://www.xxx.com/pages/main.vue

> https://www.xxx.com/#pages/main/index 对应 https://www.xxx.com/pages/main/index.vue

目前仅支持最多三级目录，系统会根据hash地址的参数个数进行判断是二级或三级，多余参数会以key => value 方式保存到 router中，例如访问：

> https://www.xxx.com/#pages/main/app/test

系统将请求https://www.xxx.com/pages/main.vue 文件，并将this.router.query设置为{app:'test'}

2. 跳转指令

v-link指令可以跳转到对应链接页面，等同调用$.vue.go(url) ——注意，提供的链接必须是表达式或字符串。

```
<button v-link="page_temp_var">这是表达式，page_temp_var是一个变量</button>
<button v-link="'pages/temp'">这是字符串，在双引号里面加上了单引号</button>
```

v-link.back ，控制浏览器页面后退，等同调用$.vue.back()

```
<button v-link.back >后退</button>
```

### 单组件文件

jQuery.Vue.js 的单文件组件跟vue官方近似，参考代码：

```
<template>
    <!--模板文件 -->
    <div class="index">
        <!--使用组件 -->
        <commenu></commenu>
    </div>
</template>
<script>
import commenu from 'menu.vue'
export default {
    components: {
        commenu
    },
    data: function() {
        return {
        }
    },
    mounted: function(){
    },
    methods: {
    }
}
</script>
<style>
</style>
```

引入组件有两种方式：

- 将第三方UI库放在配置的js数组里，直接加载引入，注册成全局组件；

- 在单组件文件里，通过 import commenu from 'menu.vue' 语句引入，jQuery.Vue.js会根据路径寻找对应的组件。


### 其他补充

- jQuery.Vue.js 参考 Vue-rap，进行开发，实际上是对Vue-rap重构并做减法，以方便迷你型web项目的开发，功能上没有Vue-rap多、没有Vue-rap强。

- 使用HTML模板来开发Vue的话，引入一些第三方库(例如ant-design-vue)时，可能会遇到驼峰事件兼容问题，jQuery.Vue.js已内置[vue-dash-event](http://https://github.com/vueComponent/vue-dash-event) 来处理。