Vue | 37.尚硅谷补充 -vue脚手架结构分析

0.参考视频

62. 分析脚手架结构

1.单文件组件(.vue文件)

1.1.命名

命名法	单个单词	多个单词
短横线	school.vue	my-school.vue
大驼峰	School.vue	MySchool.vue

推荐使用大驼峰命名法，与Java的类命名保持一致

1.2.单文件组件结构

1. 以往在html模式下，HTML样式定义在template属性中；而单文件组件则需要定义在<template> <\template>中
2. "name"准确地说，定义的是标签的样式; "data()"则是定义数据; 如果有引入其他组件，则需要用import。无论如何，最终都要写export default { ... }
3. CSS样式

2.根目录文件分析

2.1.package.json

2.2.package-lock.json

这个的作用就类似于MAVEN，其实就是依赖版本管理文件

3.按照文件执行顺序分析文件

执行"npm run serve"命令后，文件的运行顺序为：

1. public/index.html

2. src/main.js

3. src/App.vue

4. src/components/HelloWorld.vue

3.1.HTML文件 - public/index.html

其中的<%= BASE_URL %>就是public文件夹所在的路径

3.2.入口文件 - src/main.js

在项目目录下执行npm run serve命令后，就会运行main.js

该文件被称为项目的入口文件

3.3.父组件 - src/App.vue

所有后缀为".vue"的文件，都是组件

而App.vue则是所有组件的父组件

所有的直接子组件都需要在App.vue中执行以下流程：

• 在<script>中用import引入

• 在<script>的export对象中，定义components属性进行注册

• 在<template>中用<组件名> <\组件名>来使用组件

3.4.子组件 - components/HelloWorld.vue

这里就是一个低级的子组件

4.运用Vue脚手架，自己编写程序

目标：运用Vue脚手架，展现如下内容

4.1.子组件 - Child.vue

需要注意，在vue文件中，不要再写template属性，应该写<template>

4.2.父组件 - Parent.vue

4.3.最高级父组件 - App.vue

4.4.入口文件 - main.js

通常main.js是不用修改的，原样使用即可

4.5.HTML网页 - index.html