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-6按钮，可以将目录折叠/展开到指定层级
- 点击目录中的标题，右侧页面会平滑滚动到该标题处
- 点击目录底部左侧的向上按钮，右侧内容会滚动到文档顶部
- 点击目录底部右侧的向下按钮，右侧内容会滚动到文档底部
- 滚动右侧页面内容，左侧目录也会随之滚动，并高亮显示页面位置对应的标题
- 代码内容会根据指定的语言高亮显示
- 点击右侧内容代码中的复制按钮，可以一键复制代码
- 打包后，可以便捷打开使用，也可自由分享给朋友
将代码存入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 便可以直接使用啦！
还能这样用！
本项目的初衷是方便一键复制常用代码，但因其功能足够强大，你还能用它来：
- 编写电子文档
- 整理编程笔记
- 和同事/朋友分享自己常用的代码
- 分享源码，学习vue中自动生成目录、代码高亮、一键复制、目录随页面滚动、点击目录页面平滑滚动、树形目录的开发、拼音搜索等功能的实现！
