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

怼烎@ 2023-09-28 11:41 10阅读 0赞

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

## 简介 ##

**说明**

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

**系列文章**

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]

## **概述** ##

**功能**

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

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

**对比命令行的优势**

1.  使用简单
2.  可以退到上一步

**配置的保存位置**

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

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

命令：vue ui

*  这是个全局的命令，在哪个文件夹都可以运行它
 *  界面如下图（重要的项目可以收藏起来(置顶)）

### 情况1：之前创建过项目 ###

若之前创建过项目，进入后会是这个地址：[http://localhost:8000/dashboard][http_localhost_8000_dashboard]

![eb50376b52a4444a95744356dfdc7ddd.png][]

此时需要点击左上角进入项目管理：

![a504c894059d4eacbfe533e0e07d6eb1.png][]

结果：

![a5a87ec15b244e61a775caf327edeef7.png][]

### 情况2：之前没创建过项目 ###

进入会是这个界面：

![f73d0d43ee01470f8b0a0eb37db979c9.png][]

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

### 项目位置和名字等 ###

**点击创建**

![be589196a3464b8c89427f435273636c.png][]

点击“在此创建新项目”

**设置项目名，选择包管理工具等**

![e7ffe85673c14396b7dc51a667786d4c.png][]

点击“下一步”

### **选择预设项** ###

![a04f4a0b07724f4c917fa60251681ff7.png][]

默认配置只有babel和eslint，其他的要自己再配置，所以选“手动”。

### **选择组件** ###

![e3309dff39c84d349505850063a27392.png][]

作用跟上边“创建项目（命令行）”一样，本处不再重复。

本处我的选择为：

![c790ad58705e499e9af49ca5a94c6832.png][]

点击“下一步”

### vue版本、history模式、代码检测 ###

选择vue版本、是否使用history模式、代码检测

![67cac7aed8f04215845f52db04fbbbd6.png][]

本处我的选择为：

![98e7ac45ace5432781ad31af4c43bf1f.png][]

**是否保存预设**

如果选择是，则后边项目可以直接使用此配置。本处不保存，即：选择“创建项目，不保存预设”。

![f3827803acc549f2a1f5eb085817414c.png][]

正在创建项目（最下边会打印目前正在干什么）

![f0cdc61610d748b8ae427a9cf63a9dd8.png][]

### **创建后的项目结构** ###

跟用命令行创建结果是一样的。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70][]

*  node\_modules：用于存放我们项目的各种依赖；
 *  public：用于存放静态资源（不会变动的）；
    
     *  public/index.html：模板文件，作用是生成项目的入口文件。
     *  浏览器访问项目时默认打开的是生成好的 index.html。
 *  src：是存放各种 .vue 文件的地方。
    
     *  src/assets：用于存放着各种静态文件（可能会变动），比如图片。
     *  src/components：存放公共组件（可复用），比如 header.vue、footer.vue 等。
     *  src/router/index.js：vue-router 路由文件。
        
         *  需要引入 src/views 文件夹下的 .vue，配置 path、name、component。
     *  src/store/index.js：是 vuex 的文件，主要用于项目里边的一些状态保存。
        
         *  比如 state、mutations、actions、getters、modules。
     *  src/views，存放页面组件（不可复用），比如 Login.vue，Home.vue。
     *  src/App.vue：App.vue 是项目的主组件；
 *  App.vue：根组件，使用 router-link 引入其他模块，所有页面都在 App.vue 下切换。
 *  src/main.js：入口文件，主要作用是初始化 vue 实例，同时可以在此文件中引用某些组件库或者全局挂载一些变量。
 *  .gitignore：配置 git 上传想要忽略的文件格式。
 *  babel.config.js：一个工具链，主要用于在当前和较旧的浏览器或环境中将 ES6 的代码转换向后兼容（低版本ES）。
 *  package.json：模块基本信息项目开发所需要的模块，版本，项目名称。
 *  package-lock.json：是在 npm install 时候生成的一份文件，用于记录当前状态下实际安装的各个 npm package 的具体来源和版本号。

## 项目管理 ##

