模块化开发是保证每个文件都是独立的模块，不受外界干扰，提高性能，便于后期维护与团队开发。
可以引入官网的模块，也可以自定义模块。
使用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>
原文地址：https://www.cnblogs.com/guiyh/p/9357265.html
时间： 2024-10-12 14:02:49