【VUE】创建一个vue项目详细步骤

一、环境准备

安装 node.js

        下载地址：下载 | Node.js 中文网

        查看是否安装成功，如下图表示安装成功

二、搭建 vue 环境

        在命令行输入

npm install -g @vue/cli

        检查是否安装成功，如下图表示安装成功

三、创建 vue 项目

创建项目

（1）进入你想要创建项目的文件夹，打开命令行输入：vue create 项目名，按方向键选中该项，然后按回车键

（2）方向键选择配置，按空格键按照下图进行配置

（3）回车键选择 vue 版本，这里我选的是 vue3

（4）是否要保存为这个项目作为一个模板保存？

（5）选择代码检查和格式化工具的配置，如果你更倾向于只进行错误预防的代码检查，选择 “ESLint with error prevention only” 会比较合适

（6）选择额外的 lint 功能，选择了 “Lint on save”，这个选项表示在保存文件时会自动运行 lint 工具来检查代码格式和质量。

（7）”In dedicated config files”，这表示生成的项目将会为 Babel、ESLint 等工具单独创建配置文件，以便更灵活地配置和管理。

（8）这个选项是询问你是否要将当前的配置保存为一个预设，以便将来创建类似项目时能够快速应用这些配置。选择 yes（或者简写为 y）会将当前的配置保存起来，你可以在以后使用 Vue CLI 创建项目时选择这个预设，从而省去重新选择配置的步骤。选择 no（或者简写为 n）则不会保存当前配置为预设，下次创建项目时仍需重新选择配置。（这里没截到图）

? Save this as a preset for future projects? (y/N)

（9）出现以下界面，说明项目创建成功

四、启动 vue 项目

1、命令行界面启动

（1）打开浏览器输入下面的网址

（2）出现以下界面说明项目启动成功

（3）返回命令行界面输入 ctrl+c，关闭项目

2、使用编辑器启动

（1）这里我使用的是 vscode 演示，打开 vscode，打开文件夹，选择刚才新建的 vue 项目

（2）打开终端，输入命令 npm run serve

（3）出现以下界面，表示项目启动成功