关于如何把自己写的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
,能够成功运行不报错即可。
更多推荐
所有评论(0)