vue3专栏项目 -- 项目介绍以及准备工作

这是vue3+TS的项目,是一个类似知乎的网站,可以展示专栏和文章的详情,可以登录、注册用户,可以创建、删除、修改文章,可以上传图片等等。

这个项目全部采用Composition API 编写,并且使用了TypeScript,还使用了新版全家桶:路由vue-router、状态管理vuex、脚手架工具vue-cli。

还包括前后端分离开发的难点:

·权限管理:怎样在全局获取用户的权限

·路由规则:针对不同的权限设置路由规则

·全局store结构设计:怎样设计一个复杂合理的store结构

·前端数据缓存设计与实现:怎样防止异步资源的重复发送和浪费

真实的后端环境:告别Mock环境,直接使用线上真实数据。在api.vikingship.xyz/网站中可以看到这个项目中所有需要使用的API,同时表明它们的请求参数,返回和类型。

1、创建项目:

vue3项目首先要保证vue cli是4.5.0以上,可以通过vue --version查看。然后通过vue create 自己起的项目名称,回车即可出现如下,我们选择最后那个即手动选择,因为我们还需要TS的支持

使用空格选择上TS,然后如下点击回车

注意这里选择3版本

2、准备

(1)之前vue2项目用的是vetur插件,现在vue3项目我们禁用掉vetur改为安装volar插件,这里遇到了vscode与它版本兼容的问题,网上有方法,我是直接升级了vscode的版本解决的 

(2)我们使用Bootstrap的样式库

比如,如下我们直接给它添加class="border"就可以有第一个图那种边框,添加class="border-top"就可以有第二个图那种只有上面有边框这样子,我们就不用写css样式了

现在我们来安装它,直接npm install bootstrap@next --save即可安装最新版本

接下来我们就开始敲代码

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/321960.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用Docker安装MySQL5.7.36

拉取镜像并查看 docker pull mysql:5.7.36拉取成功后查看(非必须) docker images创建并设置宿主机 mysql 配置文件目录和数据文件目录 创建相关文件夹将容器中的mysql数据保存到本地,这样即使容器被删除,数据也不会丢失。 mkd…

洛谷 P4148:简单题 ← KD-Tree模板题

【题目来源】https://www.luogu.com.cn/problem/P4148【题目描述】 你有一个 NN 的棋盘,每个格子内有一个整数,初始时的时候全部为 0,现在需要维护两种操作: ● 1 x y A → 1≤x,y≤N,A 是正整数。将格子 (x,y) 里的数…

Linux 第二十三章

🐶博主主页:ᰔᩚ. 一怀明月ꦿ ❤️‍🔥专栏系列:线性代数,C初学者入门训练,题解C,C的使用文章,「初学」C,linux 🔥座右铭:“不要等到什么都没有了…

[华为OD]C卷 机场航班调度 ,XX市机场停放了多架飞机,每架飞机都有自己的航班号100

题目: XX市机场停放了多架飞机,每架飞机都有自己的航班号CA3385, CZ6678, SC6508 等,航班号的前2个大写字母(或数字)代表航空公司的缩写,后面4个数字代表航班信息。 但是XX市机场只有一条起飞用跑道&am…

链舞算法谱---链表经典题剖析

前言:探究链表算法的奥秘,解锁编程新世界! 欢迎来到我的链表算法博客,这将是您深入了解链表算法,提升编程技能的绝佳机会。链表作为数据结构的重要成员之一,其动态性和灵活性在实现某些功能上发挥不可替代的…

Android广播机制简介

文章目录 Android广播机制简介广播的基本概念广播的类型广播的使用场景Android广播的优缺点优点缺点 使用Android广播的一些最佳实践: Android广播机制简介 Android广播是一种轻量级的消息传递机制,用于应用程序之间或系统与应用程序之间进行通信。它类似于订阅-发…

缓存淘汰算法中的LRU(Least Recently Used)算法

缓存淘汰算法中,LRU(Least Recently Used)算法是一种常见的算法。它的基本思想是根据最近的访问情况来决定哪些数据被保留在缓存中,哪些数据被淘汰出去。 具体来说,当需要从缓存中淘汰数据时,LRU算法会选择…

OpenAI 高管:一年后,你会觉得现在的 ChatGPT 像笑话一样糟糕|TodayAI

OpenAI 的首席运营官 Brad Lightcap 表示,一年后,你会觉得现在的 ChatGPT 像笑话一样糟糕。未来的 ChatGPT 版本将会有重大升级。他还讨论了 AI 取代人类工作和对电网的压力的可能性。 虽然我们不知道 OpenAI 何时会推出 GPT-5,但公司高管已…

