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中自動生成目錄、代碼高亮、一鍵複制、目錄随頁面滾動、點選目錄頁面平滑滾動、樹形目錄的開發、拼音搜尋等功能的實作！