怎么样使用require.js加载vue组件r.js合并压缩？ _ 路由器设置|192.168.1.1|无线路由器设置|192.168.0.1 - 路饭网
您的位置： >
> 阅读资讯：怎么样使用require.js加载vue组件r.js合并压缩？
怎么样使用require.js加载vue组件r.js合并压缩？
怎么样使用require.js加载vue组件r.js合并压缩？
vue.js 原本是学习vue组件
require.js 然后想到用require 加载
r.js 文件太多 合并
忽略部分文件及文件夹
一、先说vue 组件
先引入vue 再引入vue组件
Vue.extend({}) 定义组件 template data methods
ponent()，注册组件的标签，标签在html中是一个挂载点
new Vue() 进行实例化
index.html
// css引入 略
&div id=&header&&
&tq-header&&/tq-header&
&div id=&footer&&
&tq-footer&&/tq-footer&
&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 = {
name: &首页&,
url: &./index.html&,
name: &博客&,
name: &微博&,
url: &//profile?topnav=1&wvr=6&
name: &简书&,
url: &/users/633b8f612f8e/latest_articles&
name: &作品展示&,
url: &/mypage&
//定义组件 模板 数据 方法
var header = Vue.extend({
template: '&div class=&header&&\
&div class=&header-main&&\
&li v-for=&i in list&&\
&a v-bind:href=&i.url&&\
{{i.name}}\
&/div&',
data: function() {
methods: {
show: function() {
// 注册组件标签 &tq-header& 绑定组件
ponent('tq-header', header);
el: '#header'
tq-footer.js
// 定义组件内容，数据，方法
var footer = Vue.extend({
template: '&div class=&footer&&test footer test footer&/div&',
data: function() {
name: 'test name'
methods: {
show: function() {
alert(this.name);
// 注册组件的标签 &tq-footer& 绑定组件
ponent('tq-footer', footer);
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 制定各个模块的加载路径
require.config({
baseUrl:'lib',
'vue':{
exports:'vue'
'vue':'../lib/vue',
'header':'../vue-module/tq-header',
'footer':'../vue-module/tq-footer'
require(['vue','header','footer'],function(vue,header,footer){
这样主模块就会先引入vue ，在陆续引入vue组件文件
vue 组件用define() 包裹
由于子组件依赖vue，所以需要写好依赖，并将参数Vue传进去 如:
// 函数参数Vue 大写的V哦
// 这样内部的调用Vue.extend() 等方法就可以正常使用了
define(['vue'],function(Vue){
Vue.exxtend({...});
ponent(.....);
new Vue({....});
tq-header.js 和之前差不多就是加了define()
// 头部 header
//require define 函数 start
define(['vue'], function(Vue) {
var data = {
name: &首页&,
url: &./index.html&,
name: &博客&,
name: &微博&,
url: &//profile?topnav=1&wvr=6&
name: &简书&,
url: &/users/633b8f612f8e/latest_articles&
name: &作品展示&,
url: &/mypage&
//定义组件 模板 数据 方法
var header = Vue.extend({
template: '&div class=&header&&\
&div class=&header-main&&\
&li v-for=&i in list&&\
&a v-bind:href=&i.url&&\
{{i.name}}\
&/div&',
data: function() {
methods: {
show: function() {
// 注册组件标签 &tq-header& 绑定组件
ponent('tq-header', header);
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&/a&\
&/div&',
data: function() {
name: 'function'
methods: {
show: function() {
alert(this.name);
// 注册组件的标签 &tq-footer& 绑定组件
ponent('tq-footer', footer);
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 的配置
baseUrl:'../vue-module/',
'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&
以上所述是小编给大家介绍的require.js 加载 vue组件 r.js 合并压缩的实例，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对路饭网站的支持！
本文地址：
相关文章列表帖子55&实力值0 &资源币98 &推广值0 &
VUE材质怎么在MAYA中使用？
我是 新学生，才刚接触vue，但是很急用，真的想知道怎么把VUE里的山和材质，导入到MAYA里使用，如果有这样的 方法，希望各位大虾们帮我下下
&&模型，我基本会导出，导入，现在就是想知道能不能把材质一起导出导入
帖子55&实力值0 &资源币98 &推广值0 &
是没人会吗？？？ 还是VUE没有办法？？？
怎么没人 帮帮我，哪怕告我一声，VUE没这功能，我也就死心了
帖子360&实力值7 &资源币5624 &推广值2519 &
虽然没用过MAYA ，但是我想VUE跟MAYA结合起来应该和MAX差不多吧 ，你应该可以在MAYA里面直接操作VUE的。
帖子55&实力值0 &资源币98 &推广值0 &
&&小弟不才，直接操作是什么意思 ？
帖子360&实力值7 &资源币5624 &推广值2519 &
我没用过MAYA，VUE跟C4D，MAX结合后可以直接在C4D,MAX的工具栏上出现&&，就好像是两种软件的插件一样（巨大的插件），可以在C4D，MAX中直接打开并操作。我估计MAYA也是大同小异的。
[ 本帖最后由 kingbird 于
18:05 编辑 ]
下载次数:0
帖子55&实力值0 &资源币98 &推广值0 &
晕了，不会在MAYA中打开VUE。也找不到打开的方法啊。。。。。我再钻研钻研吧
帖子55&实力值0 &资源币98 &推广值0 &
&&vue6只支持MAYA8. VUE7在公司又装不上。哭了
帖子344&实力值0 &资源币658 &推广值0 &
为什么用MAYA?MAX不是比MAYA强多了吗?放着简单直观的不用,非要找罪啊楼主大哥
帖子970&实力值31 &资源币2871 &推广值0 &
俺不用maya。。。。。。。。
－－－－－－想要自杀，请做设计－－－－－
QQE的设计世界
帖子144&实力值13 &资源币646 &推广值0 &
答案是不能,在MAYA里似乎无法调用VUE的材质,不过通过接口可以在MAYA间接地使用VUE的材质,嗯先谈文件格式就不一样...MAYA里只能使用MR进行渲染VUE的场景,但是MR的材质格式好像是:mi格式.不过只要你知道一些材质上的特性.就可以通过导出贴图和模型在MAYA里进行加工.因为在VUE里一样具备颜色,凹凸,透明等等的参数.像ZB一样,一高模一低模算法线,搞置换,一样一样来做.MAYA的节点关系目前只比Houdini弱,不过也足够你调整出胜于VUE的材质.如果你只希望在MAYA打开VUE的场景,那请你用2008以上版本.8.0是MAYA被恶意收购后最失败的一个测试版本.这里我不建议在MAYA里通过接口制作VUE.因为往后你会遇见很多问题.比如如何输出动画?你怎么分层渲染?你怎么匹配摄像机?等等,虽然我都可以解决,但是非常麻烦,还有面数的问题.某处的一角,中景你可以尝试玩一下,但是一旦场景非常庞大,MAYA会无法打开文件.或者直接死掉.除非你所使用的是服务器.最后说一下,软件只不过是个工具而已,而且每个软件的开发都有各自目的,和存在的意义,实用价值.不要麻木的比较.
[ 本帖最后由 深川冥月 于
21:38 编辑 ]
[通过 QQ、MSN 分享给朋友]您还可以使用以下方式登录
当前位置：&>&&>&&>& > 详解VueJs异步动态加载块
详解VueJs异步动态加载块
首先定义组件为异步加载
define(['jquery','vue'],function($,Vue){
ponent('comp1',function(resolve){
require(['component/comp1'],resolve);
ponent('comp2',function(resolve){
require(['component/comp2'],resolve);
var b = new Vue({
el:"#app",
currentView:'comp1'
toggleView:function(){
console.log(this.currentView);
this.currentView = this.currentView=='comp1'?'comp2':'comp1';
具体可以参考vuejs的异步组件和动态组件。然后是html里面的代码
&div id="app"&
&keep-alive&&!-- 使用keep-alive可以让动态被切出去的组件继续保存在内存中（只是隐藏看不到），却回来之后会继续之前的状态和数据 --&
&component v-bind:is="currentView"&&/component&
&/keep-alive&
&button type="button" v-on:click="toggleView"&切换view&/button&
这种结构的好处是，页面初始化加载的时候只会加载需要的那个组件相关的内容，没切换到的那个组件不加载，使页面加载的速度加快。同时，每个组件加载过一次之后切换出再切回来不会重复加载相关内容和重复执行渲染
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持就爱阅读。
欢迎转载：
推荐：