今天，我们以一个管理平台为例，演示一下通过可视化面板来创建项目，并完成它的初始化配置。
首先，win+R 打开命令行，输入命令vue ui 以启动GUI面板（须安装vue3.0以上的版本）。如果版本较低，先执行 npm uninstall vue-cli -g 命令卸载当前版本，再执行 npm install -g @vue/cli 命令来安装最新版本。安装好以后重新执行vue ui 命令，此时就会启动GUI 面板（如图1），让我们通过可视化的方式来创建vue项目。
接着点击图1所示的“创建”按钮，进入到目录选择面板，选择一个项目的存放路径。我们选择存放到桌面，也就是Desktop(如图2）：
里面有一个提前建好的文件夹：项目实战Day1，选择把它放到这里面去（如图3）：
再选择把项目放到此文件夹下的code目录中（如图4）：
选中code之后，再点击图5所示的“在此创建新项目”。
此时会进入到一个新的面板（如图6），我们需要给项目起一个名称：vue_shop（必须是英文的）
接着下拉到Git，填写一个git初始化的提交信息（如图7），在这里它已经默认初始化了git了，我们只需要提交一个信息，写一个init project，点击下一步
在这里我们会进入到预设面板（如图8），如果你曾经创建过vue项目，那么你可以选择曾经使用并且保存过的预设，那如果你不想用这些预设的话，你可以手动配置项目，这里我们就演示一下手动配置：
点击下一步，我们会进入到一个功能面板（如图9），在功能面板中我们可以选择安装哪些主要的功能：首先Babel一定要安装，打开右边对应的按钮，就代表我们要安装此项功能。还要安装一下路由Router
接着再往下拉（如图10），Linter/Formatter一定要安装，通过它可以把我们的源代码进行代码的格式校验，方便我们的代码风格一致。最后把“使用配置文件”这一项选中，然后点击下一步
我们会进入到配置面板（如图11），在这个面板中，它默认提供了有三项：
第一项是询问我们是否使用历史模式的路由，在这里我们选择右边按钮关闭这一项，我们会使用hash模式的路由，因为hash模式的兼容性更强一点。
第二项是让我们选择一个Linter/Formatter的配置文件格式，我们点击右边的下拉菜单，选择里面的ESLint+Standard config 这一项，也就是标准的配置文件。
第三项还有一个Pick additional lint features,在这里我们默认选择Lint on save就好了，意味着只要我们按了ctrl+s保存文件，就会对我们所写的代码进行可视校验。
这三项配置完成之后点击“创建项目”
此时，它会询问我们是否将刚才的所有操作保存为一个新的预设（如图12）。如果你希望保存，就在上面填写一个名称就好了。如果你不希望保存，就直接点击“创建项目，不保存预设”。在这里我们可以选择做一下保存：填写预设名称，再点击“保存预设并创建项目”
此时就进入了项目的创建过程中（如图13），耐心等待一下
经过了一番耐心的等待，我们这个项目就已经创建完成了（如图14）
接下来我们要在项目中安装并且配置一下Element-UI组件库：
如图15，首先，打开项目仪表盘，选择插件这一项，在里面要安装一个新的插件，此时可以点击右上角的“添加插件”这个按钮
在弹出层里我们可以查找一下相关的插件，如图16，输入插件的名称，找到对应的插件
然后我们选中Element-UI这个插件，右下角点击安装（如图17）
耐心等待一下，
当Element-UI这个插件安装完成之后，我们需要对这个插件做一下相关的配置：
首先，把默认的 Fully import （这个是默认把所有的UI组件都引入到项目，这样会导致项目结构比较臃肿）改成 Import on demand（代表按需导入）。
下面一项zh-CN是默认的语言模式，默认是中文就可以，不用更改。
然后点击“完成安装”
再耐心等待一下，完成结果如图19：
到此为止，关于Element-UI就已经安装完成了。
紧接着我们要配置一下axios,从而支持我们在项目中发起网络数据请求：
首先还是要打开可视化面板，这次要选中依赖（如图20），在右上角点击“安装依赖”
在安装依赖中搜索一下axios插件（如图21）,然后选择这个插件（注意要把它安装到运行依赖），选中之后点击下面的“安装axios”,再次等待一下
经过一番等待，我们axios就已经安装完成了。
到此为止，我们已经初步把创建的vue项目做了一个初始化。
