在本教程中，我们将探索 Vue CLI 3 以及 Vue UI，以便快速搭建我们的项目。然后，我们将浏览 CLI 为我们创建的项目，以便稍后在这些文件和文件夹中轻松工作。
您可能知道，CLI 代表命令行界面，Vue CLI 为快速 Vue.js 开发提供了完整的系统。这意味着它为我们做了很多繁琐的工作，并为我们提供了开箱即用的有价值的功能。
它允许我们选择我们的项目将使用哪些库， 然后它会自动将它们插入到项目中。
它配置 Webpack 当我们使用 Webpack 构建应用程序时，我们所有的 JavaScript 文件、我们的 CSS 和我们的依赖项都被正确地捆绑在一起、缩小和优化。
它允许我们编写我们喜欢的 HTML、CSS 和 JavaScript 我们可以使用单文件 .vue 组件、TypeScript、SCSS、Pug、最新版本的 ECMAScript 等。
它支持热模块更换 (HMR) 因此，当您保存项目时，更改会立即显示在浏览器中。此配置基于webpack-dev-server。
为了使用 CLI，您需要安装Node.js版本 8 或更高版本（推荐 8.10.0+）。
要安装 CLI，请在终端中运行以下命令：
npm i -g @vue/cli
安装后，您将可以在命令行中访问vue二进制文件。我们将使用它来创建我们的项目。
有两种方法可以创建我们的项目。使用较新的 Vue UI，或者直接从命令行，我们现在将使用：
vue create real-world-vue
该命令将开始创建一个名为“real-world-vue”的 Vue 项目。
然后，系统将提示我们选择默认预设或手动选择功能。使用向下箭头键，我们将突出显示Manually select features，然后按 Enter。
然后我们会看到一个功能选项列表。使用向下箭头键，我们将向下移动并使用空格键选择Router、Vuex和Linter / Formatter。然后点击进入。
然后我们将选择一个 Linter / Formatter。对于这个项目，我们将使用ESLint + Prettier。
我们将在保存时添加 Lint的附加功能。
为了本课程的目的，我们将选择使用专用的配置文件。
我们可以选择将所有这些设置保存为预设。我们会选择不使用N.
但是，如果您想将其保存为预设，它将存储在以.vuerc您的用户主目录命名的 JSON 文件中。
如果您安装了 yarn，系统会提示您选择包管理器。我会选择npm。
当我们点击回车时，我们的项目将自动创建。
一旦我们的项目创建完成，我们就可以cd进入。为了在我们的浏览器中实时查看它，我们将运行以下命令： npm run serve
上面是我们的应用程序，在浏览器中实时运行。它已经有两个页面，主页和关于页面，您可以在它们之间导航，因为它使用的是 Vue Router。
现在我们了解了如何从命令行创建 Vue 项目，让我们重复同样的过程，但使用 Vue UI。
由于我们现在可以访问vue二进制文件，我们可以vue ui在终端中输入，这将在我们的浏览器中启动 Vue UI。
我们的第一步是单击Create选项卡，选择我们要保存项目的位置，然后单击Create a new project here。
然后，我们将为我们的项目命名，在本例中为“real-world-vue”。我们可以选择包管理器，但我们会坚持使用默认设置。
就像从终端一样，我们将手动选择功能。
我们将选择Router、Vuex ，并确保Babel和Linter / Formatter也被选中并选择Dedicated Config Files。
在下一页上，我们要确保选择了保存时的 Lint，然后在右侧的下拉列表中选择ESLint + Prettier。
我们还可以选择将这些设置保存为预设，但我们可以通过单击继续不保存来选择不保存。
现在我们的项目将被创建。
UI 提供了更改我们的配置以及运行任务的能力，例如我们之前从终端运行的服务任务。这里的不同之处在于我们获得了更多关于该任务正在发生的事情的信息。
您还可以从 Vue UI 向您的项目添加插件，这使得添加您可能需要的库变得非常简单。
如果您需要导入最初不是从 Vue UI 创建的项目，您可以从Project Manager的Import选项卡轻松完成。只需找到您的项目，然后单击Import this folder。
现在我们知道如何从终端和 UI 创建我们的项目，让我们看看为我们创建的项目。
node_modules目录是存储我们构建 Vue 所需的所有库的地方。
在公共目录中，您可以放置在我们构建项目时不想通过 Webpack 运行的任何静态资产。
您需要将大部分资产（例如图像和字体）放在assets目录中，以便 Webpack 可以优化它们。
components目录是我们存储 Vue 应用程序的组件或构建块的地方。
views目录是我们为应用程序的不同视图或页面存储文件的地方。
App.vue文件是所有其他组件都嵌套在其中的根组件。
main.js文件用于渲染我们的App.vue组件（以及嵌套在其中的所有内容）并将其挂载到 DOM。
下面我们有一个router.js文件，我们将在 Vue Router 课程中详细介绍，store.js文件用于 Vuex，我们还将在以后的课程中介绍。
最后，我们有一个.gitignore文件，我们可以在其中指定我们希望 git 忽略的内容，以及一个babel.config.js文件和我们的package.json，这有助于 npm 识别项目并处理其依赖项。
您现在可能想知道，应用程序是如何加载的？让我们来看看那个过程。
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
Vue.config.productionTip = false;
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
在我们的main.js文件中，我们看到我们正在导入 Vue，以及我们的根App.js组件，以及我们的router和store。然后我们创建一个新的 Vue 实例，告诉它使用router和store，并渲染 App（我们的根组件）并将其挂载到 DOM，这个 id 就在其中"app"。
如果我们查看我们的 Index.html 文件，我们可以看到有一个 id 为 的 div "app"，这意味着这是我们App将被挂载的地方。
Our App will be mounted here
让我们更直观地看一下这个过程：
现在我们了解了 App 是如何渲染和挂载的，让我们看一下构建过程。因为记得？Webpack 会将我们的文件捆绑在一起。
如果我们仔细查看我们的Index.html文件，我们会看到以下注释：
那是什么意思？
让我们返回终端并运行命令来探索它npm run build。这将构建我们的项目，当它完成时，我们看到它说，“dist 目录已准备好部署”。
唔。让我们打开为我们创建的dist目录。
如果我们打开我们的Index.html，我们可以看到现在有两个脚本标签，它们已经被自动注入，注释曾经是（“构建的文件将被自动注入”）。
chunk-vendors.24971a46.js文件包含我们所有的依赖项。
它下面的App.5f694b83.js文件包含我们所有应用程序特定的代码，包括Main.js 中的代码，它渲染和挂载我们的App。
因此，当我们的项目被部署，并且浏览器读取这个App.5f694b83.js文件时，这将触发我们刚刚在视觉上看到的过程，我们的 Vue 实例被创建，我们的应用程序被渲染，然后被挂载到 DOM。