使用vue-cli创建Vue工程化项目及单文件组件的创建和调用

---

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
   1
   2
   3

2. 命令创建项目

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

   

3. 选择手动配置

   

4. 选择要安装的项

   

5. 选择vue库的版本

   

6. 选择css预处理

   

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

   

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

   

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

子组件（child.vue）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

父组件（App.vue）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

注意：

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