quickcode快捷编程神器 —— 操作手册

简介: quickcode快捷编程神器 —— 操作手册

quickcode是一个使用vue开发的用于提升编程效率的实用工具,快快将自己常用的代码整理到quickcode中,随时一键复制使用吧!

quickcode下载链接

https://download.csdn.net/download/weixin_41192489/15708539?spm=1001.2014.3001.5503

下载解压后,进入项目目录,打开命令行

1. 执行命令,下载项目所需的依赖

npm i

2. 启动项目

npm run serve

启动成功后,在浏览器中打开 http://localhost:8080/ 便能看到项目界面

quickcode界面预览

quickcode特色功能

  1. 左侧的树形目录根据右侧的页面内容自动生成
  2. 目录支持汉字和拼音搜索
  3. 点击搜索框下方的1-6按钮,可以将目录折叠/展开到指定层级
  4. 点击目录中的标题,右侧页面会平滑滚动到该标题处
  5. 点击目录底部左侧的向上按钮,右侧内容会滚动到文档顶部
  6. 点击目录底部右侧的向下按钮,右侧内容会滚动到文档底部
  7. 滚动右侧页面内容,左侧目录也会随之滚动,并高亮显示页面位置对应的标题
  8. 代码内容会根据指定的语言高亮显示
  9. 点击右侧内容代码中的复制按钮,可以一键复制代码
  10. 打包后,可以便捷打开使用,也可自由分享给朋友

将代码存入quickcode

打开项目中的 src\page\index.vue,

1. 在页面内容区域,使用<main></main> 标签包裹你的页面内容

2. 标题使用h1-h6标签包裹

3. 代码写在 Scode 组件中,code为您的代码,lan为您代码使用的语言

    <!-- 页面内容 -->
    <div class="contentBox">
      <main>
        <h1>Element UI 常用代码</h1>
        <h2>弹窗 el-dialog</h2>
        <!-- 代码写在 Scode 组件中,code为您的代码,lan为您代码使用的语言 -->
        <Scode
          code='<el-dialog :visible.sync="dialogVisible" title="对话框的标题" v-if="dialogVisible" width="30%" append-to-body>
    <span>对话框的内容</span>
    <span slot="footer">
    <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
    <el-button @click="dialogVisible = false" size="mini" type="primary">确 定</el-button>
    </span>
</el-dialog>'
          lan="html"
        />
        <h1>axios请求常用代码</h1>
        <h2>get 请求</h2>
        <Scode
          code="this.$http({
    method: 'get',
    url: 'http://jsonplaceholder.typicode.com/users',
    params: {
        id: 1
    }
}).then(res => {
            this.user1 = res.data;
})"
          lan="js"
        />
        <h2>post 请求</h2>
        <Scode
          code="this.$http({
    method: 'post',
    url: 'https://jsonplaceholder.typicode.com/posts',
    data: {
        name: '朝阳',
        sex: '男'
    }
}).then(res=> {
    this.$message.success(res.msg)
})"
          lan="js"
        />
      </main>
    </div>

定稿 —— 打包项目

命令行中执行

npm run build

项目目录中会自动生成 dist文件夹,打开 index.html 便可以直接使用啦!

还能这样用!

本项目的初衷是方便一键复制常用代码,但因其功能足够强大,你还能用它来:

  1. 编写电子文档
  2. 整理编程笔记
  3. 和同事/朋友分享自己常用的代码
  4. 分享源码,学习vue中自动生成目录、代码高亮、一键复制、目录随页面滚动、点击目录页面平滑滚动、树形目录的开发、拼音搜索等功能的实现!
目录
相关文章
|
SQL IDE Oracle
DataGrip 上手体验,真香!
DataGrip 上手体验,真香!
483 0
DataGrip 上手体验,真香!
|
安全 测试技术 Go
Goland完全攻略 新手快速上手
Goland完全攻略 新手快速上手
303 0
|
编解码 搜索推荐 Windows
MindManager22免费好用的思维导图工具软件
现在不会有人还不会用思维导图吧?!在日常生活、学习和工作之中,我们难免会面对纷乱繁杂的知识或信息,运用思维导图对信息和内容进行整理,可以直接有效且高效地将散点链接成为相关联的、有逻辑的整体。当我们善用思维导图对这些内容进行分类梳理,自然而然我们的效率就会得到很大程度的提升。
246 0
|
9月前
微信小游戏制作工具中的分享功能怎么用?
微信小游戏制作工具中的分享功能怎么用?
115 0
|
存储 数据安全/隐私保护 iOS开发
屏幕录制和编辑神器ScreenFlow轻松上手
屏幕录制和编辑神器ScreenFlow轻松上手
253 0
|
6月前
|
开发工具 Android开发 iOS开发
从零开始学 Xamarin 开发,新手教程全攻略,安装环境、创建项目、设计界面,轻松开启开发之旅!
【8月更文挑战第31天】Xamarin是一种高效的跨平台移动应用开发工具,迎合了日益增长的移动应用需求。本文为Xamarin新手提供了一套详尽的入门指南,涵盖开发环境搭建、项目创建与配置、用户界面设计及功能实现等关键步骤。通过具体示例,帮助初学者快速上手Xamarin开发,开启移动应用创作之旅。
150 0
|
8月前
|
移动开发 前端开发 JavaScript
快速上手web前端开发(超详细教程)
快速上手web前端开发(超详细教程)
|
存储 数据可视化 BI
Lattics:一款简单易用、好看强大的「类脑式」知识管理工具,笔记应用与写作软件二合一
如何快速找到一款适合自己的个人知识管理工具呢? 数据安全第一:你的数据你做主; 知识管理体系:树状结构+网状结构; 简单易用:不折腾,让工具服务自己。 基于这些标准,这篇文章筛选并介绍了新一代知识管理神器 Lattics。主要介绍了这个产品的特色与功能。
600 0
分享5款不会被打入冷宫的神器软件
检查一下你最近安装的软件,他们是不是都一样无法避免最终被你打入冷宫的命运?我们明明很懂“在精不在多”的道理,却依然让我们的电脑塞满了形形色色无用的软件。你需要知道的是,如何找到一款适合自己且真正实用的电脑软件。
93 0
|
8月前
速成软件书:真的是神器吗?
速成软件书:真的是神器吗?
40 0

热门文章

最新文章