【小黑送书—第二十期】>>K邻算法:在风险传导中的创新应用与实践价值(文末送书)

01 前言 在当今工业领域,图思维方式与图数据技术的应用日益广泛,成为图数据探索、挖掘与应用的坚实基础。本文旨在分享嬴图团队在算法实践应用中的宝贵经验与深刻思考,不仅促进业界爱好者之间的交流,更期望从技术层面为企业在图数…

ADOP带你了解:长距离 PoE 交换机

您是否知道当今的企业需要的网络连接超出了传统交换机所能容纳的长度?这就是我们在长距离 PoE 交换机方面的专业化变得重要的地方。我们了解扩展网络覆盖范围的挑战,无论是在广阔的园区还是在多栋建筑之间。使用这些可靠的交换机,我们不仅可以…

二叉树的基础遍历2.0

1.0入口:二叉树的基础遍历-CSDN博客 在1.0中使用的是简单的结构体建树,本文注重用二维vector建树。 前序,中序和后序的分析1.0已给出,本文不做过多介绍,本文重点讲二叉树的层序遍历。 先奉上前中后序的代码&#xf…

算法提高之能量项链

算法提高之能量项链 核心思想&#xff1a;区间dp 通过观察发现可以将n个珠子最后的n1个数看作石子 合并石子 在l~r的范围内 找k作隔断 #include <iostream>#include <cstring>#include <algorithm>using namespace std;const int N 110,M N<<…

VMware导入ova/ovf虚拟机文件

1.文件-打开-ova文件 2.为新虚拟机起名称 3.等待导入 4.导入完成&#xff0c;可以开始使用 参考链接&#xff1a;VMware导入ova/ovf虚拟机文件

中国家装水管十大品牌排行榜:联塑、日丰、金牛、美尔固、弗锐德等品牌上榜

水管作为家居装修中至关重要的一环&#xff0c;其质量直接关系到我们日常生活的安全和舒适。面对市场上琳琅满目的家装水管品牌&#xff0c;选择一款质量可靠、性能优越的产品成为了许多家庭装修的重要课题。为了助你选购时不踩坑&#xff0c;下面就为大家介绍一下中国家装水管…

vue2 Avoided redundant navigation to current location

再次点击同一个链接会报错 每次使用 push 方法时带上两个回调函数 this.$router.push({name: item.name}, ()>{}, ()>{}) //第二、第三个参数分别为成功和失败的回调函数重写 Vue-router 原型对象上的 push 函数不行 https://blog.csdn.net/weixin_43615570/article/d…

PPPoE实验新手必备:从0到1的网络配置指南!

5月18日&#xff0c;思科华为初级网工课程&#xff0c;等你免费试听 V&#xff1a;glab-mary 今天带大家学习一下华为PPPoE实验配置 01、实验拓扑 02、实验需求 1.完成PPP封装 2.完成PPP的PAP验证 3.完成PPP的CHAP验证 4.完成R1和R2之间的PPPOE 03、实验步骤 a . PPP封…

实测幻方新出的超强AI大模型,中文能力对比GPT4.0不落下风

目前从网上的消息来看&#xff0c;DeepSeek中文综合能力&#xff08;AlignBench&#xff09;开源模型中最强&#xff0c;与GPT-4-Turbo&#xff0c;文心4.0等闭源模型在评测中处于同一梯队。 话不多说&#xff0c;我们开测&#xff01; 1.首先我们来让他直接来一段逻辑推理【并…

Leaflet在WGS84 Web墨卡托投影与WGS84经纬度投影下空间信息变形问题及修正-以圆为例

目录 前言 一、投影的相关知识 1、经纬度投影 2、Web墨卡托投影 二、经纬度投影下的空间信息展示 1、空间信息展示 2、效果展示 3、经纬度投影下的圆修正 三、Web墨卡托投影下空间信息展示 1、底图引用 2、自定义生成圆 总结 前言 在GIS的知识海洋中&#xff0c;对…

软件杯 深度学习花卉识别 - python 机器视觉 opencv

文章目录 0 前言1 项目背景2 花卉识别的基本原理3 算法实现3.1 预处理3.2 特征提取和选择3.3 分类器设计和决策3.4 卷积神经网络基本原理 4 算法实现4.1 花卉图像数据4.2 模块组成 5 项目执行结果6 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &a…

Flask gevent启动报错UnicodeDecodeError

文章目录 环境代码报错Track解决思路 环境 acondana 24.1.2python 3.7.13 32bitflask 2.2.3gevent 21.8.0 代码 port 7236 logging.basicConfig(levellogging.INFO, # 控制台打印的日志级别filename./logs/app.log, # 将日志写入log_new.log文件中filemodea, # 模式&…