如果你已经建好了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,能够成功运行不报错即可。

GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