Vue｜单文件组件与脚手架安装

一、单文件组件

1.1 介绍

[.vue]文件，称为单文件组件，是Vue.js自定义的一种文件格式，一个.vue文件就是一个单独的组件，在文件内封装了组件相关的代码：html、css、js。

1.2 文件组成

.vue文件由三部分组成，其中template存放响应的html代码，style存放响应的css代码，script存放响应的js代码。

1
2
3
4
5
6
7
8
9
10
11

1.3 加深认知

在上一小节非单文件组件中，我们是在.html中通过注册绑定的方式所实现。

现在换成单文件组件之后就不能再用之前的思路来开发了，要把不同的组件独立出来变成[.vue]后缀的文件；新建目录后再创建一个PageHeader.vue的文件。

可以尝试在这个.vue的文件中直接输入html标签，并没有任何语法高亮效果，因为在.vue文件中只能有效识别上述文件组成的三个标签

这里可以装一个插件以实现语法高亮的效果，在拓展中搜索Vetur，找到作者是Pine Wu的插件并安装。

如果使用浅色主题可能效果不是很明显，可以通过快捷键换肤后再进行查看；先ctrl+k再ctrl+t

将PageHeader.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
26
27
28
29
30
31
32
33
34

再定义一个App.vue文件，这个文件的作用是vue页面资源的首加载项，是主组件，页面入口文件，所有页面都是在App.vue下进行切换的；App.vue负责构建定义及页面组件归集。

• 一般就是指整个vue项目的根组件，用来展示组件中内容
• App.vue是针对整个项目称作根组件，template下的子元素是针对当前的vue实例称作根组件

在App.vue中引入所创建的PageHeader.vue

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

创建一个main.js，main.js是项目的入口文件，项目中所有的页面都会加载main.js。它的作用如下

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

import App from './App.vue';

new Vue({
    el:'#root',
    components:{
        App
    },
    template:``,
    data:{}
});
1
2
3
4
5
6
7
8
9
10

二、脚手架安装

2.1 什么是脚手架?

什么是脚手架?肯定不是图片这种

在聊到脚手架之前我们必须知道浏览器本身并不能够直接展示.vue文件，所以必须对.vue文件进行加载解析，这时候就需要vue-loader，需要注意的是vue-loader是基于webpack的 ,所以要想用 vue-loader必须先安装webpack；那什么是webpack呢?

• webpack是一个前端资源模板化加载器和打包工具，它能够把各种资源都作为模块来使用和处理
• webpack是通过不同的loader将这些资源加载后打包，然后输出打包后文件
• 简单来说，webpack就是一个模块加载器，所有资源都可以作为模块来加载，最后打包输出

扯了一堆之后告诉你，脚手架就是Vue官方提供的标准化开发工具（开发平台），它提供命令行和UI界面，方便创建vue工程、配置第三方依赖、编译vue工程。

2.2 使用镜像

如何在本机安装脚手架?win+r快捷键然后输入cmd打开命令提示符界面。

在命令行复制命令如下，按回车；这是为了避免下载缓慢而配置的淘宝镜像。

npm config set registry https://registry.npm.taobao.org
1

2.3 全局安装vue/cli

接下来全局安装vue/cli，CLI也就是脚手架，C是command，L是line，I是interface，直译为命令行接口工具

npm install -g @vue/cli
1

重启cmd输入vue查看版本

2.4 创建并启动项目

接下来就是创建第一个vue项目了，通过命令选中一个文件夹并输入命令如下，名字可以随意取，但记得不要与关键字重名。下图是输入创建脚本后的界面，选择Vue的版本，第一行是脚手架的版本号，后面是选择vue2或者vue3，这里选v2就可以。

vue create vue_test
1

到这一步就成功创建了，在命令窗口中显示successfully。

按它提示的步骤输入命令访问到所创建项目的位置并启动项目，它会给出启动后的项目地址，复制到浏览器即可访问。

cd cli_test
npm run serve
1
2