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