VUE3.0 从9月份正式发布到现在已经过去两个月了,大家是否已经开始在项目中应用了呢?即使没有在项目中应用,想必大家也开始着手学习了吧,今天就来讲讲通过 VUE-CLI 创建 VUE3.0 项目的流程。
一、 安装最新版的 VUE-CLI
npm install -g @vue/cli
安装成功后可通过 vue --version
查看版本号,如下图:
二、 创建 VUE3.0 新项目
第一步,创建项目
vue create group-photo
注:group-photo 是我的项目名称,创建时请换成自己的项目名称
第二步,选择项目模板
第一个是 VUE2.0 的默认模板,第二个是 VUE3.0 的默认模板,第三个是手动选择配置,不使用模板。这里我选择的是第三个手动选择模板,自己进行配置。
第三步,模板配置
大家根据自己的项目需求进行选择,通过上下箭头进行切换,然后通过空格键进行选定,选定之后前面括号里会出现 * 号。
第四步,选择 VUE 版本
选择 VUE 的版本,这里我们当然是选择 3.x
第五步,是否使用class风格的组件语法
因为 ES6 和 typescript 本身支持类对象 class 语法的写法,所以我这里选择了N
第六步,是否使用Babel
因为我项目中没有使用 JSX 语法,并且打算使用 typescript,所以这里我选择了N,大家根据自己项目情况选择
第七步,配置 Lint 触发方式
第一个是在保存时进行 Lint 验证,第二个是在提交时进行 Lint 验证和修复。这里我选择了第一个:保存时进行验证。
第八步,配置项存放位置
第一个是将配置项存放在 package.json 文件里,第二个是将配置项存放在单独的文件里。这里我选择了第二个:存放在单独文件里。
第九步,是否将当前的配置保存为模板供下次使用
这里我选择了N,不保存为模板。
第十步,创建成功如下图所示
到此,我们的 VUE3.0 项目就创建完成了...
三、UI界面方式创建新项目
最新版的 VUE-CLI 除了命令行的方式创建项目,还可以通过UI界面操作的方式创建项目。使用方式,在控制台输入如下命令:
vue ui
运行成功后如下图:
它启动了一个端口号为 8000 的服务,我们通过浏览器打开这个地址,会看到如下界面
可以在界面上直接创建新项目,流程和命令行方式是一样的,如果你不喜欢命令行的方式创建项目,那么可以选择UI界面的方式。