可视化界面

本节目标：理解“可视化界面”的核心思路，并能把它用于实际开发或面试表达。

说明：原 OneNote 中有图片引用，但图片未包含在导出目录中；本页保留了可用的文字与代码内容。 ==当然，除了使用上述命令行构建外，====vue-cli 3.x== ==还提供了可视化的操作界面，在项目目录下我们运行如下命令开启图形化界面：== ==vue ui====== ==之后浏览器会自动打开本地== ==8000== ==端口，页面如下：==

==如果你还没有任何项目，那么可以点击创建或者直接导入现有的项目。创建项目和我们使用命令行的步骤基本相同，完全可视化操作，一定程度上降低了构建和使用的难度。项目创建或导入成功后你便可以进入项目进行可视化管理了。==

==在整个管理界面中，我们可以为自己的项目安装== ==CLI== ==提供的插件，比如安装== ==@vue/cli-plugin-babel====插件，同时我们也可以配置相应插件的配置项，进行代码的编译、热更新、检查等。详细的操作大家可以自己进行手动尝试，相信你会发现意想不到的惊喜。== 你还需要了解什么 ==上方我们用== ==vue-cli== ==成功生成了一个最基础的== ==Vue== ==项目，麻雀虽小，五脏俱全，但是想要让麻雀飞起来，我们还要不断的给它进行拓展训练，那么我们还需要了解什么呢？==

==以上这些内容（包含但不限于）将会在本小册的接下来几章进行详细的讲解，你准备好了吗？== > 来自

 <https://juejin.im/book/5b23a5aef265da59716fda09/section/5b23a5aef265da59622aa69d>