首页 前端知识 【VUE】创建一个vue项目详细步骤

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

2024-09-21 21:09:49 前端知识 前端哥 879 843 我要收藏

一、环境准备

安装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)出现以下界面,表示项目启动成功

转载请注明出处或者链接地址:https://www.qianduange.cn//article/18539.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!