初始vue项目中各文件是干什么的以及如何获得空白页面

第一部分：介绍初始化vue中的各文件

1、首先介绍src

• src是项目源码目录，开发时主要是在这边编辑代码。由assets、components、router、store、views、App.vue、main.js这些文件组成。

2、App.vue文件

• App.vue文件是根组件，也是入口组件。里面通常由<template>...</template>(组件)、<script>....</script>(脚本文件)和<style>....</style>(样式)这三部分组成。
• <template>...</template>就相当于视图层。但值得注意的是最外层只能有一个div。

3、assets文件

一般存放的是项目中的静态文件。

4、components文件

• components意思是组件，即是一个组件文件，其中存放的是各页面所需的组件。组件的注册页在其中。

5、router文件夹

• router文件中存放的项目中路由配置相关的内容。

6、store文件

• vuex的状态管理，项目的全局数据中心。

7、views文件

• 这里面存放的是各种扩展为.vue的组件，一般可以理解为存放的是页面。

8、main.js文件

• 是项目中的核心文件。
• 该文件是系统的启动文件，所以和整个项目相关的配置或代码都要在这个文件中编写。

3、node_modules文件

• 存放的是项目中所需的依赖

4、package.json文件

• 是一个基础配置文件，告诉我们项目的信息如：版本号、项目名称、以及项目的依赖。

5、index.html文件

• 项目中唯一的页面文件，也是是单页面的入口文件，所有的vue组件最终都在该页面中展示。

第二部分：获得空白页面

1、删除App.vue中的内容，删除内容如下：

2、删除views中的内容，删除内容如下：

删除About.vue和Home.vue这两个组件。

3、删除router文件中index.js的内容，删除后如下：

4、将components文件中的xx.vue文件删除

5、结果展示

删除前：

删除后：