使用requirejs+vue 打造 无需编译发布便捷修改调整的模块开发方案 (一)
前言
不知道大家有没有这种感觉,现在流行的很多前端技术,基本上都基于webpack编译,当然不是说这种方案不好,在标准的开发流程运行中,这种方式其实也挺不错,管理方便,代码统一。
痛点:项目不是单独针对一个用户,多个用户都略有细微变化,又不需要升级维护,实际调整对应界面即可解决问题。此时,如果用webpack方式,就略嫌麻烦,本来可以直接修改就完事的,还需要再编译,而且也许另一个需求不同还要还原到前面某个状态再调整。
于是我想有没有什么办法可以既可以赶上潮流实现程序的前后端分离,又可以用上流行的vue技术。经过和我心中的大神+导师+好友的沟通(实则我全程围观),有了这套requirejs+vue实现的 模块开发方案。
本方案主框架基本是大神操刀,我纯属记录使用,所以有些地方也是一知半解,尽量表达清楚,也希望有和我同样需求的各位朋友一起共同学习交流。
使用到的技术及插件
requirejs (主要的模块话方案的核心元素) 官网地址:https://requirejs.org/ (这个我基本不了解,就死记了固定格式不知道什么时候才能算是掌握)
vue (javascript框架,本文实现前后端分离的重要组成部分) 官网地址:https://cn.vuejs.org/
View-UI (原名 iView,基于vue的一套 UI框架,提供了栅格化,按钮,表单,表格,弹窗等UI的整套方案,基本够用) 官网地址:https://www.iviewui.com/ (这个貌似近两年才改名,好像是创作人开了公司专门来维护,还出了pro版本,当然还有可以免费使用的,多谢大神贡献)
使用注意事项
因为使用的技术都是前端较新技术,所以浏览器兼容基本无视IE,谷歌等浏览器也不易太低。如果需要使用请自行查找解决方案。
哎,之前没写过博客,想写一篇博客真的是不容易,大半天了还没进正题,下面开始正题:
1、框架基本结构
2、入口页面index.html
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="renderer" content="webkit">
<title>requirejs+vue 管理框架</title>
<script src="libs/require/require.min.js" data-main="src/app"></script>
</head> <body>
<div id="root">
<router-view></router-view>
</div>
</body> </html>
入口页面index.html 的代码
主要代码:
3、app.js配置及启动代码
define([], function () { // 配置require
requirejs.config({
paths: { // 路径别名, 配置路径,简化后续代码引入时写的路径,可以直接用这里配置的别名
// 三方库
'vue': '../libs/vue/vue',
'vue-router': '../libs/vue-router/vue-router',
'axios': '../libs/axios/axios.min',
'iview': '../libs/vue-iview/iview.min', // require 插件
'text': '../libs/require-plugins/text',
'css': '../libs/require-plugins/css.min', // 自己的公用文件
'http': './utils/http',
'user': './utils/user', // 自己的公用组件
'com-page-header': './components/page-header/index'
},
shim: { // 垫片,配置依赖关系
'vue-router': ['vue'], // 加载vue-router时,会自动引入vue,如果vue之前没引入过的话。
'iview': ['vue'],
}
}) // 引入模块,也就是其他文件
require([
'vue', 'vue-router', './routes', 'user', 'iview', 'css!../libs/vue-iview/iview.css',
'css!./app.css'
], function (Vue, VueRouter, routes, user, iview) { // 上面的 Vue参数是从 上面数组 'vue' 里面来的。这个地方是按顺序的。顺序不能错。 // 下面就是 启动一个 vue实例。 let router = new VueRouter({
routes
}) Vue.use(VueRouter)
Vue.use(iview) window.app = new Vue({
router,
}).$mount('#root') if (!user.isLogin()) {
router.push({ path: '/login' })
} }) })
因为我打算打造的是后台管理,所以直接引入了第三方库,vue,vue-router, axios, iview,(这个iView要特别说一下,可以换成其他你习惯的UI,貌似必须要使用这种别名方式才可以使用)
通过上述两个文件,基本上大致确定了程序的框架,通过index.html引入app.js,引入各种需要模块,别名配置,以及设置各个模块的依赖关系,
最后通过require启动vue,挂在路由到#root节点,判断如果没有登陆跳转到登陆入口
这里因为采用了vue的路由,所以后续链接配置主要依附于路由设置
4、routes路由配置
define([
], function () { // 路由文件,申明路由,哪些页面的。 let loader = (deps) => {
return () => {
if (!Array.isArray(deps)) {
deps = [deps]
}
return new Promise((resolve, reject) => {
require(deps, function (res) {
resolve(res)
})
})
}
} var routes = [
{ path: '/login', component: loader('./pages/login') }, { path: '/test', component: loader('./pages/test') },
{
path: '/',
component: loader('./pages/layout/index'),
children: [
{ path: '/home', component: loader('./pages/home/index') },
{ path: '/user-list', component: loader('./pages/user/user-list') } ]
}, ] return routes })
如上文我们新增test路由
在./pages/目录新增test.js文件内容如下
define([ ],function(){
return{
template:"<div>新增一个test页面{{name}}</div>",
data: function() {
return {
name: "hello world"
}
},
created:function(){
//this.$Message.info('This is a info tip'); }
}
});
其中return 返回的对象使用的是vue语法,返回模板,及内容。展示效果如下图所示
至此,基础的框架完成,剩下的内容看自己发挥完善了!
整个项目下载 demo
使用requirejs+vue 打造 无需编译发布便捷修改调整的模块开发方案 (一)的更多相关文章
- .NET代码自动编译发布
.NET代码自动编译发布 因本人一直使用.NET开发,在做项目的时候,每次都要涉及到各个环境的部署问题,手工操作容易出错,并且重复劳动多,所以一直在寻找一个能实现自动化部署的方案. 废话不多讲,先 ...
- 无需编译、快速生成 Vue 风格的文档网站
无需编译.快速生成 Vue 风格的文档网站 https://docsify.js.org/#/#coverpage https://github.com/QingWei-Li/docsify/
- vue入门之编译项目
好记性不如烂笔头,最近又开始学习vue了,编译的过程中遇到几个小坑,特此一记. 首先说一下vue项目如何编译,其实很简单,cd到项目文件夹,然后执行命令: npm run bulid 不过np ...
- 教程Xcode 4下编译发布与提交App到AppStore
地址:http://www.cocoachina.com/bbs/simple/?t55825.html 教程Xcode 4下编译发布与提交App到AppStore 先说一下这个是我在网上看到的一个帖 ...
- ASP.Net网站程序在编译发布部署后的后期修改
ASP.Net网站程序在发布部署后的后期修改 作者:东篱南山 这里说的后期修改是指网站编译发布并部署好之后,对程序进行的修改,即在不能更改现有代码的情况下,更改页面的显示或是更改业务逻辑.一般是在程序 ...
- requirejs + vue 项目搭建2
上篇是年后的项目搭建的,时间比较仓促,感觉有点low 1.gulp-vue 文件对公用js的有依赖,以后别的同事拿去搭其他项目,估计会被喷 2.不支持vue-loader一样写模版语言和es6语法 最 ...
- vue.js使用webpack发布,部署到服务器上之后在浏览器中可以查看到vue文件源码
webpack+vue 2.0打包发布之后,将发布的文件部署到服务器中之后,浏览器中访问的时候会出现一个webpack文件夹,里边会显示vue文件源码 如果不想让vue源文件显示出来,可以在confi ...
- Django REST framework+Vue 打造生鲜超市(三)
四.xadmin后台管理 4.1.xadmin添加富文本插件 (1)xadmin/plugins文件夹下新建文件ueditor.py 代码如下: # xadmin/plugins/ueditor.py ...
- Django REST framework+Vue 打造生鲜超市(四)
五.商品列表页 5.1.django的view实现商品列表页 (1)goods/view_base.py 在goods文件夹下面新建view_base.py,为了区分django和django res ...
随机推荐
- 【nodejs代理服务器四】代理服务器增加频繁访问的ip加入黑名单
问题 渗透者在扫站的时候会频繁请求,我们可以做一些策略来封堵这些频繁访问的ip,把ip加入黑名单. 策略 2秒之内访问次数超过100,加入黑名单. 实现思路 初次访问把访问Ip作为键,访问ip,时间, ...
- 二:MySQL系列之SQL基本操作(二)
本篇主要介绍SOL语句的基本操作,主要有分为 连接数据库,创建数据库.创建数据表.添加数据记录,基本的查询功能等操作. 一.针对数据库的操作 -- 1.连接数据库 mysql -uroot -p my ...
- Linux之mysql的安装与,主从设置
一,MYSQL(mariadb) MariaDB数据库管理系统是MySQL的一个分支,主要由开源社区在维护,采用GPL授权许可. 开发这个分支的原因之一是:甲骨文公司收购了MySQL后,有将MySQL ...
- jar命令详解
原文链接:https://www.cnblogs.com/anyehome/p/9435371.html JAR包是Java中所特有一种压缩文档,其实大家就可以把它理解为.zip包.当然也是有区别的, ...
- -bash: zip: command not found提示解决办法
-bash: zip: command not found是因为liunx服务器上没有安装zip命令,需要安装一下即可linux安装zip命令:apt-get install zip 或yum ins ...
- Ajax 的简介与使用
一.什么是Ajax Ajax 的全称是 Asynchronous JavaScript and XML(即异步的 JavaScript 和 XML),是一种在无需重新加载整个网页的情况下,能够更新部分 ...
- 我花了2个月时间,整理了100篇Linux技术精华,技术人必看
一个以技术为立身根基的教育机构做出来的微信号,干货程度会有多高? 马哥Linux运维公众号运营五年,从一开始的定位就是给技术人分享加薪干货的地方.这五年里,公众号运营最重的任务就是做内容.内容并不好做 ...
- C#常用控件和属性
目录1.窗体(Form)2.Label (标签)控件3.TextBox(文本框)控件4.RichTextBox控件5.NumericUpDown控件6.Button(按钮)控件7.GroupBox(分 ...
- 洛谷 P2863 [USACO06JAN]牛的舞会The Cow Prom 题解
每日一题 day11 打卡 Analysis 好久没大Tarjan了,练习练习模板. 只要在Tarjan后扫一遍si数组看是否大于1就好了. #include<iostream> #inc ...
- 主席树 Couriers
[bzoj3524/2223][Poi2014]Couriers 2014年4月19日1,2571 Description 给一个长度为n的序列a.1≤a[i]≤n.m组询问,每次询问一个区间[l,r ...