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

目录

​​quickcode下载链接​​

​​quickcode界面预览​​

​​quickcode特色功能​​

​​将代码存入quickcode ​​

​​定稿 —— 打包项目​​

​​还能这样用！​​

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

quickcode下载链接

​

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

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中自动生成目录、代码高亮、一键复制、目录随页面滚动、点击目录页面平滑滚动、树形目录的开发、拼音搜索等功能的实现！