vue组件

require.js 加载 vue组件 r.js 合并压缩

require.js 参考阮一峰 Javascript模块化编程(三):require.js的用法
r.js 合并压缩 参考司徒正美 r.js合并实践

准备:
  • vue.js 原本是学习vue组件
  • require.js 然后想到用require 加载
  • r.js 文件太多 合并
文件目录

忽略部分文件及文件夹

一、先说vue 组件
  • 先引入vue 再引入vue组件
  • Vue.extend({}) 定义组件 template data methods
  • Vue.component(),注册组件的标签,标签在html中是一个挂载点
  • new Vue() 进行实例化

index.html

// css引入 略

 <div id="header">
        <tq-header></tq-header>
    </div>

<div id="footer">
    <tq-footer></tq-footer>
</div>

<script src="lib/vue.js"></script>
<script src="/vue-module/tq-header.js"></script>
<script src="/vue-module/tq-footer.js"></script>

tq-header.js

    //数据
    var data = {
        list: [{
            name: "首页",
            url: "./index.html",
        }, {
            name: "博客",
            url: "http://taoquns.com"
        }, {
            name: "微博",
            url: "http://weibo.com/1654438844/profile?topnav=1&wvr=6"
        }, {
            name: "简书",
            url: "http://www.jianshu.com/users/633b8f612f8e/latest_articles"
        }, {
            name: "作品展示",
            url: "http://taoquns.com/mypage"
        }],
    };

    //定义组件 模板 数据 方法
    var header = Vue.extend({
        template:  ‘<div class="header">                        <div class="header-main">                            <ul>                                <li v-for="i in list">                                    <a v-bind:href="i.url">                                        {{i.name}}                                    </a>                                </li>                            </ul>                        </div>                    </div>‘,

        data: function() {
            return data;
        },

        methods: {
            show: function() {

            }
        },
    });

    // 注册组件标签 <tq-header> 绑定组件
    Vue.component(‘tq-header‘, header);

    //实例化
    new Vue({
        el: ‘#header‘
    });

tq-footer.js

    // 定义组件内容,数据,方法
    var footer = Vue.extend({
       //模板
        template: ‘<div class="footer">test footer test footer</div>‘,
        //数据
        data: function() {
            return {
                name: ‘test name‘
            }
        },
        //方法
        methods: {
            show: function() {
                alert(this.name);
            }
        }
    });

    // 注册组件的标签 <tq-footer> 绑定组件
    Vue.component(‘tq-footer‘, footer);

    //实例化
    new Vue({
        el: ‘#footer‘,
    });

    //vue组件结束
二、使用require 加载 vue 组件
  • 引入require.js
  • data-main 制定主模块,负责引入哪些文件
  • 子组件 需要用 define()函数包裹 见例子

将vue 和vue组件的引入注释掉,引入require.js data-main 指定主模块文件 js文件夹下的 script.js

    <script src="lib/require.js" data-main="js/script.js"></script>
    <!-- 注释 -->
    <!-- <script src="./lib/vue.js"></script> -->
    <!-- <script src="./vue-module/tq-header.js"></script> -->
    <!-- <script src="./vue-module/tq-footer.js"></script> -->
    <!-- <script src="vue-module/tq-img-view.js"></script> -->

配置script.js文件 看阮一峰的require.js

  • baseUrl 默认路径 基目录
  • shim 非AMD规范的文件
  • paths 制定各个模块的加载路径

script.js

require.config({
    baseUrl:‘lib‘,
    shim:{
        ‘vue‘:{
            exports:‘vue‘
        }
    },
    paths:{
        ‘vue‘:‘../lib/vue‘,
        ‘header‘:‘../vue-module/tq-header‘,
        ‘footer‘:‘../vue-module/tq-footer‘
    },
});

require([‘vue‘,‘header‘,‘footer‘],function(vue,header,footer){

});

这样主模块就依赖三个组件,异步加载这个三个文件

vue 组件用define() 包裹
由于子组件依赖vue,所以需要写好依赖,并将参数Vue传进去 如:

// 函数参数Vue 大写的V哦
// 这样内部的调用Vue.extend() 等方法就可以正常使用了
define([‘vue‘],function(Vue){
    Vue.exxtend({...});
    Vue.component(.....);
    new Vue({....});

});

tq-header.js 和之前差不多就是加了define()

