使用VueCLI的User Interface Tool(GUI)建立app的图文讲解

(英文原文)

须要安VueCLI3和nodejs。

 

在terminal输入vue能够看到命令列表：

其中vue ui [options] 就是用于开始和打开vue-cli ui的命令。

使用http://localhost:8000 端口打开Gui网页：

点击右上角？号

显示一些连接。

如：https://forum.vuejs.org/c/chinese   （发帖子的地方）

 

项目：显示目前追踪的项目。

建立，创建一个新的项目。和这个命令vue create <name>同样。

导入：从一个目录或远程仓库导入一个project。

须要等一会。

而后安装成功：

尝试一下各个功能把！没啥说的越用越熟！

 

任务

 

serve选项

点击run task,至关于命令yarn serve,启动服务器。

控制台是显示各类状态

输出就是显示和terminal上的信息同样的log, task process:

分析Analyzer：出现一个分析图：

建立了一个图表来显示你的代码的各类依赖。

• 紫色部分表明开发者写的代码。
• 绿色部分表明从依赖引进的代码。

 

Build选项

和serve section相似，只是它产生一个production bundle, 这个bundle被用来部署app。 

点击运行，会等一会，它会编译和压缩程序。

最后成功后，给出提示。并能够在<输出>tab看信息。

分析tab，有不一样的分析模式：

 

Lint选项

lint your code and give you an output.

$ vue-cli-service lint
 DONE  No lint errors found!

Total task duration: 15.42s

 

 

test:unit

运行单元测试

 

Inspect

输出webpack的配置的信息，到json file