手把手教你创建第一个Vue3项目

准备工作

检查node版本

输入node -v 检查你电脑安装的node版本,要保证在10以上
在这里插入图片描述

安装脚手架 Vue Cli

安装或者升级指令:

npm install -g @vue/cli

Or

yarn global add @vue/cli

要保证自己的脚手架版本在 4.5.0 以上
安装成功成功后输入指令检查版本

vue --version

创建项目

输入指令创建项目

vue create my-project

注: 下面我使用命令行完成项目创建的步骤,喜欢可视化界面的也可以输入 vue ui 打开可视化面板完成项目的创建,一下安装步骤一致:

安装步骤

  1. 输入上面创建项目的指令后,进入到选择页面:
    上面的是我保存的预设,这里我们选择最后一项,进行自定义设置(空格进行选择,回车进入下一步)
    在这里插入图片描述

  2. 下一步,我们可以看到提供了一系列的支持选项,我们可以选择自己需要的:
    在这里插入图片描述
    我这里项目需要 Typescript,所以除默认选择外就选择了第三个,然后回车下一步

  3. 这里询问要使用 vue 的哪一个版本,我们选择3.x就行了
    在这里插入图片描述

  4. 这里是问你,需不需要 class-style 的组件来支持ts,由于 vue3 重写之后,不用 class 也会写的很舒服,也不需要额外的配置,所以我这里选择 N
    在这里插入图片描述
    5.这里是问你,是否需要结合 Babel 和 ts 一块使用,babel会自动帮你添加 polifill 和转换 JSX,我这里不需要,所以选择n
    在这里插入图片描述
    6.然后是问你关于 eslint 的一些配置,这里默认就行,不用添加额外的规则
    在这里插入图片描述

  5. 下面是问你 Lint 的特性,是在默认保存时进行 Lint 还是在 commit 的时候他帮你 Lint,这里就选择默认
    在这里插入图片描述

  6. 询问是将配置文件放在单独文件还是 package.json 文件里,这里选择单独文件
    在这里插入图片描述

  7. 询问是否要保存为预设,方便以后一键安装,这里看自己需求,我选择n
    在这里插入图片描述

安装完成

最后回车,显示如下界面,就说明我们已经安装成功啦
npm run serve 运行项目

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_45745641/article/details/121191310