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



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

一.新建Vue工程

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

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

1.打开cmd

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

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

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

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

3.创建vue工程文件

  输入vue create 和你想建的工程名,回车即可创建工程。例如: 输入vue create vue_test回车创建vue_test文件夹。
3.1
  回车之后会让你选择建vue3还是vue2工程,我要新建vue3工程,在此处回车即可。
  如果你要建vue2工程,用方向键的上下键进行选择,选中后回车即可。
3.2
  稍等片刻,显示以下画面即工程建立完成。在这里插入图片描述

二.转移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的报错!!!
二1.2  以及最好在<script></script>中间加上export default {}

  总共会留下如下的代码:

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

<script>

export default {}

</script>

<style></style>

二1.1

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

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

3.启动终端运行

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

  • 7
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值