@vue/cli3--使用图形化界面创建项目--方法/实例

悠悠 2023-09-28 11:58 14阅读 0赞

原文网址：[@vue/cli3--使用图形化界面创建项目--方法/实例\_IT利刃出鞘的博客-CSDN博客][vue_cli3--_--_IT_-CSDN]

## 简介 ##

**说明**

本文用实例来介绍vue-cli3如何使用图形化界面来创建项目。

**系列文章**

1.  [Vue-cli2--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客][Vue-cli2--_IT_-CSDN]
2.  [@vue/cli3--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客][vue_cli3--_IT_-CSDN]
3.  [@vue/cli3--使用图形化界面创建项目--方法/实例\_IT利刃出鞘的博客-CSDN博客][vue_cli3--_--_IT_-CSDN]
4.  [@vue/cli3--使用命令创建项目--方法/实例\_IT利刃出鞘的博客-CSDN博客][vue_cli3--_--_IT_-CSDN 1]
5.  [@vue/cli4--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客\_vuecli4中文文档][vue_cli4--_IT_-CSDN_vuecli4]
6.  [@vue/cli4--使用图形化界面创建项目--方法/实例\_IT利刃出鞘的博客-CSDN博客][vue_cli4--_--_IT_-CSDN]
7.  [@vue/cli4--使用命令创建项目--方法/实例\_IT利刃出鞘的博客-CSDN博客][vue_cli4--_--_IT_-CSDN 1]

## **概述** ##

**功能**

可以创建工程、配置已有的工程等。

**用一次图形化界面，保证你再也不想用命令行了！**

图形化配置之后，配置会保存到：/node\_modules/@vue/cli-service/lib/webpack.config.js

## **步骤1：启动图形化界面** ##

vue ui

*  这是个全局的命令 在哪个文件夹都可以打开
 *  界面(下图)，重要的项目可以收藏起来(置顶)：
    
    ![37cbc9c211aa3b88436d3518a03b750d.png][]

## **步骤2：创建项目** ##

1.  点击“创建”
    
    ![efde62f6221a69f5c49f9d2f6f6e4640.png][]
2.  创建项目，填一个文件夹名字：
    
    ![6c1480bca5bb1c7291cdbbfc4fed155b.png][]
3.  然后选一下预先保存好的设置就可以了，非常方便，建议采用图形界面来创建项目
    
    ![0a1f46c81c2b6e19767cbc993923fc50.png][]

## **项目管理** ##

当我们点击hello -cli3项目，就会进入项目管理的界面

**1. 仪表盘**

*  这个仪表盘，主要是为了我们操作方便而设置的
 *  可以点击右上角的按钮，来添加/移动这些功能选项。
    
    ![2ce1606494bc0b5d44c73167b28351bf.png][]

**2. vue-cli3.x插件**

*  vue-cli3的插件功能，详情了解[官方文档][Link 1]
    
    ![eb09b45b3f46071b847973191f3d59f5.png][]
 *  cli3插件安装的过程：
    
    ![cli3插件安装的过程][cli3]

**3. 项目依赖**

*  直接在图形界面管理依赖很舒服了！
 *  安装依赖的时候，要记得选择开发依赖/运行依赖！
    
    ![7b6cdcee57cefdf7f8f355f206880ac2.png][]

**4. 项目配置**

*  可以对cli进行一些配置、Eslint规则修改：
    
    ![52194ffe6c9c0145c855fd0d7ab6282a.png][]

**5. 任务**

*  serve 运行项目，点击直接运行，再也不用输入命令了！
 *  可以清楚的看到各个模块用了多久，方便我们**针对性的进行优化**：
    
    ![8e3177c428b6143f40c3574343235d60.png][]
 *  build 打包项目：这里**主要展示了图表的功能**，比以前2.x生成报告更加直观，超级棒！
    
    ![99dd958ae36e48e30e51f530cb5a9992.png][]

**6. 其他**

*  夜间风格界面
 *  直接打开编辑器，很棒了！
 *  还有一些乱七八糟的按钮
    
    ![7a7562224504dd3a26b44f98ee5f22f6.png][]

[vue_cli3--_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/125436578
[Vue-cli2--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/121482857
[vue_cli3--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/121482954
[vue_cli3--_--_IT_-CSDN 1]: https://knife.blog.csdn.net/article/details/125436648
[vue_cli4--_IT_-CSDN_vuecli4]: https://knife.blog.csdn.net/article/details/121482997
[vue_cli4--_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/125397525
[vue_cli4--_--_IT_-CSDN 1]: https://knife.blog.csdn.net/article/details/125436695
[37cbc9c211aa3b88436d3518a03b750d.png]: https://img-blog.csdnimg.cn/img_convert/37cbc9c211aa3b88436d3518a03b750d.png
[efde62f6221a69f5c49f9d2f6f6e4640.png]: https://img-blog.csdnimg.cn/img_convert/efde62f6221a69f5c49f9d2f6f6e4640.png
[6c1480bca5bb1c7291cdbbfc4fed155b.png]: https://img-blog.csdnimg.cn/img_convert/6c1480bca5bb1c7291cdbbfc4fed155b.png
[0a1f46c81c2b6e19767cbc993923fc50.png]: https://img-blog.csdnimg.cn/img_convert/0a1f46c81c2b6e19767cbc993923fc50.png
[2ce1606494bc0b5d44c73167b28351bf.png]: https://img-blog.csdnimg.cn/img_convert/2ce1606494bc0b5d44c73167b28351bf.png
[Link 1]: https://cli.vuejs.org/zh/guide/plugins-and-presets.html#%E6%8F%92%E4%BB%B6
[eb09b45b3f46071b847973191f3d59f5.png]: https://img-blog.csdnimg.cn/img_convert/eb09b45b3f46071b847973191f3d59f5.png
[cli3]: https://img-blog.csdnimg.cn/img_convert/73bb393729b90cb204ae32c5a82ff2a4.png
[7b6cdcee57cefdf7f8f355f206880ac2.png]: https://img-blog.csdnimg.cn/img_convert/7b6cdcee57cefdf7f8f355f206880ac2.png
[52194ffe6c9c0145c855fd0d7ab6282a.png]: https://img-blog.csdnimg.cn/img_convert/52194ffe6c9c0145c855fd0d7ab6282a.png
[8e3177c428b6143f40c3574343235d60.png]: https://img-blog.csdnimg.cn/img_convert/8e3177c428b6143f40c3574343235d60.png
[99dd958ae36e48e30e51f530cb5a9992.png]: https://img-blog.csdnimg.cn/img_convert/99dd958ae36e48e30e51f530cb5a9992.png
[7a7562224504dd3a26b44f98ee5f22f6.png]: https://img-blog.csdnimg.cn/img_convert/7a7562224504dd3a26b44f98ee5f22f6.png