首页 > 其他分享 >生成一个vue3的博客

生成一个vue3的博客

时间:2023-09-09 11:33:53浏览次数:30  
标签:npm vue 创建 博客 生成 Vue vue3 组件

Vue 3 是一个流行的 JavaScript 框架,用于构建用户界面。要生成一个 Vue 3 的博客,您需要按照以下步骤进行操作:

  1. 首先,确保您的环境中已经安装了 Node.js 和 npm(Node 包管理器)。您可以通过在命令行中运行 node -vnpm -v 来检查它们的版本。
  2. 在您喜欢的目录中创建一个新的 Vue 3 项目。可以使用 Vue CLI 来创建和管理 Vue 项目。如果您尚未安装 Vue CLI,请在终端中运行以下命令进行安装:
npm install -g @vue/cli@next
  1. 使用 Vue CLI 创建一个新的 Vue 3 项目。在终端中运行以下命令,并按照提示进行配置:
vue create my-blog
  1. 在项目目录中导航到 my-blog,然后安装博客所需的依赖项。运行以下命令来安装 Vue Router(用于路由管理)和 Markdown 渲染器(用于呈现 Markdown 文件):
cd my-blog
npm install vue-router marked
  1. 创建一个新的页面组件,用于显示博客文章。在 src/views 目录下创建一个名为 Article.vue 的文件,并在其中编写显示文章的代码。
  2. src/router/index.js 文件中配置路由,将 Article.vue 组件设置为 /article/:id 路径的组件。
  3. 创建一个名为 data.json 的 JSON 文件,用于存储您的博客文章数据。在其中定义每篇文章的标题、内容等。
  4. 编写一个名为 BlogList.vue 的组件,用于显示博客文章列表。在其中使用 data.json 文件中的数据来渲染文章列表。
  5. src/App.vue 文件中使用 <router-view> 组件来呈现页面内容。
  6. 运行以下命令启动开发服务器:
npm run serve
  1. 打开浏览器,并访问 http://localhost:8080 来查看您的博客。。


标签:npm,vue,创建,博客,生成,Vue,vue3,组件
From: https://blog.51cto.com/u_16246846/7418469

相关文章

  • vue3 跳转小程序
    兼容微信内跳转和h5跳转第一步在index.html里面引入SKD<!--公众号JSSDK--><scriptsrc="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script><!--云开发WebSDK--><scriptsrc="https://res.wx.qq.com/open/js/cloudbase/1.1.0/clo......
  • vue3+PHP实战手册(16)
    目录通讯录管理系统登录通讯录管理系统登录使用v-model进行双向绑定,将表单输入框的内容同步给JavaScript中相应的变量,设置了相应的事件监听器。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>通讯录管理系统</title></head>......
  • 解决vue3+js unplugin-auto-import/vite 自动引入生效后 页面eslint报错
           ......
  • 图像描述生成
    之前做毕业设计时,苦于没有高质量的图文数据对,了解到可以由图片生成文本,但也就体验了下模型效果,并没有进行这方面的学习,现在借此机会了解了解。前言imagecaption的目标就是根据提供的图像,输出对应的文字描述。如下图所示:对于图片描述任务,应该尽可能写实,即不需要华丽的语句,只需要陈......
  • 【Python 自动化】小说推文一键生成思路概述
    最近看了一下小说推文成品软件的思路,发现可以完全迁移到我的BookerAutoVideo上面来。这篇短文里面,我试着分析一下整个推文视频生成的流程,以及简要阐述一下有什么工具。整体流程是这样:分句原文是按照段落组织的,我们可能希望按照句子生成图片。于是我们需要把段落拆成句子,像这......
  • P9488 ZHY 的生成树
    2023-07-3119:29:29solutionP9488ZHY的生成树前言这道题就非常的巧,下午上午上课刚讲完筛法,下午就考到了一个很像筛法的题。当时看到这个数据范围尽往线性做法想了,后面实在想不到就开始想如何带\(\log\)做,先拿个\(60\)pts再说。思路看到这样的求最大生成树,首先先排除......
  • 如何在博客页脚添加一个好看的蓝色波浪呢?
    前言:这个是一个美化页脚的代码,我相信很多博友都知道是怎么弄的,本文是为专为新手们准备的教程教程开始:在你的主题目录找到footer.php文件,打开编辑在</footer>下或者在footer.php文件里的末尾添加以下代码即可。<!--底部波浪开始--><divclass="wiiuii_layout"><svg......
  • .netcore 使用iTextSharp生成pdf文件
     使用Nuget添加iTextSharp引用主要代码usingiTextSharp.text.pdf;usingiTextSharp.text;usingSystem.IO;usingAutoMapper;usingSystem.Linq;usingSystem.Drawing;usingstaticiTextSharp.text.Font;usingSystem.Text;namespaceWebApi.Common.Service......
  • 深度理解vue3中选项式语句和组合式语句的区别
    选项式语句和组合式语句是Vue3中的两种不同的编程风格,它们都是用于编写Vue组件的方法。在本文中,我将详细介绍选项式语句和组合式语句的概念、区别和使用场景。选项式语句是Vue3中最常用的编写组件的方式之一。它使用了Vue的选项对象,其中包含了组件的各种选项,如数据、计算......
  • php-PhpSpreadsheet设置生成的excel文件列宽度及字体大小
    usePhpOffice\PhpSpreadsheet\Spreadsheet;usePhpOffice\PhpSpreadsheet\Writer\Xlsx;//创建新的Excel实例$spreadsheet=newSpreadsheet();//获取当前工作表$worksheet=$spreadsheet->getActiveSheet();//设置列宽自动调整的范围$worksheet->getStyle('B1:C1'......