1 Vue CLI图形用户界面(GUI)

Vue CLI引入了图形用户界面（GUI）来创建和管理项目，功能强大，给初学者提供了很多便利，可以快速搭建一个Vue项目。
打开命令行工具，输入命令：vue ui，打开图形用户界面。如下图所示。

在浏览器地址栏输入http://localhost:8000，打开图形用户界面。如下图所示。

如上图所示的界面类似于一个控制台，以图形化的界面引导开发者去进行项目的创建，根据项目的需求去手动创建并选择配置。界面有3个导航，表示的含义如下。

• 项目：项目列表，展示使用此工具生成过的项目。
• 创建：创建新的Vue项目。
• 导入：允许从目录或者远程GitHub仓库导入项目。

在屏幕底部的状态栏上，可以看到当前目录的路径，单击水滴状图标按钮可以更改页面的主题（默认的主题为白色）。

2 使用Vue CLI构建项目

单击顶部导航栏的“创建”选项，然后单击“在此创建新项目”按钮，会进入一个创建新项目的页面。

在顶部项目文件夹标题下输入项目名，包管理器选择默认，Git选项根据需求选择是否初始化到云端，公司内部项目不建议上传。

点击“下一步”按钮，进入预设界面。选择“手动”并点击“下一步”按钮。此处需要选中的项为：Babel、Router、使用配置文件。


点击下方“创建项目”按钮，弹出一个对话框会提醒是否需要保存当前的预设功能。此处自行选择，可以不保存并点击“创建项目，不保存预设”，也可以在输入预设名后选择“保存预设并创建项目”。

创建项目成功后，再来看图形化用户界面。左侧有导航菜单。

点击“插件”到插件管理的页面，点击右上角的“添加插件”。搜索“vue-cli-plugin-element”，选择并安装插件。这是一个组件库。具体使用方法在Element-UI官网查看文档。

选中项目仪表盘中的“依赖”，进入依赖管理界面，点击右上角的“安装依赖”，安装“less”和“less-loader”两个依赖，这两个是CSS的预处理器。

3 运行Vue项目

选中项目仪表盘中的“任务”，进入任务管理界面。选中“serve”，再点击右侧的运行。如下图所示。

成功运行后，到浏览器的地址栏中，输入地址：http://localhost:8080

打开新建的项目。如下图所示。

4 发布Vue项目

在项目仪表盘中选中“任务”，再选择“build”，点击右侧运行。

编译完成后，到项目文件夹中，找到dist文件夹。如下图所示。

打开dist文件夹，将文件夹内所有内容复制到网站目录下。