前言：
vue脚手架的作用是用来自动一键生成vue webpack的项目模版，包括依赖库，免去你手动安装各种插件，寻找各种cdn并一个个引入的麻烦。
vue脚手架指的是vue-cli，它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。
vue-cli是有Vue提供的一个官方cli，专门为单页面应用快速搭建繁杂的脚手架。它是用于自动生成vue.js webpack的项目模板，是为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载，保存时 lint 校验，以及生产环境可用的构建版本
是一个快速构建 vue 项目的工具，通过他，我们可以将 vue 所需要的插件安装完成。
vue-cli这个构建工具大大降低了webpack的使用难度，支持热更新，有webpack-dev-server的支持，
相当于启动了一个请求服务器，给你搭建了一个测试环境，只关注开发就OK。
正文：
Vue中ref属性类似于原生中的id，但是两个还是有严格意义上的区别的
ref与id以及对应的this.$refs.xxx与document.getElementById("xxx")
区别：
ref属性：
1.ref用在template中的标签中时（用于得到该标签的dom元素）
例：
template：
代码语言：javascript复制<template>
<div id="app">
<h1 ref="qqq">{{lqj}}</h1>
<button @click="dianji">点击得到dom元素</button>
</div>
</template>script：
代码语言：javascript复制<script>
...
export default {
name: 'App',
data(){
return{
lqj:'我是傻逼'
}
},
...
methods:{
dianji(){
console.log(this.$refs.qqq)
}
}
}
...
</script>结果是获取到相对应的dom元素
2.ref用在组件标签中时（用于得到该组件的所有的实例对象）
例：
template：
代码语言：javascript复制<template>
<div id="app">
<HelloWorld ref="msg"></HelloWorld>
</div>
</template>script：
代码语言：javascript复制<script>
...
methods:{
dianji(){
console.log(this.$refs.msg)
}
}
...
</script>结果：
展开：
原生的id属性：
1.id用在template中的标签中==ref用template中的标签中（唯一区别就是一个id把显示出来了，一个没有显示出来）如下：
这两个用在template中的作用是相等的（具体看上面所述）
ref：
id：
2.id用在组件标签中时（vue会看作一个普通标签来对待，得到的同样是一个dom元素）
template：
代码语言：javascript复制<HelloWorld id="msg"></HelloWorld>script：
代码语言：javascript复制...
methods:{
dianji(){
console.log(document.getElementById("msg"))
}
}
...结果：
