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

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

简介

说明

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

系列文章

1. Vue-cli2--使用/教程/实例_IT利刃出鞘的博客-CSDN博客
2. @vue/cli3--使用/教程/实例_IT利刃出鞘的博客-CSDN博客
3. @vue/cli4--使用/教程/实例_IT利刃出鞘的博客-CSDN博客_vuecli4中文文档
4. @vue/cli4--使用图形化界面创建项目--方法/实例_IT利刃出鞘的博客-CSDN博客

概述

功能

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

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

对比命令行的优势 

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

配置的保存位置

图形化配置后，会保存到：/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 的具体来源和版本号。 

项目管理

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

仪表盘

插件

依赖

配置

任务

导入项目

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