模塊化開發與vue組件
阿新 • • 發佈：2018-07-24
depend abc class package pan pen web 開頭 init
var $=require("jquery") // 引入官網的模塊
var asd=require("./dd.js") // 引入當前文件下的dd.js文件
var quan=require("./ff") //沒有package.json文件 默認入口文件index.js
模塊化開發是保證每個文件都是獨立的模塊，不受外界幹擾，提高性能，便於後期維護與團隊開發。
可以引入官網的模塊，也可以自定義模塊。
使用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組件