创建完项目会自动进入项目管理界面，或者可以从主页点击项目进入。

**仪表盘**

![8efaec142e76485b9ddf770938887a7e.png][]

**插件**

![76e497e3244a4e3aa949bcf4ae58ade9.png][]

**依赖**

![7462872a21d143df9378512b2f84b25a.png][]

**配置**

![b7a180dc9ad8427993072e1d99b5607f.png][]

**任务**

![9582dc1f0a5c4e3f97c6686dbf58ed43.png][]

## 导入项目 ##

导入项目的文件夹即可，例如：

![9223f56fbd3049de94ea61a66337f595.png][]

[vue_cli4--_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/125397525
[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]: https://knife.blog.csdn.net/article/details/125436578
[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 1]: https://knife.blog.csdn.net/article/details/125436695
[http_localhost_8000_dashboard]: http://localhost:8000/dashboard
[eb50376b52a4444a95744356dfdc7ddd.png]: https://img-blog.csdnimg.cn/eb50376b52a4444a95744356dfdc7ddd.png
[a504c894059d4eacbfe533e0e07d6eb1.png]: https://img-blog.csdnimg.cn/a504c894059d4eacbfe533e0e07d6eb1.png
[a5a87ec15b244e61a775caf327edeef7.png]: https://img-blog.csdnimg.cn/a5a87ec15b244e61a775caf327edeef7.png
[f73d0d43ee01470f8b0a0eb37db979c9.png]: https://img-blog.csdnimg.cn/f73d0d43ee01470f8b0a0eb37db979c9.png
[be589196a3464b8c89427f435273636c.png]: https://img-blog.csdnimg.cn/be589196a3464b8c89427f435273636c.png
[e7ffe85673c14396b7dc51a667786d4c.png]: https://img-blog.csdnimg.cn/e7ffe85673c14396b7dc51a667786d4c.png
[a04f4a0b07724f4c917fa60251681ff7.png]: https://img-blog.csdnimg.cn/a04f4a0b07724f4c917fa60251681ff7.png
[e3309dff39c84d349505850063a27392.png]: https://img-blog.csdnimg.cn/e3309dff39c84d349505850063a27392.png
[c790ad58705e499e9af49ca5a94c6832.png]: https://img-blog.csdnimg.cn/c790ad58705e499e9af49ca5a94c6832.png
[67cac7aed8f04215845f52db04fbbbd6.png]: https://img-blog.csdnimg.cn/67cac7aed8f04215845f52db04fbbbd6.png
[98e7ac45ace5432781ad31af4c43bf1f.png]: https://img-blog.csdnimg.cn/98e7ac45ace5432781ad31af4c43bf1f.png
[f3827803acc549f2a1f5eb085817414c.png]: https://img-blog.csdnimg.cn/f3827803acc549f2a1f5eb085817414c.png
[f0cdc61610d748b8ae427a9cf63a9dd8.png]: https://img-blog.csdnimg.cn/f0cdc61610d748b8ae427a9cf63a9dd8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210713000635166.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc=,size_16,color_FFFFFF,t_70
[8efaec142e76485b9ddf770938887a7e.png]: https://img-blog.csdnimg.cn/8efaec142e76485b9ddf770938887a7e.png
[76e497e3244a4e3aa949bcf4ae58ade9.png]: https://img-blog.csdnimg.cn/76e497e3244a4e3aa949bcf4ae58ade9.png
[7462872a21d143df9378512b2f84b25a.png]: https://img-blog.csdnimg.cn/7462872a21d143df9378512b2f84b25a.png
[b7a180dc9ad8427993072e1d99b5607f.png]: https://img-blog.csdnimg.cn/b7a180dc9ad8427993072e1d99b5607f.png
[9582dc1f0a5c4e3f97c6686dbf58ed43.png]: https://img-blog.csdnimg.cn/9582dc1f0a5c4e3f97c6686dbf58ed43.png
[9223f56fbd3049de94ea61a66337f595.png]: https://img-blog.csdnimg.cn/9223f56fbd3049de94ea61a66337f595.png