vue require css html,requirejs vue vue.router简单框架
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简单框架相关推荐
- requirejs、vue、vuex、vue-route的结合使用,您认为可行吗?
在五一节之前和一网友讨论前端技术时,对方提到vue.vue-route如果配合requirejs应用.当时的我没有想得很明白,也没能这位网友一个准确的回复,但我许诺于他五一研究后给他一个回复.本是一天 ...
- web前端知识点总结html,css,js,vue,react/面试题会经常问到
一阶段 1.网络中使用最多的图片格式有哪些 gif 支持动画,只有全透明和不透明两种模式,只有256种颜色 jpg 采用有损压缩算法,体积较小,不支持透明,不支持动画 png 采用有损压缩算法,体积也 ...
- Javaweb后端开发必学(HTML、CSS、JS、Vue)
Javaweb HTML.CSS CSS引入方式 < span >标签 CSS选择器: 页面布局 表格 表单标签 表单项 JavaScript JavaScript引入方式 JS语法 变量 ...
- 2021最新最全前端面试题(包含HTML、CSS、JavaScript、Vue、React、浏览器、算法与数据结构等)
整理了一些前端面试题,希望对正在找前端工作的伙伴有用.本篇文章内容篇幅较大,主要针对初中级前端开发工程师. 篇幅过长,大家可以先点赞收藏以后慢慢看. 关于HTML 的title和alt属性有什么区别 ...
- vue打包上线部分css效果错乱,解决Vue打包上线之后部分CSS不生效的问题
解决Vue打包上线之后部分CSS不生效的问题 首先注释掉webpack.prod.conf.js中下面的代码 new OptimizeCSSPlugin({ cssProcessorOptions: ...
- 前端面试题整理(vue/js/css)
什么是盒子模型 把所有的网页元素都看成一个盒子,它具有content,padding,border,margin 四个属性,这就是盒子模型 盒子模型有两种形式:标准盒子模型,怪异盒子模型 标准模式,总 ...
- Vue中CSS模块化最佳实践
Vue风格指南中介绍了单文件组件中的Style是必须要有作用域的,否则组件之间可能相互影响,造成难以调试. 在Vue Loader Scope CSS和Vue Loader CSS Modules两节 ...
- vue form表单数据提交与 router 按钮快速调用页面
vue+element-ui 第一章 Form表单的校验与按钮调用页面(router跳转页面) 文章目录 vue+element-ui 前言 一.vue是什么? 二.表单验证 1.element-ui ...
- css html 实现刻度,vue语法css实现刻度尺
更新记录 1.0.2(2021-04-09) 滑动小于半个格时,刻度线不会回弹问题 1.0.1(2021-03-28) vue语法css实现刻度尺 横向整数.小数点 竖向整数.小数点 查看更多 平台兼 ...
最新文章
- React 中报错:Unexpected reserved word ‘await‘
- 软件工程-第三次作业
- Linux:nice函数
- OpenGL生成的法线贴图并增加光照
- fiddler filters 使用(fiddler只显示指定请求,fiddler不显示指定请求,即filter请求过滤)转自:http://blog.csdn.net/notejs/article/
- 高等数理统计(part6)--统计决策问题
- java map 值排序_使用Java8 Stream API对Map类型按照键或值进行排序
- 图像处理之形态学梯度计算
- 随便玩玩Django--输入网址生成二维码
- c语言程序设计 ncre,全国计算机二级C语言程序设计题((100%全中必过).doc
- Java实时获取基金收益项目源码分享
- 参考文献中英文人名_英文人名的缩写和参考文献写法
- 详解CAD软件2023功能更新-7个随附专业化工具组合
- 精灵随着鼠标的移动而移动
- 微信小程序游戏开发│智力测试游戏——button版
- 电容-贴片陶瓷电容的NPO、C0G、X7R、X5R、Y5V、Z5U
- 浮云E绘图之多点连线源码
- 软件测试术语 - 全面质量管理
- 计算机二级offic有笔试吗,计算机二级office考试内容 好考吗
- unity七日签到系统
热门文章
- C#语言连接Mysql数据库实现增删改查
- 逆波兰计算器android源码简书,计算器的核心算法-JavaScript实现(逆波兰表达式)...
- 计算机的配件知识,一台电脑需要多少配件组成,硬件知识介绍
- gazebo入门_Gazebo仿真控制中,有哪些你不知道的秘密?
- 树莓派删除python2.7设置python3.5
- docker下载慢,卡顿解决办法——免费安装人人都有的docker加速器
- android 设置网络超时时间设置,Android:AndroidHttpClient-如何设置超时时间?
- php 正则特殊字符转义,php 正则特殊字符转义的方法
- 使用MailMessage.AlternateViews时遇到的小问题
- 多线程之死锁就是这么简单