2024最新教程,手把手带你创建一个 Vue 3应用

 前提条件:

  • 熟悉命令行
  • 已安装 16.0 或更高版本的 https://nodejs.org/

在本节中,我们将介绍如何在本地搭建 Vue 单页应用。创建的项目将使用基于 Vite 的构建设置
确保你安装了最新版本的 Node.js,并且你的当前工作目录正是打算创建项目的目录。在命令行中运行以下命令

1.安装vue命令
npm install -g @vue/cli

2024最新教程,手把手带你创建一个 Vue 3应用_第1张图片

安装时有标红报错也不用担心。这都是一些过时版本的处理

完成后可获得一个新的访问命令 vue 使用

vue -v

 查看当前vue命令版本和帮助

2024最新教程,手把手带你创建一个 Vue 3应用_第2张图片

2.创建vue3项目

使用以下命令即可创建最新vue项目(latest 翻译成中文:最新的)

npm create vue@latest

2024最新教程,手把手带你创建一个 Vue 3应用_第3张图片

选Y

接下来创建项目名称,创建项目名称的时候需要注意:项目命名不能“大写、中文”可以使用横杠!

2024最新教程,手把手带你创建一个 Vue 3应用_第4张图片

接下来,将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示:

2024最新教程,手把手带你创建一个 Vue 3应用_第5张图片

我们可以根据自己的需求按需引入一些配置以及选项

(以上截图是截的官方的图,我还整理了一份中文的):

2024最新教程,手把手带你创建一个 Vue 3应用_第6张图片

这便是创建好的项目目录了 

2024最新教程,手把手带你创建一个 Vue 3应用_第7张图片

使用命令

cd vue-study1
3.进入刚刚创建的项目目录

如果不能直接run 就执行初始化命令

npm install

 

初始化完成后直接run项目就好了

npm run dev
4.成功运行最新版本的vue项目

2024最新教程,手把手带你创建一个 Vue 3应用_第8张图片

2024最新教程,手把手带你创建一个 Vue 3应用_第9张图片 项目成功运行

你可能感兴趣的:(vue,vue配置,Vue3,vue.js,前端,javascript)