携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第28天点击查看活动详情。

使用 Vue 脚手架

初始化脚手架

Vue 脚手架是 Vue 官方提供的标准化开发工具(开发平台)。
Vue CLI： command line interface

安装脚手架
第一步( 仅第一次执行)：全局安装 @vue/cli。
第二步：切换到要创建项目的目录，然后使用命令创建项目。vue create XXX
第三步：打开创建项目文件夹，启动项目 npm run serve。
vue 命令无法无法创建命名包含大写字母的项目 vue create xxx (必须小写)

关于不同版本的 Vue
1、Vue.js 与 vue.runtime.xxx.js 的区别：

①、Vue.js 是完整版的 Vue。包含：核心功能 + 模板解析器
②、vue.runtime.xxx.js 是运行版的Vue，只包含：核心功能，无模板解析器

2、vue.runtime.xxx.js 因为没有模板解析器，所以不能使用 template 配置项。需要使用 render 函数接收到的 createElement 函数去指定具体内容

脚手架文件结构：

├─.gitignore
├─babel.config.js
├─jsconfig.json
├─package-lock.json
├─package.json
├─README.md
├─vue.config.js
├─src
|  ├─App.vue
|  ├─main.js
|  ├─components
|  |     └HelloWorld.vue
|  ├─assets
|  |   └logo.png
├─public
|   ├─favicon.ico
|   └index.html
├─.git
|  ├─COMMIT_EDITMSG
|  ├─config
|  ├─description
|  ├─HEAD
|  ├─index
|  ├─refs
|  |  ├─tags
|  |  ├─heads
|  |  |   └main

Vue.config.js 配置文件 Vue 脚手架隐藏了所有 webpack 相关的配置，若想查看具体的 webpack 配置，请执行： vue inspect > output.js

ref 属性

1、被用来给元素或子组件注册引用信息(id 替代者)
2、应用在 HTML 标签上获取的是真实DOM元素，应用在组件标签上获取的是组件实例对象 (vc)
3、使用方法：标识 ref=“xxx” 获取：this.$refs.xxx

<h1 v-text="msg" id="H1" ref="title"></h1>
<input type="button" value="点我输出上方的 DOM 元素" @click="showDom" ref="btn" />
<School ref="Sch" />

console.log(this.$refs.title)   //真实DOM元素
console.log(this.$refs.btn) //真实DOM元素
console.log(this.$refs.Sch) //School 组件的实例对象

Props 配置

功能：让组件接收外部传过来的数据
1、传递数据： 2、接收数据：

一、props: ["name", "sex", "age"], // 简单接收
二、//接收的同时为数据进行类型限制
props:{
    name:String,
    age:Number,
   sex:String
}

三、//接收的同时对数据：进行类型限制 + 默认值的指定 + 必要性的的限制
props: {
  name: {
    type: String, //name 的类型是字符串
    required: true, //naem 是必要的
  },
  age: {
    type: Number,
    default: 99, //默认值
  },
  sex: {
    type: String,
    required: true,
  },
},

Props是只读的，Vue 底层会检测你对 Props 的修改，如果进行了修改，就会发出警告。若业务需求确实需要修改，那么请复制 Props 的内容到 data 中一份，然后去修改data中的数据。

Vue.js学习笔记(捌)

使用 Vue 脚手架

初始化脚手架

ref 属性

Props 配置