index.html 入口页面html>

vue

  • `menu`.`name`

base.js requirejs 配置文件(function(){    requirejs.config({        baseUrl: "../js",        paths:{            "promise":"../dist/js/q",            "vue":"../dist/js/vue",            "vue.router":"../dist/js/vue-router.min",            "text":"../dist/js/text",            "css":"../dist/js/css.min"        },        waitSeconds: 15,        map:{        },        urlArgs: "version=" + Date.now(),        shim: {            promise:{                exports:"Q"            },            "vue": {                exports: "Vue"            },            "vue.router": {                exports: "VueRouter"            }        },        callback:function(){        },        deps:["vue","vue.router","promise","index"] // 默认要加载的js    });})();

index.js vue 入口define(["vue","vue.router","common/routes"], function(Vue,VueRouter,routes) {    Vue.use(VueRouter);    var data = {        menus: [            {path: "/account", name: "账户管理"},            {path: "/authorization", name: "权限管理"},            {path: "/member", name: "会员管理"}        ]    };    var router = new VueRouter({        routes:routes    });    var methods = {        switchPage:function(menu){            console.log(menu);            this.$router.push(menu.path);        }    };    var app = new Vue({        router:router,        el:"#app",        data:data,        methods:methods    });});

routes.js 路由配置define(["common/ResolveComponent"], function(ResolveComponent) {    var routes = [];    routes.push({        path: '/account',        component: ResolveComponent("account/account_index")    });    routes.push({        path: '/authorization',        component: ResolveComponent("authorization/authorization_index")    });    routes.push({        path: '/member',        component: ResolveComponent("member/member_index")    });    return routes;});

ResolveComponent.js  component懒加载工具define(["require","promise"], function(require,Q) {    var resolve = function(dependency){        return function(){            if(!(dependency instanceof Array)){                dependency = [dependency];            }            var deferred = Q.defer();            require(dependency,function(res){                deferred.resolve(res);            });            return deferred.promise;        }    };    return resolve;});

account_index.jsdefine(["text!../../pages/account/account_index.html","css!../../css/account/account_index.css"], function(template) {    var data = {        list:[            {id:"001",name:"小王"},            {id:"002",name:"大王"},            {id:"003",name:"老王"}        ]    };    var methods = {        say:function(item){            alert("我居然是"+item.name);        }    };    return {        methods:methods,        template:template,        data:function(){            return data        }    }});

vue require css html,requirejs vue vue.router简单框架相关推荐

  1. requirejs、vue、vuex、vue-route的结合使用,您认为可行吗?

    在五一节之前和一网友讨论前端技术时,对方提到vue.vue-route如果配合requirejs应用.当时的我没有想得很明白,也没能这位网友一个准确的回复,但我许诺于他五一研究后给他一个回复.本是一天 ...

  2. web前端知识点总结html,css,js,vue,react/面试题会经常问到

    一阶段 1.网络中使用最多的图片格式有哪些 gif 支持动画,只有全透明和不透明两种模式,只有256种颜色 jpg 采用有损压缩算法,体积较小,不支持透明,不支持动画 png 采用有损压缩算法,体积也 ...

  3. Javaweb后端开发必学(HTML、CSS、JS、Vue)

    Javaweb HTML.CSS CSS引入方式 < span >标签 CSS选择器: 页面布局 表格 表单标签 表单项 JavaScript JavaScript引入方式 JS语法 变量 ...

  4. 2021最新最全前端面试题(包含HTML、CSS、JavaScript、Vue、React、浏览器、算法与数据结构等)

    整理了一些前端面试题,希望对正在找前端工作的伙伴有用.本篇文章内容篇幅较大,主要针对初中级前端开发工程师. 篇幅过长,大家可以先点赞收藏以后慢慢看. 关于HTML 的title和alt属性有什么区别 ...

  5. vue打包上线部分css效果错乱,解决Vue打包上线之后部分CSS不生效的问题

    解决Vue打包上线之后部分CSS不生效的问题 首先注释掉webpack.prod.conf.js中下面的代码 new OptimizeCSSPlugin({ cssProcessorOptions: ...

  6. 前端面试题整理(vue/js/css)

    什么是盒子模型 把所有的网页元素都看成一个盒子,它具有content,padding,border,margin 四个属性,这就是盒子模型 盒子模型有两种形式:标准盒子模型,怪异盒子模型 标准模式,总 ...

  7. Vue中CSS模块化最佳实践

    Vue风格指南中介绍了单文件组件中的Style是必须要有作用域的,否则组件之间可能相互影响,造成难以调试. 在Vue Loader Scope CSS和Vue Loader CSS Modules两节 ...

  8. vue form表单数据提交与 router 按钮快速调用页面

    vue+element-ui 第一章 Form表单的校验与按钮调用页面(router跳转页面) 文章目录 vue+element-ui 前言 一.vue是什么? 二.表单验证 1.element-ui ...

  9. css html 实现刻度,vue语法css实现刻度尺

    更新记录 1.0.2(2021-04-09) 滑动小于半个格时,刻度线不会回弹问题 1.0.1(2021-03-28) vue语法css实现刻度尺 横向整数.小数点 竖向整数.小数点 查看更多 平台兼 ...

最新文章

  1. React 中报错:Unexpected reserved word ‘await‘
  2. 软件工程-第三次作业
  3. Linux:nice函数
  4. OpenGL生成的法线贴图并增加光照
  5. fiddler filters 使用(fiddler只显示指定请求,fiddler不显示指定请求,即filter请求过滤)转自:http://blog.csdn.net/notejs/article/
  6. 高等数理统计(part6)--统计决策问题
  7. java map 值排序_使用Java8 Stream API对Map类型按照键或值进行排序
  8. 图像处理之形态学梯度计算
  9. 随便玩玩Django--输入网址生成二维码
  10. c语言程序设计 ncre,全国计算机二级C语言程序设计题((100%全中必过).doc
  11. Java实时获取基金收益项目源码分享
  12. 参考文献中英文人名_英文人名的缩写和参考文献写法
  13. 详解CAD软件2023功能更新-7个随附专业化工具组合
  14. 精灵随着鼠标的移动而移动
  15. 微信小程序游戏开发│智力测试游戏——button版
  16. 电容-贴片陶瓷电容的NPO、C0G、X7R、X5R、Y5V、Z5U
  17. 浮云E绘图之多点连线源码
  18. 软件测试术语 - 全面质量管理
  19. 计算机二级offic有笔试吗,计算机二级office考试内容 好考吗
  20. unity七日签到系统

热门文章

  1. C#语言连接Mysql数据库实现增删改查
  2. 逆波兰计算器android源码简书,计算器的核心算法-JavaScript实现(逆波兰表达式)...
  3. 计算机的配件知识,一台电脑需要多少配件组成,硬件知识介绍
  4. gazebo入门_Gazebo仿真控制中,有哪些你不知道的秘密?
  5. 树莓派删除python2.7设置python3.5
  6. docker下载慢,卡顿解决办法——免费安装人人都有的docker加速器
  7. android 设置网络超时时间设置,Android:AndroidHttpClient-如何设置超时时间?
  8. php 正则特殊字符转义,php 正则特殊字符转义的方法
  9. 使用MailMessage.AlternateViews时遇到的小问题
  10. 多线程之死锁就是这么简单