vue如何通过vue ui创建和管理项目

1.安装

可以使用下列任一命令安装Vue CLI

npm install -g @vue/cli
# OR
yarn global add @vue/cli

检查安装是否成功

vue --version

2.初始化 vue ui

打开Vue 项目管理器

vue ui

效果如下：

Vue项目管理器

如果vue ui已经创建或者导入过项目，默认进入的是上一次打开项目的仪表盘，需要点击右上角的项目名称，点击“Vue项目管理器”，进入项目管理器。

Vue项目管理器

3.创建项目

点击创建

Vue项目管理器

点击在此创建新项目

Vue项目管理器

输入项目名称，该名称会在当前路径建立文件夹，可以修改当前的路径。选择包管理器，填写初始化git仓库，可以不填。

Vue项目管理器

点击下一步

Vue项目管理器

选择预设，这个怎么选择都可以，在项目创建之后，你仍然可以通过安装插件来增加功能，在此我们选择手动配置项目，进入功能选择。

Vue项目管理器

我们选择了Router和Vuex这两个一般项目基本上都会用到，选择了CSS Pre-processors使用CSS预处理器，至于是Sass、Less还是Stylus后边会选择，点击下一步

Vue项目管理器

配置的内容会根据上一步功能的选择来决定，当功能选择了Router所以这一步就会有是否使用History模式，功能项选择了CSS预处理器，配置项就要求选择对应的CSS预处理器是哪个。

Vue项目管理器

点击创建项目

Vue项目管理器

如果需要将刚才的预设保存，填写预设名，点击“保存预设并创建项目”，这样在此创建项目可以快速使用该预设，如果不需要，则直接点击“创建项目，不保存预设”

Vue项目管理器

等待一段时间，等待的时间跟选择的功能项多少和网络速度有关，下载完成后，会自动进入项目仪表盘，如下图。

Vue项目管理器

点击左侧导航“任务”——“serve”——“运行”

Vue项目管理器

运行编译成功后变成如下页面。

Vue项目管理器

点击右上角启动app

Vue项目管理器

进入默认启动页面，项目创建完成。

Vue.js App

4.项目管理

点击左侧导航栏“插件”可以查看已安装的插件，再点击右上角“添加插件”

Vue项目管理器

搜索安装你需要的插件。

Vue项目管理器

依赖跟插件操作一致。

Vue项目管理器

可以在此直接安装我们的依赖项，比如，我们安装一个ant-design-vue，在搜索框输入“ant-design-vue”，选择结果，然后点击“安装ant-design-vue”

Vue项目管理器

安装时页面会卡住，等待下载安装完成后，自动恢复。这个时候你的运行依赖就会多了一个ant-design-vue。

Vue项目管理器

可以再项目文件的node_modules查看

依赖项文件夹

等同于

$ npm install ant-design-vue --save

点击左侧导航“配置”，可对现有插件进行配置，可以不用一个个修改配置文件，直接通过界面可视化进行项目配置，如公共路径、输出目录、资源目录等

Vue项目管理器

项目任务可进行项目开发环境的编译、生产环境编译压缩、lint检查、webpack检查、单元测试等

查看输出日志

Vue项目管理器

内存分析

Vue项目管理器

在build编译发布版本

Vue项目管理器

编译至我们配置的dist文件夹，进行发布。

编译压缩文件夹