vue1.0 框架搭建 (1)

最新推荐文章于 2024-02-23 18:31:44 发布

Muertos

最新推荐文章于 2024-02-23 18:31:44 发布

阅读量162

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/csk246/article/details/108449124

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

基于 require.js
搭建 vue.js 1.0 的开发环境
index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script 
		src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.js"
			data-main="js/config/requireconfig.js" 
			></script> 
	</head>
	<body>
		<div id="app"> {{name}}
			<router-view></router-view>  
		</div>
	</body>
</html>

requireconfig.js 全局配置文件加载器

require.config({
	//这里编写版本号
	urlArgs:'v=1',
	//一些插件配置
	paths: { 
		//vue的路径
		vue:"https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.min",
		//这里才是主函数入口
		main:"../main"
	}
}); 
//有这里加载主要函数入口
define(['main'],function(main){ 
	return {};
});

main.js

define(['vue'],function(vue){
   var app= new vue({
    	el:"#app",
    	data:function(){
    		return {name:"123"}
    	}
   }); 
   return {};
});

跑起来的效果
在这里插入图片描述

接下来开始集成vue-route 路由
修改requireconfig.js 文件增加路由,和路由加载器

require.config({
	//这里编写版本号
	urlArgs:'v=1',
	//一些插件配置
	paths: {  
		//vue的路径
		vue:"https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.min",
		//这里才是主函数入口
		main:"../main",
		//vue路由
		vueRoute:"https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.4.3/vue-router",
		//路由文件
		routeModel:"../routeModel"
	}
}); 
//有这里加载主要函数入口
define(['main'],function(main){ 
	return {};
});

编写路由配置 routeModel.js

	define(function(){ 
		return [
		 	{
		  		path:'/',redirect:'/a'
		  	},
			{
				path:"/a",
				component:{
					template:"<div>11</div>"
				}
			},
			{
				path:"/b",
				component: {
					template:"<div>22</div>"
				}
			},
		];
});

再修改main.js代码

define(['vue','vueRoute','routeModel'],function(vue,vueRoute,routeModel){
	//注册路由
 	vueRoute.install(vue); 
	//创建路由
	var router   = new vueRoute({
   		routes:routeModel,
   		mode: 'hash'//hash
	}); 
	//创建vue对象
	var app = new vue({
		 router:router, 
		 el: '#app',
	});       
});

运行后
在这里插入图片描述
然后将 routeModel.js 进行修改改成支持懒加载模式
创建 index.js login.js
index.js

define(function(){ 
	return { 
		template:"<div>首页</div>"
	}
});

define(function(){ 
	return { 
		template:"<div>登录</div>"
	}
});

routeModel.js 调整

define(function(){ 
	var data=[
		{
			path:"/index",
			name:"index",
			url:"index"
		},
		{
			path:"/login",
			name:"login",
			url:"login"
		}, 
	];
	var getRoute=function(item){
		return {
			path:item.path,
			name:item.name,
			//递归子路由
			children:item.children?toRoute(item.children):null,
			component:function(fn){ 
				//懒加载文件 
				//"../../js/controller/"	设置默认的加载路径
				require(["../../js/controller/"+item.url],fn);
			}
		}
	}
	var toRoute=function(data){
		var result=[]; 
		if(data){
			for(var i=0;i<data.length;i++){
				result.push(getRoute(data[i]))
			}
		}
		return result;
	}  
	return toRoute(data);
});