准备工作
检查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 打开可视化面板完成项目的创建,一下安装步骤一致:
安装步骤
-
输入上面创建项目的指令后,进入到选择页面:
上面的是我保存的预设,这里我们选择最后一项,进行自定义设置(空格进行选择,回车进入下一步)
-
下一步,我们可以看到提供了一系列的支持选项,我们可以选择自己需要的:
我这里项目需要 Typescript,所以除默认选择外就选择了第三个,然后回车下一步 -
这里询问要使用 vue 的哪一个版本,我们选择3.x就行了
扫描二维码关注公众号,回复: 13554566 查看本文章 -
这里是问你,需不需要 class-style 的组件来支持ts,由于 vue3 重写之后,不用 class 也会写的很舒服,也不需要额外的配置,所以我这里选择 N
5.这里是问你,是否需要结合 Babel 和 ts 一块使用,babel会自动帮你添加 polifill 和转换 JSX,我这里不需要,所以选择n
6.然后是问你关于 eslint 的一些配置,这里默认就行,不用添加额外的规则
-
下面是问你 Lint 的特性,是在默认保存时进行 Lint 还是在 commit 的时候他帮你 Lint,这里就选择默认
-
询问是将配置文件放在单独文件还是 package.json 文件里,这里选择单独文件
-
询问是否要保存为预设,方便以后一键安装,这里看自己需求,我选择n
安装完成
最后回车,显示如下界面,就说明我们已经安装成功啦
npm run serve 运行项目