// 头部 header

//require define 函数 start
define([‘vue‘], function(Vue) {

    //数据
    var data = {
        list: [{
            name: "首页",
            url: "./index.html",
        }, {
            name: "博客",
            url: "http://taoquns.com"
        }, {
            name: "微博",
            url: "http://weibo.com/1654438844/profile?topnav=1&wvr=6"
        }, {
            name: "简书",
            url: "http://www.jianshu.com/users/633b8f612f8e/latest_articles"
        }, {
            name: "作品展示",
            url: "http://taoquns.com/mypage"
        }],
    };

    //定义组件 模板 数据 方法
    var header = Vue.extend({
        template: ‘<div class="header">                        <div class="header-main">                            <ul>                                <li v-for="i in list">                                    <a v-bind:href="i.url">                                        {{i.name}}                                    </a>                                </li>                            </ul>                        </div>                    </div>‘,

        data: function() {
            return data;
        },

        methods: {
            show: function() {

            }
        },
    });

    // 注册组件标签 <tq-header> 绑定组件
    Vue.component(‘tq-header‘, header);

    //实例化
    new Vue({
        el: ‘#header‘
    });
});
//require define 函数 end

tq-footer.js

// 尾部 footer
// require.js define() 函数包裹
define([‘vue‘], function(Vue) {

    //vue 组件
    /*
     * template html模板文件
     * data 数据 返回函数中返回对象
     * methods 方法集合
     */

    // 定义组件内容,数据,方法
    var footer = Vue.extend({

        template: ‘<div class="footer">        <div class="footer-main">            <p>taoqun个人博客 | 记录 | 展示 | 使用vue                <a href="mailto:[email protected]">联系我:email</a>            </p>        </div>    </div>‘,

        data: function() {
            return {
                name: ‘function‘
            }
        },

        methods: {
            show: function() {
                alert(this.name);
            }
        }

    });

    // 注册组件的标签 <tq-footer> 绑定组件
    Vue.component(‘tq-footer‘, footer);

    //实例化
    new Vue({
        el: ‘#footer‘,
    });

    //vue组件结束

});
//define end

require 方法 预览成功

三、r.js 合并压缩

使用require 的方式 会加载很多的js文件,我们都知道这样会产生对服务器的多次请求,优化性能第一就是减少http请求次数

简单的说下r.js
r.js是requireJS的优化(Optimizer)工具,可以实现前端文件的压缩与合并,在requireJS异步按需加载的基础上进一步提供前端优化,减小前端文件大小、减少对服务器的文件请求。

就是写一个配置文件,将页面需要的js组件文件合并到一个,然后require.js 直接引用合并压缩后的文件就可以了,只需要加载一个文件。

准备

  • r.js 下载一个r.js文件放到目录中
  • node.js 本地需要安装node.js

这里我们将r.js 放到js文件中,建立一个build.js 配置文件

然后说下build.js 的配置
build.js

({
    baseUrl:‘../vue-module/‘,
    paths:{
        ‘header‘:‘tq-header‘,
        ‘footer‘:‘tq-footer‘,
        ‘imgview‘:‘tq-img-view‘,
        ‘vue‘:‘../lib/vue‘,
    },
    name:‘script‘,
    out:‘main.js‘
})

我这里比较简单

  • baseUrl 设置基目录
  • paths 模块的引用
  • name 主模块的引用
  • out 输入位置

然后控制台 定位到r.js目录下 node r.js -o build.js 命令进行合并压缩,当目录下出现main.js 文件时,表示成功了。

然后将 index.html 中 data-main 原来的script.js改成 main.js 打开就好了

 <script src="lib/require.js" data-main="js/main.js"></script>

分类: Javascript

时间: 2024-10-09 19:58:51

vue组件的相关文章

关于vue组件的一个小结

用vue进行开发到目前为止也有将近一年的时间了,在项目技术选型的时候隔壁组选 react的时候我们坚持使用vue作为前端的开发框架.虽然两者思想上的差异不大,但是vue的语法在代码的可读性以及后期的维护成本更加的适合,而且最近看到Apache对react的相关许可限制:这里不讨论react和vue的对比哪个好,技术框架没有最好的,只有适合项目才是最好的. 进入主题....... 组件,是vue的核心之一. 我们可以把页面各个子模块看成一个组件,可以独立拆分出来.这样不仅维护变得简单了,而且代码复

