vue组件与脚手架

组件

1、概念：组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

2、定义方式

  // 全局定义 所有vue实例都可以调用该组件
  Vue.component('one',{
    template:`<div>
      <h1>我是one的题目</h1>
      <p>我是one的内容</p>
    </div>`
  })
​
  new Vue({
    el:'#app',
    // 局部定义 只有当前vue实例才可以调用该组件
    components:{
      hello:{
        template:'<h3>哈哈哈，我是一个局部组件</h3>'
      }
    }
  })

3、组件命名

  1、不能以已经存在的标签命名。eg：div span a b em
  2、也不能以已经存在的标签大写命名。eg：DIV SPAN A B EM
  3、如果组件名称中有大写字母，调用的时候要改成-小写。   烤串写法
  4、当首字母就是大写的时候，那么就直接改成小写
  5、推荐组件名称中至少包含一个大写字母。eg：webNav  webBanner

template

    1、如果定义了template选项，那么就不会加#app里面的内容，而是将template中的内容直接渲染到页面中
    2、在template中最外层只能有一个根标签
    3、我们可以借助template标签来定义，template标签仅仅是一个模板占位符，并不会展示在页面中
    4、在写template的时候，不要考虑其他的，就考虑正常在页面中怎么写，那么在template中就怎么写

data

 

 data是一个返回对象的函数，这样设计的目的是因为，组件是为了重复调用，但数据又要互相隔离。
 如果定义成一个对象的话，就会一变全变，所以得定义一个函数，封闭空间。实现了展示的效果一样，但数据又互相不影响。

脚手架安装

// 全局安装webpack
npm i webpack -g
// 全局安装vue脚手架
npm i vue-cli -g
// 创建项目
vue init webpack demo
// 进入项目
cd demo
// 启动项目
npm run dev

脚手架文件夹

-demo                     项目文件夹
 -build                   打包配置
 -config                  启动项目的配置项
 -dist                    打包以后的文件
 -node_modules            依赖包
 _static                  静态资源 img rem.js reset.css
  .babelrc                es6->es5
  .editorconfig           编辑器配置
  .gigignore              不用上传到github的代码
  .postcssrc.js           处理css兼容
  index.html              页面
  package.json            启动命令   打包命令     依赖包
  README.md               说明
 _src       

启动命令npm run dev 打包命令npm run build

脚手架中组件定义

//全局组件(在main.js中)
import vNews from "路径"
Vue.component("组件名",vNews)
​
//局部组件(在各自的组件中)
import vChild from "路径"
export default{
    components:{
        vChild
    }
}