简介

说明

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

系列文章

概述

功能

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

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

对比命令行的优势

使用简单
可以退到上一步

配置的保存位置

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

步骤1：启动图形化界面

命令：vue ui

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

情况1：之前创建过项目

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

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

结果：

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

进入会是这个界面：

步骤2：创建项目

项目位置和名字等

点击创建

点击“在此创建新项目”

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

点击“下一步”

选择预设项

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

选择组件

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

本处我的选择为：

点击“下一步”

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

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

本处我的选择为：

是否保存预设

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

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

创建后的项目结构

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

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 的具体来源和版本号。