Vue脚手架一

1、初始化脚手架步骤

第一步（仅第一次执行）：全局安装@vue/cli。npm install -g @vue/cli
第二步：切换到你要创建项目的目录，然后使用命令创建项目vue create xxx
第三步：启动项目npm run serve
注：1、如出现下载缓慢请配置npm淘宝镜像：
npm config set registry https://registry.npm.taobao.org
       2、Vue脚手架隐藏了所有webpack相关的配置，若想查看具体的webpakc配置，请执行：vue inspect > output.js
       3、使用vue.config.js可以对脚手架进行个性化定制，详情见：https://cli.vuejs.org/zh

2、脚手架结构分析

favicon.ico:页签图标、index.html:主页面、assets:存放静态资源、component:存放组件、App.vue:汇总所有组件、main.js:入口文件
vue.js与vue.runtime.xxx.js的区别
      1.vue.js是完整版的Vue，包含：核心功能+模板解析器
      2.vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器
注：因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容
关闭语法检查：lintOnSave:false

3、ref属性

作用：用于给节点打标识
      1、被用来给(html)元素或子组件注册引用信息（id的替代者）
      2、应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
使用方式
打标识：<h1 ref="xxx">.....</h1> 或<School ref="xxx"></School>
获取：
this.$refs.xxx

4、props配置

作用：用于父组件给子组件传递数据，让组件接收外部传过来的数据
传递数据
<Demo name="xxx"/>
接收数据：
三种方式
只接收——props:['name']
限制类型——props:{name:String}
限制类型、限制必要性、指定默认值——
props:{
name:{
type:String, //类型
required:true, //必要性
default:'老王' //默认值
}
}
props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据

5、mixin混入

功能
可以把多个组件共用的配置提取成一个混入对象
使用方式
第一步定义混合：
{
data(){....},
methods:{....}
....
}
第二步使用混入
全局混入：Vue.mixin(xxx)
局部混入：mixins:['xxx']

6、插件

功能
用于增强Vue
本质
包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据
定义插件
对象.install = function (Vue, options) {
// 1. 添加全局过滤器
Vue.filter(....)

// 2. 添加全局指令
Vue.directive(....)

// 3. 配置全局混入(合)
Vue.mixin(....)

// 4. 添加实例方法
Vue.prototype.$myMethod = function () {...}
Vue.prototype.$myProperty = xxxx
}
使用插件
Vue.use()