Vue-day04

1.组件

组件化:通常指的是样式（轮播图，tab，列表区域）
模块化:通过指的是效果(弹框)

组件:每一个vue实例对象(可复用的vue实例)

组件的定义以及使用
组件：全局定义组件 可复用的vue实例
局部定义
全局定义组件 语法:Vue.component(组件名称,{模板对象})
组件命名规范:1.采用驼峰方式命名，页面使用的时候需要把大写字母转为连字符+字母,目的为了方便调用
2.采用小写命名方式，直接在页面使用即可<vone></vone>
3.不能以现有的标签名作为组件名
组件中的data定义:1.data必须是方法 2.方法必须有返回值 3.返回值必须是对象类型
如果使用data中的数据:在组件中声明的数据需要在组件的模板中使用
组件中还可以有的配置项；data，methods，filter，computed，watch，生命周期的钩子函数....

2.template

组件中的模板对象：有且只能有一个根元素
template使用: 位置:放到body的结束标签上面,给当前的模板标签添加id，同时把id赋值给组件的template

3.data

目的是为了实现数据共享而数据互相不影响
注意点:
1.data必须函数 2 必须有返回值 3返回值必须是对象

4.脚手架

1.全局安装webpack 
npm install webpack -g
2.全局安装vue-cli
npm install vue-cli -g
以上两步只需要安装一次
下面就是创建项目
3.vue init webpack demo     项目名称为小写名字即可   这是创建vue2.0项目
4.cd demo   进入创建的文件中
5.npm run dev  启动项目

//淘宝镜像
npm i -g cnpm --registry=https://registry.npm.taobao.org

1.当前文件夹中不能有vue.js文件，如果有安装脚手架会报错

项目安装

1.安装脚手架完成

2.清空工作

3.创建每一个组件(后台页面)

-componets

-header.vue

-footer.vue

-main.vue

APP.vue中 
<template>
  <div class="box">
    <v-header></v-header>
    <v-main></v-main>
    <v-footer></v-footer>
  </div>
</template>

<script>
import vHeader from './components/header'
import vMain from './components/main'
import vFooter from './components/footer'
export default {
  components: {
    vHeader,
    vMain,
    vFooter
  }
}
</script>

<style scoped>
  .box{
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
  }
</style>

在main.js中引入静态资源
// 引入静态资源
import './assets/css/reset.css'
//创建公共组件
import vDel from './components/del.vue'
Vue.component('vDel',vDel)