新秀笔记

Typecho模板 Vue3 + TypeScript + element-plus 开发

Vue3 模板/ PHP 模板

Vue3模板
PHP模板

用到的技术栈

全都是最新的

  1. Markdown 渲染 html
  2. element-plus
  3. TypeScript
  4. NProgress
  5. highlight
  6. 单例模式

开发遇到的问题坑

  • 获取文章渲染html的时候 v-html 元素中标签样式失效,
    解决方法
(Vue3 失效)
1 deep 选择器在 CSS 的写法是 >>>
.content-html {
 >>> p { 
       font-size: 16px; 
       } 
>>> a {
       color: blue; 
      } 
}
(失效)
2  /deep/ 写法
.content-html {
    /deep/ p {
        font-size: 16px;
    }
    /deep/ a {
        color: blue;
    }
}
(可用)
3  :deep() 方法
.content-html {
    :deep(p) {
        font-size: 16px;
    }
    :deep(a) {
        color: blue;
    }
}
// 安装
npm install markdown-it --save
npm install @types/markdown-it  //ts 语法提示插件
// 使用
const md = new MarkdownIt({
    html: true,
    linkify: true,
    typographer: true
});
let html = md.render(mdText);
  • 解决路由跳转后滚动条位置不动。
// router/index.js  在路由跳转的时候把滚动条回到顶部
router.beforeEach((to) => {
    window.scroll(0, 0)
})
// 安装
npm install --save nprogress
npm install @types/nprogres // ts 提示文件
NProgress.start();
NProgress.done();
// 安装
npm i @highlightjs/vue-plugin

// vue 需要在 v-html 渲染完后。在执行代码高亮。 不然获取不到页面里面的pre 标签
this.$nextTick(() => {
    document.querySelectorAll('pre > code').forEach(code => {
        hljs.highlightElement(code as HTMLElement)
    })
})
  • vue3 匹配 404 页面
{
// path: "*",   vue2
    path: "/:catchAll(.*)", // 不识别的path自动匹配404
    redirect: '/404',
}

先来几张预览图

手机版首页

blog1.png


电脑版首页

blog2.png


代码高亮

blog3.png


下载面板

blog4.png


骨架屏

blog5.png

-- 展开阅读全文 --
cocos creator 生成迷宫源码
« 上一篇 04-13
微信小游戏《弹力碰碰球》Cocos creator 源码
下一篇 » 03-29

发表评论

已有 4 条评论

  1. 初夏 VLv.0     MacOS /    Google Chrome 说道:

    测试下评论

    1. 初夏 VLv.0     iPhone /    Safari 说道:

      回复

  2. ‎ﮩﮩ٨ـ♡ﮩ٨ـﮩﮩ VLv.0     Windows 10 /    Google Chrome 说道:

    分享一下吗

    1. 初夏 VLv.0     MacOS /    Google Chrome 说道:

      等完善后开源