模块化开发与vue组件

Posted guiyh

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了模块化开发与vue组件相关的知识，希望对你有一定的参考价值。

模块化开发是保证每个文件都是独立的模块，不受外界干扰，提高性能，便于后期维护与团队开发。
可以引入官网的模块，也可以自定义模块。

使用require()引入需要使用的模块，自定义的模块在使用之前需要通过module.exports 暴露出去。

通过npm init -y 下载package.json文件管理维护模块，其中 main 为入口文件 ，dependencies 指定项目开发与上线需要的模块 ，devdependeciens  指定项目开发中需要而上线时不需要的模块。

var as=require("aa")            // 自定义的模块，放在node_modules文件夹下入口文件为aa.js
var $=require("jquery")        // 引入官网的模块
var asd=require("./dd.js")     // 引入当前文件下的dd.js文件
var quan=require("./ff")         //没有package.json文件 默认入口文件index.js

 

vue 组件化开发
每个组件都自己的模块，组件与模块之间用id关联，每个模块只能有一个顶层标签，组件名必须大写开头，不能使用h5标签来命名，组件的data是个函数，每个组件下面的数据只能在它自己对应的模块下使用。如果需要使用此组件，需要将其注册到需要使用的父组件下(components)，以标签的形式调用，且可以重复使用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<heads></heads><!-- 标签形式调用 可以重复使用 -->
			<heads></heads>
		</div>
	</body>
</html>

<template id="tem1">
	<div>                     <!--模板只能有一个顶层标签-->
	     <p>{{cont}}</p>      <!--组件的数据写在模板里-->
	     <mains></mains>
	</div>
</template>

<template id="tem2">
	<div>
	     <h3>{{info}}</h3>
	</div>
</template>


<script>
	let Mains = {              //子组件必须写在父组件前面
		template:"#tem2",
		data:function(){
			return{
				info:"abc"
			}
		}
	};
	
	let Heads = {           //组件名 大写开头 不能使用h5标签
		template:"#tem1",   //模板和组件通过id关联
		data:function(){    //组件的data是个函数 
			return{
				cont:"12345"
			}
		},
		components:{       //注册组件
			mains:Mains
		}
	};
	
	let app = new Vue({
		el:"#app",
		data:{
			msg:"web"
		},
		components:{      //注册组件
			heads:Heads
		}
	});
</script>

　　






以上是关于模块化开发与vue组件的主要内容，如果未能解决你的问题，请参考以下文章

模块化开发与vue组件

模块化与组件化

单独图表组件的开发 --- 库存与销量模块（圆环饼图 ）

vue中的组件

Vue组件之全局组件与局部组件

Vue组件之全局组件与局部组件