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

百度已收录   阅读次数: 89
2021-10-3017:05:51 发表评论
摘要

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

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

开篇寄语

之前,已经结合实例介绍和学习了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'是你的项目名称,任意命名,按确定后,会出现版本选择,如下所示:

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

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

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

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

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

cd demo
yarn serve

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

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

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

浏览器中展现的模样,如下所示:

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

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

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

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

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

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

将该模版中的所有<ul>标签都去掉的话,再看生成的项目模样就会变成这样了:

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

好,基本上本篇文章就介绍到这里,是不是很简单呢?接下来你就可以根据你的创意来打造自己的项目了,运用之前所学的基础知识。

分享至:
  • 我的微信
  • 微信扫一扫加好友
  • weinxin
  • 我的微信公众号
  • 扫描关注公众号
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: