前端发展技术不断更新，需要学习的地方还很多，一个人最可怕的不是有多成功，而是不断的学习，作为一名技术人员，要不断学习新的事物，不断提升自己，才是发展之路。
写博客不是给别看的而是给自己看的
有幸之前的项目使用过一些不错的框架 今天简单描述一下vue和require的使用，仅入门级的参考。

Vue

• Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。
• Vue 只关注视图层， 采用自底向上增量开发的设计。
• Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
• Vue 学习起来非常简单，本教程基于 Vue 2.1.8 版本测试。

require

• RequireJS是一个非常小巧的JavaScript模块载入框架，是AMD规范最好的实现者之一。最新版本的RequireJS压缩后只有14K，堪称非常轻量。它还同时可以和其他的框架协同工作，使用RequireJS必将使您的前端代码质量得以提升。

1首先布置使用require

使用requirejs，我们只需要导入requirejs即可，不需要显式导入其它的js库，因为这个工作会交给requirejs来做。

<script type="text/javascript" data-main="./static/js/index.js" src="./static/plugins/require.js"></script>

同时data-main 是告诉requirejs：载入真正的入口文件。它一般用来对requirejs进行配置，并且载入真正的程序模块。
看看入口文件index.js的配置：

requirejs.config({
    baseUrl: './static/',
    paths: {
        "jquery": "plugins/jquery-1.8.3.min",
        "bootstrap": "plugins/boostrapv3/js/bootstrap.min",
    },
    shim: {
        "bootstrap": {
            deps: ["jquery"]
        },
    },
});

• config 该函数用于配置RequireJS.
  require.config配置参数选项
  baseUrl ：用于加载模块的根路径。
  paths： 用于映射不存在根路径下面的模块路径。
  shims： 配置在脚本/模块外面并没有使用RequireJS的函数依赖并且初始化函数。
  RequireJS定义，但是你还是想通过RequireJS来使用它，那么你就需要在配置中把它定义为一个shim。
  deps:加载依赖关系数组

  define: 定义一个模块

define(function(require){
    var Vue  = require('../static/plugins/Vue.min.js');
    var public  = require('../static/js/public.js');
    var cookie  = require('../static/plugins/jquery.cookie.min.js');
    var login_outUrl = public.urlPath.loginUrl;
    });

另外还可以把 require 当作依赖的模块，然后调用它的方法：

require(["./static/plugins/Vue.min.js","./js/navbar"],function (vue,navBar) {
    navBar.fnInit("active");
});

2 使用Vue

• 这里我们再require的data-main中配置vue

paths: {
        "jquery": "plugins/jquery-1.8.3.min",
        "Vue":"plugins/Vue.min",
    },

• 在引用vue的require中使用

require(["Vue","./js/navbar"],function (vue,navBar) {
    navBar.fnInit("active");
});

如果项目中使用webpack，nodeJs管理项目，与Vue一起使用会更好的前端开发体验，由于目前还没设计，这里不做过多说明 ， 但是不推荐新手直接使用 vue-cli，尤其是在你还不熟悉基于 Node.js 的构建工具时。

• 在页面地方使用Vue模板语法，Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统，

 <ul id="side">
            <li v-for="item in items" :data-type="item.type">
                <span class="iconfont" :id="item.type"></span>
                <div class="tooltip parts-li-tip">
                    <div class="tooltip-inner" >
                        <div >
                            <h4>{{ item.message }}</h4>
                        </div >
                    </div>
                </div>
            </li>
            <li data-type="QRcode">
                <span class="iconfont"></span>
                <div class="tooltip parts-li-tip">
                    <div class="tooltip-inner">
                        <img src="./static/img/firstPage/weixin.jpg"></div>
                </div>
            </li>
            <li data-type="Top" v-on:click="goTop()">
                <span class="iconfont"></span>
            </li>
        </ul>

• Vue数据处理

new Vue({
            el : '#side',
            data: {
                items: [
                    { message: '客服电话:15389056016',img: './static/img/online/phone.png',type: 'Phone' },
                    { message: 'QQ:165639134',img: './static/img/online/qq.png',type: 'QQ' },
                    { message: '淘宝官方店',img: './static/img/online/taobao.png',type: 'WhatsApp' },
                ],
            },
            methods: {
                fnSideTarget: function (message) {
                    alert(message)
                },
                goTop:function () {
                    $('html,body').animate({'scrollTop':0},600);
                }
            }
        });

这里只是一个简单项目使用的例子。。。。