九、Vue的组件化
9.1 什么是“组件化”
Vue的组件化设计思想借鉴了Java的面向对象思想。Java认为万物皆对象，在Vue中，万物皆组件。也就是说，在实际的vue项目中，以及使用了Vue框架的项目中，Vue的对象都会以组件的形式出现，能被反复使用。
要想实现组件化，需要在页面中注册组件：关于注册的方式有两种，分别是全局注册和本地注册。
9.1.1 组件的全局注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue组件的全局注册</title>
</head>
<body>
<div id="app">
<model1></model1>
<model1></model1>
<model1></model1>
</div>
<hr/>
<div id="app1">
<model1></model1>
<model1></model1>
<model1></model1>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
//通过Vue.component实现组件的全局注册，全局注册后的组件可以被重复使用。
Vue.component("model1",{
template:"<div><h1>{{title}}</h1><button type='button' @click='btnfn'>点我</button></div>",
data:function(){
return {
title:"hello vue"
}
},
methods:{
btnfn:function(){
alert("hello !!!");
}
}
});
new Vue({
el:'#app'
})
new Vue({
el:'#app1'
})
</script>
</html>9.1.2 组件的本地注册
vue的全局注册，也就意味着在页面的任意一个被vue绑定过的div中，都可以使用全局注册了的vue组件。但是，如果是对vue组件进行本地注册，那么在其他被vue绑定的div中，不能使用该组件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue组件的本地(局部)注册</title>
</head>
<body>
<div id="app">
<model11></model11>
</div>
<hr/>
<!--在这里使用组件model11会报错-->
<div id="app1">
<model11></model11>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
new Vue({
el:'#app',
components:{
"model11":{
template:"<div><h1>{{title}}</h1><button type='button' @click='btnfn'>点我</button></div>",
data:function(){
return {
title:"hello vue"
}
},
methods:{
btnfn:function(){
alert("hello !!!");
}
}
}
}
})
new Vue({
el:'#app1'
})
</script>9.1.3 小结
这是一个完整的Vue组件。该组件包含了三个部分：template（html视图层内容）、script（Model层）、style（CSS样式）。这样封装好的组件可以被复用，也可以作为其他组件的组成部分而被封装——Java的面向对象再次体现。
- 特点1： template标签内，必须有且只能有一个根标签。
- 特点2： componet中注册的组件中的data，必须是已函数的形式。
如下：
data:function(){
return {
title:"hello vue"
}
}9.2 组件的生命周期
Vue中的组件也是有生命周期的。一个Vue组件会经历：初始化、创建、绑定、更新、销毁等阶段，不同的阶段，都会有相应的生命周期钩子函数被调用。
<html>
<head>
<meta charset="UTF-8">
<title>生命周期</title>
</head>
<body>
<div id="app1">
{{title}}
<button type="button" @click="changeTitle">change title</button>
<button type="button" @click="destroy">destroy</button>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
<script>
new Vue({
el:"#app1",
data:{
title:"this is title"
},
methods:{
changeTitle:function(){
this.title= "new title";
},
destroy:function(){
this.$destroy();
}
},
beforeCreate(){
console.log("beforeCreate")
},
created(){
console.log("created")
},
beforeMount(){
console.log("beforeMount")
},
mounted(){
console.log("mounted")
},
beforeUpdate(){
console.log("beforeUpdate")
},
updated(){
console.log("updated")
},
beforeDestroy(){
console.log("beforeDestory")
},
destroyed(){
console.log("destory")
}
})
</script>
</html>| 组件的生命周期钩子 |
|---|
 |
十、使用Vue-Cli搭建Vue项目
10.1 什么是vue-cli
cli: Command Line 命令行工具，vue-cli就是vue的命令行工具，也称之为脚手架，使用vue-cli提供的各种命令可以拉取、创建、运行我们需要使用到的框架，比如webpack、Element UI、Element Admin等等。那么要想使用vue-cli命令，需要先安装node.js。
10.2 node.js的介绍及安装
node.js的介绍
node.js提供了前端程序的运行环境，可以把node.js理解成是运行前端程序的服务器。
node.js的安装
从官网下载安装即可：
http://nodejs.cn/download/| 测试node.js是否安装成功： 在DOS窗口中输入“node -v” 查看版本，如果看到版本，就表示安装成功。 |
 |
10.3 使用node.js安装vue-cli
使用如下命令安装vue-cli
npm install vue-cli -g
- npm： 使用node.js的命令
- install： 安装
- vue-cli： 要安装的vue-cli
- -g： 全局安装
| 当出现以下界面，表示正在安装： |
 |
如果使用npm官方镜像速度比较慢，可以使用淘宝镜像来安装：
npm install -g cnpm --registry=https://registry.npm.taobao.org之后使用npm命令时就可以替换成cnpm
cnpm install vue-cli -g
cnpm install
cnpm run dev10.4 使用vue-cli下载项目骨架搭建我们的项目
就像maven一样，vue为我们提供了一些官方项目骨架。使用vue list命令可以列出当前官方提供的骨架，可以使用这些骨架来快速搭建出项目。
vue list10.5 创建项目目录并打开
mkdir e:/my-vue-project
cd e:/my-vue-project10.6 使用Webpack骨架快速创建项目
在my-vue-project目录中使用以下命令下载项目骨架
vue init webpack my-project1
- webpack: 骨架名称
- my-project1: 项目名称
| 过程中会出现如下界面，需要手动操作。 |
 |
| 出现如下界面，表示安装成功。 |
|---|
 |
进入到my-project1文件夹内后，使用以下命令来运行项目。
npm run dev
| 访问http://localhost:8081，页面效果如下： |
|---|
 |
| 此时，项目目录及各目录介绍如下： |
|---|
 |
10.7 webpack项目的几个常用命令
- npm install
在运行和调试项目前，一般都需要先执行该命令，目的是安装项目运行所需要的环境。
- npm run dev
以调试的方式运行项目
- npm run build
生成用于项目部署所需的最小资源，生成的内容存放在build文件夹内。
