【二】使用create-vue创建vue3的helloworld项目(推荐)

create-vue

官网：快速上手 | Vue.js

create-vue 是 Vue3 的专用脚手架，使用?vite?创建 Vue3 的项目，也可以选择安装需要的各种插件，使用更简单。

1、使用方式

npm create vue@latest

这个命令会安装和执行?create-vue，它是 Vue 提供的官方脚手架工具。

创建好项目的目录结构如下：

如果不确定是否要开启某个功能，你可以直接按下回车键选择?No。在项目被创建后，通过以下步骤安装依赖并启动开发服务器：

  cd vue-project
  npm install
  npm run dev

你现在应该已经运行起来了你的第一个 Vue 项目！请注意，生成的项目中的示例组件使用的是组合式 API?和?<script setup>，而非选项式 API。访问界面如下：

2、部署

当你准备将应用发布到生产环境时，请运行：

npm run build

执行完成后，会在 Vue 项目下会生成一个?dist?目录，该目录一般包含 index.html 文件及 static 目录，static 目录包含了静态文件 js、css 以及图片目录 images（如果有图片的话）。

直接使用浏览器打开index.html文件会是空白页面，控制台报错。

Failed to load resource: net::ERR_FILE_NOT_FOUND

原因

其实是因为打包后的文件是需要在服务器中运行的，build生成的文件要放在服务器里面(可以用apache或者tomcat)

简单方案

• 全局安装http-server

npm install http-server -g

• 进入项目目录

cd dist

• 运行http-server?

• 打开 http://127.0.0.1:8080能正确访问到通过打包后dist部署的项目了。