一个 Vue 单文件组件 (SFC)，通常使用 *.vue 作为文件扩展名，它是一种使用了类似 HTML 语法的自定义文件格式，用于定义 Vue 组件。一个 Vue 单文件组件在语法上是兼容 HTML 的。

参考项目结构

在vue项目的src文件夹下

|_src
    |_api
    |_assets
    |_components
    |_directive
    |_icons
    |_layout
    |_plugins
    |_router
    |_store
    |_styles
    |_utils
    |_views
    
    app.vue
    main.js
    permission.js
    setting.js

api：接口文件夹，存放对数据接口封装的方法（前后端交互的接口，此处需要声明前端需要使用的方法，该方法在后端的URL路径，请求方式（get、post等），参数）。前端在处理业务需要调用后端方法时，import此处api文件夹里相应js文件里的方法，这个方法通过url，请求方式与参数与后端建立映射。

assets：静态资源文件夹，存放图片，css样式等资源

components：组件库文件夹，存放组件（一些可复用，非独立的页面），也可以创建完整页面，但一般完整页面会在views文件夹编写

directive：指令文件夹，可以在这里自定义像v-for、v-if之类的指令以供使用
https://blog.csdn.net/wuj1935/article/details/120705144

icons：图标文件夹

layout：公共布局组件文件，如项目页面顶部栏区域、侧边导航栏(大部分页面公共的布局)

plugins:插件文件夹，自定义插件

router:路由配置文件，存放路由跳转的配置信息,路由用于设定访问路径，并将路径和组件映射起来，访问对应的路径就会跳转到相应的页面（组件）
vue路由

store：存放 vuex 为vue专门开发的状态管理器

styles：全局样式文件

utils:工具包文件夹，存放工具函数

views：视图文件夹，存放各个页面的vue文件

app.vue：项目的主组件，页面入口文件，所有页面都在app.vue下进行切换，app.vue负责构建定义及页面组件归集

main.js:实例化Vue、放置项目中经常会用到的插件和CSS样式、存储全局变量

permission.js: 权限管理

setting.js:配置
配置篇(settings.js)

一般来说，我们只需要了解api、router、views文件夹、app.vue、main.js的内容即可上手

xxx.vue文件（单文件组件/SFC）

vue官方文档-单文件组件语法定义
 vue官方文档-应用规模化-单文件组件
 https://blog.csdn.net/XOIIUUZZ/article/details/103095298

首先我们需要了解一下一个vue文件一般由哪些部分组成

单个vue文件被称为单文件组件（Single-File Component，缩写为SFC），其内容为html、css、js的延伸

Vue SFC 是一个框架指定的文件格式，因此必须交由 @vue/compiler-sfc 编译为标准的 JavaScript 和 CSS，一个编译后的 SFC 是一个标准的JavaScript(ES) 模块

一个.vue文件主要有3个部分

<template>显示的内容</template>

<script>执行的功能（业务逻辑）</script>

<style>内容的样式</style>

可分别看成是html、js、css的功能，类比为名词、动词、形容词

官网示例如下：

<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

<style>
.example {
  color: red;
}
</style>

<custom1>
  This could be e.g. documentation for the component.
</custom1>

template

<template></template>语块包裹的内容将会被提取、传递给 @vue/compiler-dom，预编译为 JavaScript 渲染函数，并附在导出的组件上作为其 render 选项（vue渲染页面的一种方式）。我们来看一下示例中的简单的template视图层

<div class="example">{{ msg }}</div>

首先是一组<div>标签，表示包含的内容是一个独立的部分，标签里的内容作为一个整体，有福同享，有难同当。

class是表示样式的类型，其在<div>的尖括号表明<div>里包含的内容都会应用到该样式，那么它所说的样式类型是"example",这个样式来源里我们在<style></style>所定义的样式

最后让我们看看这个独立部分里面的内容{{ msg }}，这里的{{}}叫做文本插值，使用"Mustache"语法，它与script标签里定义的msg的数据绑定，{{msg}}会被替代为msg的值'Hello world!'，并且保持同步更新

在这基础之上，我们还可以给这个<div>块加上一个身份标识id

<div id="app" class="example">{{ msg }}</div>

当需要用到该部分的内容时，即可通过"app"这个id来引用

script

