vue项目保存没有自动更新_最新版VUECLI创建VUE3.0项目流程讲解

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界面的方式。