关于如何把自己写的html文件放入新建的Vue3工程中

---

如果你已经建好了vue工程，则直接从第二点开始看。

一.新建Vue工程

  环境还没有安装好、还不会的可以看以下几篇文章：
  怎样创建一个VUE项目（超简单） 以及 Vue检测与安装 和 Vue创建项目的详细步骤

如果你已经安装配置好了Vue3的相关环境，则进行以下的步骤：

1.打开cmd

  按win键，输入cmd，回车，即可打开。

2.进入到自己想要新建工程的文件夹里

  例如： 想进入D盘，则输入 d: 即可转换到D盘。如果还想进入d盘里面的文件夹，则输入 cd 和自己想进的文件夹的名字。

  例如： 我想进入D盘下名叫web的文件夹，则输入 cd web 即可进入。想进入web文件夹里面的子文件也用这个方法。

3.创建vue工程文件

  输入vue create 和你想建的工程名，回车即可创建工程。例如： 输入vue create vue_test，回车创建vue_test文件夹。

  回车之后会让你选择建vue3还是vue2工程，我要新建vue3工程，在此处回车即可。
  如果你要建vue2工程，用方向键的上下键进行选择，选中后回车即可。

  稍等片刻，显示以下画面即工程建立完成。

二.转移html文件至vue工程中

1.删除默认Vue工程中的无用内容

  根据怎样创建一个VUE项目（超简单） 这篇博客文章里面的第五点、第七点可以知道，我们只需要修改src文件夹下面的内容，可以删掉assets、components文件夹下面的内容。
  打开src文件夹下的App.vue，删除<template>、<script>、<style>里面的东西。

  记得在<template>与</template>中间加上<div></div>，否则会出现1:1 error The template requires child element的报错！！！
  以及最好在<script>与</script>中间加上export default {}

  总共会留下如下的代码：

<template>
  <div></div>
</template>

<script>

export default {}

</script>

<style></style>

2.转移html文件至Vue工程中

  找到你之前写的html文件，直接ctrl + A 全选，ctrl + C 复制。
  再找到Vue工程public文件夹中的index.html文件，打开并ctrl + A 全选，ctrl + V 粘贴，用你的html代码覆盖原先index.html文件中所有内容即可。

3.启动终端运行

  输入npm run serve，能够成功运行不报错即可。