<script></script>包裹的是脚本代码，会作为es模块执行，进行业务逻辑的处理

ECMAScript模块（简称ES模块）是2015年推出的 JavaScript 中代码重用的机制

我们来看一下示例中的简单的script逻辑层


export default {
  data() {
    return {
      msg: 'Hello world!'
    }
  }
}

export主要用于对外输出本模块变量的接口，一个文件就可以被理解为一个模块,首先是定义数据对象，使用对象来存放数据。js中{}里的内容表示一个对象，在这里有两种写法，一种是直接定义一个对象，一种是通过一个函数返回一个data对象，基本都用后者，原因参考如下 Vue中的data是什么

//直接定义
data:{}
//函数返回值
data() { return {}}

除data之外，script层里还可以写其他内容参考:vue script结构

<script>
export default {
name: "Home",
data() {
  return {};
},
methods: {
  // 组件的方法
},
watch: {
  // watch擅长处理的场景：一个数据影响多个数据
},
computed: {
  // computed擅长处理的场景：一个数据受多个数据影响
},
beforeCreate: function() {
  // 在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
},
created: function() {
  // 实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
},
beforeMount: function() {
  // 在挂载开始之前被调用：相关的 render 函数首次被调用。
},
mounted: function() {
  // 编译好的HTML挂载到页面完成后执行的事件钩子
  // el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
  // 此钩子函数中一般会做一些ajax请求获取数据进行数据初始化
  console.log("Home done");
},
beforeUpdate: function() {
  // 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
},
updated: function() {
  // 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
  // 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。
  // 该钩子在服务器端渲染期间不被调用。
},
beforeDestroy: function() {
  // 实例销毁之前调用。在这一步，实例仍然完全可用。
},
destroyed: function() {
  // Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。
}
};
</script>

在script中除了export（导出）外，还有import（导入），举个例子

//从某路径下的show.vue文件导入showMsg()方法,该方法会显示括号里参数的内容
import { showMsg } from "@/api/show";
export default {
  data() {
    return {
      msg: 'Hello world!'
    }
  }
  
  created() {
    //实例已经创建完成之后被调用,即当你打开这个页面时就会使用
    //this.showHello()表示该组件方法method里的里的showHello()
    this.showHello();
  },
  method:{
    showHello() {
      //调用import进来showMsg,参数this.Msg为该组件数据data里的Msg
      showMsg(this.msg);
      };
    },
  }

当打开一个页面时会创建一个vue实例，调用created(),里面又调用了method里的showMsg方法，里面又调用了导入进来的showMsg方法，其参数来源于data里的Msg，而Msg又会与template里的内容绑定

除了导入方法，还可以导入组件，官网原话

Vue SFC 是一个框架指定的文件格式，因此必须交由 @vue/compiler-sfc 编译为标准的 JavaScript 和 CSS，一个编译后的 SFC 是一个标准的 JavaScript(ES) 模块，这也意味着在构建配置正确的前提下，你可以像导入其他 ES 模块一样导入 SFC：

import MyComponent from './MyComponent.vue'

export default {
  components: {
    MyComponent
  }
}

假如说我们已经写好了一个MyComponent.vue文件（单文件组件），并且在其他vue文件中想要复用这个组件，import后在template层使用<MyComponent></MyComponent>即可

style

<style></style>包裹的是样式，可以使用 scoped 或 module attribute 来帮助封装当前组件的样式，在template层使用时class=""即可使用样式同样看官网示例中<style>标签里的内容


.example {
  color: red;
}

样式名为example，在template中使用该样式时加上class="example"即可此外在标签中可以使用 scoped 等帮助封装当前组件的样式例如<style scoped></style>表明该CSS样式只能作用于当前的组件

单文件组件 CSS 功能

小结

一个vue文件基本上就由模板、逻辑与样式三部分组成，模板定义了一个个独立的模块与内容，样式决定了这些模块的外观，逻辑描述模板里的内容如何呈现。
至此单个vue文件的逻辑基本已理清，但要写好一个界面，一个好看的界面还有很多细节需要慢慢地去熟悉，对于vue还要搞清router路由，各个页面之间的逻辑关系，且听下回分解

vue初学笔记-单文件组件

参考项目结构

xxx.vue文件（单文件组件/SFC）

template

script

style

小结