1. Vue 单文件组件的优势

把一个组件全部内容汇合到一个文件中，文件名字是以 .vue 结尾的就称作 vue 单文件组件。

1. 模板语法有高亮显示和代码书写提示
2. 组件创建支持样式
3. 有构建步骤，支持使用npm下载第3方库，js 高版转低版本
4. 单文件组件中的data一定要用函数的方式且一定要返回一个对象 [vd]

2. cli 创建 Vue 工程项目

1. 安装 vue-cli

   npm i -g @vue/cli
   ## 安装成功后，检查
   vue --version
   

2. 命令创建项目

   # 首先需要进入到对应的目录中(英文目录不要有空格),执行如下命令
   vue create 项目名称(创建时会自己以对应的项目名称生成目录)
   

   

3. 选择手动配置

   

4. 选择要安装的项

   

5. 选择vue库的版本

   

6. 选择css预处理

   

7. 在刚刚的配置文件以单个配置文件进行记录

   

8. 对于刚选择的配置是否记录

   

3. 单文件组件的创建和调用

子组件（child.vue）：

<template>
<div>
    <div class="title">我是一个显示的内容 -- child</div>
    </div>
</template>

<script>
    // js 业务代码
    export default {};
</script>

<style lang="scss" scoped>
    /* 
    lang 指定当前的css的预处理脚本，如果没有，则使用css，如果有一定要安装时，选中对应方案
    scoped  样式作用域  名称保护  命名空间  在编译的时候，给绑定的css元素添加一个不重复的hash字符串，
    当前属性名称，然后它在通过css3的属性选择器来完成定义样式
    */
    .title {
        color: red;
    }
</style>

父组件（App.vue）：

<template>
<div>
    <h3 class="title">App组件</h3>
    <hr />
    <child />
    <child />
    <child />
    </div>
</template>

<script>
    // 引入对应的组件
    // @在vue工程中,给进行了webpack别名配置,它指向 src 目录
    // import child from '@/components/child.vue'
    import child from "./components/child.vue";

    export default {
        components: {
            child,
        },
    };
</script>

<style lang="scss" scoped></style>

注意：

1. Vue 工程化中可以使用但标签，因为工程化中的 html 标签会经过 vue-template-compiler@2 的编译。
2. style 标签中的 scoped 的作用是，给当前文件创建一个独立的命名空间，防止同名导致样式添加错误。例如上述代码中，如果不给子组件添加上 scoped 属性，则当子组件被引入到父组件文件中时，父组件会受到影响，标题也会变成红色。