Vue组件开发分享

在开始本文之前,你可能需要先了解以下相关内容: Vue.js  一款高性能轻量化的MVVM框架 Webpack  前端模块化代码构建工具 Vue组件介绍 基于vue.js高效的双向数据绑定特性,让我们在开发高可用组件时可以更加专注于数据逻辑开发: 忘记DOM操作,忘记事件绑定,让开发的专注力集中于数据上: 1.定义需要使用的数据及类型 2.在合适的时机更新数据 3.在模板上绑定数据与视图的映射关系 4.开放对外调用接口 代码 https://github.com/xiaoyunchen/vue-

vue组件最佳实践

看了老外的一篇关于组件开发的建议(强烈建议阅读英文原版),感觉不错翻译一下加深理解. 这篇文章制定一个统一的规则来开发你的vue程序,以至于达到一下目的.1.让开发者和开发团队更容易发现一些事情.2.让你更好的利用你的IDE.3.让你更加容易的使用打包工具4.让你的代码更容易碎片化以达到复用的目的. 基于模块开发 用一些功能单一的小模块来组织你的应用 Why? 对于你自己和你团队的人来说较小的模块更容易看懂 维护 复用和调试. How? 每个组件应该保持单一 独立 可复用 可测试把你很大的组件拆

vue 组件属性props,特性驼峰命名,连接线使用

今天在学习vue的时候碰到了一个有趣的问题 是这样的,先来个话题引入,后面会用到 var myname={ 'first-name':'9', 'last-name':'l o n g' } console.log(myname.first-name); console.log(myname['first-name']); 打印出来是  NaN  9 解释下,之所以没有前面没有打印出来9,是因为程序走的时候,把我们认为的英文连接符当做减号看待,myname.first是undefined,nam

vue组件的使用1

创建vue组件,看了别人的教程 http://www.cnblogs.com/keepfool/p/5625583.html,自己也总结一下 一.’创建vue组件有四个步骤: 全局组件 1.用Vue.extend()构建一个你需要渲染的html; 2.调用Vue.component('Html里自己创建的标签',1步骤中创建的构造器名称); 3.创建一个vue实例,让其他的挂载在其标签下面; 4.html中写自己要创建的标签 <div id="app1"> <my-c

vue组件的引用:

本文是基于vue-cli脚手架的基础上对vue组件的引用做简单介绍,关于vue-cli脚手架,请见:vue脚手架的安装流程(vue-cli). 在src文件夹下创建components文件夹,并在其下面创建Home.vue和List.vue两个文件: 在App.vue中引入Home.vue和List.vue两个组件: 这样Home.vue和List.vue两个组件就被引入到App.vue组件里面了,效果图如下: 注意:引入组件的component是要带s的,而配置路由的component不要带s

JS组件系列——又一款MVVM组件:Vue(二:构建自己的Vue组件)

阅读目录 一.为什么组件很重要 二.Vue里面的组件基础知识 1.组件的概念 2.组件原理 3.组件使用 三.封装自己的Component 1.使用Component封装bootstrapTable 2.封装select 3.查看其他Vue框架源码 四.总结 正文 前言:转眼距离上篇 JS组件系列--又一款MVVM组件:Vue(一:30分钟搞定前端增删改查) 已有好几个月了,今天打算将它捡起来,发现好久不用,Vue相关技术点都生疏不少.经过这几个月的时间,Vue的发展也是异常迅猛,不过这好像和博

webpack单独构建scss文件与.vue组件里构建scss的一个坑

在入口main.js里构建scss是通过引入模块的方式 import './assets/_reset.scss'; import './assets/_flex.scss'; import './assets/_functions.scss'; 在.vue组件里是单独构建的 <style lang="scss" scoped> img { width: rem(300px); } #product, .gallery, .detail { width: rem(750px

Vue组件基础用法

前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需,使用不同的组件来拼接页面.这种开发模式使前端页面易于扩展,且灵活性高,而且组件之间也实现了解耦.本文将详细介绍Vue组件基础用法 概述 组件是一个自定义元素或称为一个模块,包括所需的模板.逻辑和样式.在HTML模板中,组件以一个自定义标签的形式存在,起到占位符的功能.通过Vue.js的声明式渲染后,