![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
璡龙鱼
前端小混子
展开
-
vue3重构个人网站2——首页
1 首页思路2 轮播图3 文章列表卡片1 首页思路 直接上图,主页跟旧版的类似。开头的固定图片改成轮播图,手动搞了个循环轮播,效果还不错。主体内容仍然是左边导航,右侧推荐文章列表。底部是仓库,邮箱地址等。2 轮播图 轮播图的布局不是很复杂,左右切换键跟中间文字都是绝对定位,所以实际上只有图片。重点是循环轮播的特征,即在最后一张继续点击切换下一张时会切换到第一张,并且保证切换动画方向不变,在很多轮播图插件中,要么在第一张和最后一张无法继续切换;要么是倒退的动画回到第一张或最后一张,我个人原创 2020-09-13 14:17:08 · 1826 阅读 · 0 评论 -
vue3重构个人网站1——路由与导航
1 框架配置2 vue3路由 2.1 路由的颠覆 2.2 路由监听3 导航制作 3.1 下拉框 3.2 搜索框 3.1 侧边栏1 框架配置在vuecli4.5.0以上版本可以直接在创建项目时选择vue版本。vue create projectname与旧版基本类似没有太多变化,一路回车空格即可。这里选用了stylus预编译器方便书写css样式,好了开始吧!2 vue3路由2.1 路由的颠覆 vue3中使用的是composition API,在vue2中js代码可以分为d原创 2020-09-13 11:00:37 · 920 阅读 · 0 评论 -
vuecli4与typeScript实现按键组件的封装
1. 项目创建2. 项目结构3. 标签动态样式及Stylus4. 混合 项目用到了vuecli4脚手架,ts语法,stylus预编译器。最终目标实现一个按键的封装,可通过在标签中定义按键的颜色,边框,圆角,阴影效果。1 项目创建vue create UIButton勾选上Babel,TypeScript,Css Pre-processors三项安装包。各安装提示:Use class-style …使用类语法 : yesUse Babel alongsidee Ts…: yesPi原创 2020-07-13 17:07:39 · 406 阅读 · 0 评论 -
vuecli项目自动部署服务器
1 创建一个项目并提交2 配置公钥和私钥3 github配置4 创建actions5 一些错误vuecli项目通过github插件自动部署到服务器,每次push代码后可自动打包放置服务器上。个人博客文章地址1 创建一个项目并提交项目以vuecli和node作为例子。在本地创建一个vuecli项目创建一个github仓库提交项目到仓库中2 配置公钥和私钥window下建议...原创 2020-04-28 19:45:54 · 508 阅读 · 0 评论 -
前端知识点笔记——第一周
1 vue组件传值 1.1 父传子 1.2 子传父 1.3 非父子传值 1.3.1 定义公共实例 1.3.2 vuex 1.3.3 global全局变量2 watch与computed3 keep-alive用法4 本周demo知识点本章主要包含vue的知识点,包括:组件3种传值方式;computed和watch;keep-alive的使用。个人博客文章地址:个人博客1...原创 2020-04-03 15:53:52 · 149 阅读 · 0 评论