如何快速部署一个Vue Cli项目？一篇文章帮你搞定

2021-10-3017:05:51 发表评论

摘要

之前，已经结合实例介绍和学习了Vue.js的基础知识，具体可以参看下方的前情提要，接下来就是要在实际项目中使用了，本篇文章就是使用Vue Cli来快速部署一个Vue完整框架，只需要在框架进行自己的修改就可以了，那么该如何部署呢？请看本篇……

分享至：

开篇寄语

之前，已经结合实例介绍和学习了Vue.js的基础知识，具体可以参看下方的前情提要，接下来就是要在实际项目中使用了，本篇文章就是使用Vue Cli来快速部署一个Vue完整框架，只需要在框架进行自己的修改就可以了，那么该如何部署呢？请看本篇。

前情提要

前提准备

靠谱的编辑器，伯衡君一般使用VS code
本机安装Node.js

内容详情

在构建新的 Vue 应用程序时，快速启动和运行的最佳方法是使用 Vue CLI。这是一个命令行实用程序，允许您从一系列构建工具中进行选择，然后它将为您安装和配置。它还将为您的项目搭建完整模版，为您提供一个可以构建的预配置，而不是从头开始。

Vue CLI 的最新版本是版本 3。它为 Vue 开发人员提供了全新的体验，帮助他们开始开发 Vue 应用程序，而无需处理 webpack 等工具的复杂配置。同时，它可以使用插件进行配置和扩展，以用于高级用例。

Vue CLI v3 是一个用于快速 Vue.js 开发和原型设计的完整系统。它由不同的组件组成，例如 CLI 服务、CLI 插件和最近的 Web UI，允许开发人员通过易于使用的界面执行任务。

在本文中，我将演示如何安装最新版本的 Vue CLI 以及如何创建、提供和构建示例项目。

安装

首要是要安装Node.js到本机，这个需要前往Node.js官网进行安装，安装完成后，就可以在Terminal或者CMD运行下面的安装Vue Cli代码：

npm install -g @vue/cli

等待安装完成，安装完成后，再运行下面的代码：

vue create xxx

这个'xxx'是你的项目名称，任意命名，按确定后，会出现版本选择，如下所示：

因为之前的基础知识都是以Vue3版本为例的，所以就直接选择Vue3这个选项了。

需要等待一段时间安装，安装完成后，就会在编辑器，比如VS code右侧看到生成的项目文件夹了，如下图所示：

当你看到App.vue有生成，那么就恭喜你，已经创建好了一个Vue完整项目了，通过在Terminal先后输入：

cd demo
yarn serve

创建的Vue项目就可以生成预览效果了，之后会看到生成的链接，如下图所示：

随后，就可以在本地运行查看该项目的生成效果，打开浏览器，复制粘贴该链接，或者直接在Terminal内，按住cmd+鼠标左键（Mac电脑），点击该链接也可以。

浏览器中展现的模样，如下所示：

可以看到这个事默认的生成效果，那么如何开始展现自己想要它呈现的样子呢？

那么就需要返回编辑器，看到左侧有一个App.vue文件，没错了，就是从其中修改，如下图所示：

如果把App.vue文件中<template>标签删除的话，生成效果就会变成空白一片，撤销，再看标签<template>下面可以发现里面还引用了一个名为HelloWorld.vue的文件，这就涉及到了之前所说的Node.js的前端模块化，接下来打开HelloWorld.vue，从里面进行修改，如下图所示：