碼上歡樂
相關內容    簡體    繁體

前端_vue-cli+element-ui+AceEditor+codemirror+electron-vue

本文轉載自   查看原文   2018-11-12 16:18   1711    vue-cli/ electron-vue/ element-ui/ codemirror/ 前端/ AceEditor

因項目工作需要，目前在研究前端的一些知識。主要想實現一個類似於webstorm，可以實現對本地文件進行增刪改查等操作的IDE。下面通過幾個專題，循序漸進，對某一些部分進行總結，希望能對你有幫助。（網上資料太多太雜，適合自己的還是需要自己去理解~~~）

 

  1. vue-cli腳手架的簡單介紹、安裝等
  2. element-ui框架簡單介紹
  3. vue-cli element-ui融合
  4. 富文本編輯器在前端頁面的使用—AceEditor
  5. vue-cli簡單集成codemirror編輯器
  6. 基於electron-vue二次開發

 

0. 前端筆記

  • 下面附上對於初學者友好的html、css、js教程鏈接：

  1. HTML（菜鳥教程）：http://www.runoob.com/html/html-tutorial.html
  2. CSS（菜鳥教程）：http://www.runoob.com/css/css-tutorial.html
  3. JS（菜鳥教程）：http://www.runoob.com/js/js-tutorial.html

  • 注釋：

  1. html的注釋代碼格式： <!--你的代碼塊-->，可以單行注釋，也可以注釋多行；
  2. css的注釋代碼格式： /* 你的css */，多數情況下也是用於說明，
  3. js的注釋格式： // 你的js代碼； 可以用於說明你當前代碼的用途啊、作用啊等等~；js還能注釋多行代碼，格式跟css注釋一樣：/* 你的js */；

 

1. vue-cli腳手架的簡單介紹、安裝等

  • 安裝：

  1. 前提是需要保證有node的環境
  2. npm install webpack -g　　（安裝webpack打包工具，webpack -v）
  3. npm install -g vue-cli　　（安裝vue-cli腳手架，vue -v）
  4. vue init webpack my-project　　（創建了my-project目錄結構）
  5. cd my-project
  6. 安裝項目依賴 npm install
  7. 啟動項目 npm run dev

  • 官方教程：

https://cn.vuejs.org/v2/guide/

 

2. element-ui框架簡單介紹

  • 安裝element-ui

npm i element-ui --save

  • 開始使用

參照element-ui官方文檔：http://element.eleme.io/#/zh-CN/component/installation

 

3. vue-cli element-ui融合

  • 使用：

1. 在入口main.js文件中引入element-ui模塊（前提是需要先安裝好）

1 ……
2 import ElementUI from 'element-ui';
3 import 'element-ui/lib/theme-chalk/index.css';
4 
5 Vue.use(ElementUI);
6 ……

 

2. 在xxx.vue文件中<template></template>部分，需要使用的地方引入element-ui組件；<script></script>；<style></style>：

 1 <template>
 2     <div class="body">
 3         <div>
 4             <el-button @click="showDirDialog" plain>打開</el-button>
 5         </div>
 6         <el-container>
 7             <!--頂部欄-->
 8             <el-header height="50px">header</el-header>
 9             <el-container>
10                 <!--左側側邊欄-->
11                 <el-aside width="300px">
12                     <el-tree ref="dirTree" :data="dirTree" :props="defaultProps" :load="loadSubFile" lazy
13                              @node-click="treeNodeClick"></el-tree>
14                 </el-aside>
15                 <!--主-->
16                 <el-main>
17                     <!--編輯器-->
18                     <codemirror :value="code" :options="cmOptions"></codemirror>
19                 </el-main>
20             </el-container>
21         </el-container>
22     </div>
23 </template>

 

 4. 富文本編輯器在前端頁面的使用—AceEditor

  •  什么是富文本編輯器？

富文本編輯器，是一種可內嵌於瀏覽器，所見即所得的文本編輯器。富文本編輯器不同於文本編輯器，可到網上下載免費的富文本編輯器內嵌於自己的網站或程序里，方便用戶編輯文章或信息。比較常用的是：kindeditor、aceEditor、UEditor、Codemirror等。

  • AceEditor介紹與使用：

  • 簡單介紹：

ACE 是一個開源的、獨立的、基於瀏覽器的代碼編輯器，可以嵌入到任何web頁面或JavaScript應用程序中。ACE支持超過60種語言語法高亮，具有良好的代碼提示功能和大量的主題，並能夠處理代碼多達400萬行的大型文檔。ACE開發團隊稱，ACE在性能和功能上可以媲美本地代碼編輯器（如Sublime Text、TextMate和Vim等）。

  • 使用：

下載后，直接在項目中引用，即可（div的高度必須設置，否則不會顯示出來）。示例代碼如下（main.html文件）：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>test_demo</title>
 6     <script src="../src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
 7     <script src="../src-noconflict/ext-language_tools.js" type="text/javascript"></script>
 8 </head>
 9 
10 <body>
11 <div style="height: 300px" id="editorDiv"></div>
12 <script>
13     var editor = ace.edit("editorDiv");
14     editor.$blockScrolling = Infinity;
15     //字體大小
16     editor.setFontSize(16);
17     //設置編輯器樣式，對應theme-*.js文件
18     editor.session.setMode("ace/mode/c_cpp");
19     //設置代碼語言，對應mode-*.js文件
20     editor.session.setMode("ace/mode/javascript");
21     //設置打印線是否顯示
22     editor.setShowPrintMargin(false);
23     //設置是否只讀
24     editor.setReadOnly(false);
25     //與ctrl+f功能一致，搜索
26     editor.execCommand('find');
27     //設置代碼折疊
28     editor.getSession().setUseWrapMode(true);
29     //設置高亮
30     //editor.setHighlightActiveLine(false);
31 
32     //以下部分是設置輸入代碼提示的，如果不需要可以不用引用ext-language_tools.js
33     ace.require("ace/ext/language_tools");
34     editor.setOptions({
35         enableBasicAutocompletion: true,
36         enableSnippets: true,
37         enableLiveAutocompletion: true
38     });
39     editor.setTheme("ace/theme/chrome");
40 </script>
41 </body>
42 </html>

 

 5. vue-cli簡單集成codemirror編輯器

  • 使用：

1. 在入口main.js文件中引入codemirror模塊（前提是需要先安裝好）

1 ……
2 import VueCodemirror from 'vue-codemirror';
3 import 'codemirror/lib/codemirror.css';
4 
5 Vue.use(VueCodemirror);
6 ……

 

2. 在xxx.vue文件中<template></template>部分，需要使用的地方引入codemirror：

1 ……
2 <!--編輯器-->
3 <codemirror :value="code" :options="cmOptions"></codemirror>
4 ……

 

3. 在xxx.vue文件中<script></script>部分，需要使用的地方引入js邏輯代碼：

 1 import {codemirror} from 'vue-codemirror';
 2 import "codemirror/mode/python/python.js";
 3 import 'codemirror/addon/fold/foldcode.js';
 4 import 'codemirror/addon/fold/foldgutter.js';
 5 import 'codemirror/addon/fold/brace-fold.js';
 6 import 'codemirror/addon/fold/xml-fold.js';
 7 import 'codemirror/addon/fold/indent-fold.js';
 8 import 'codemirror/addon/fold/markdown-fold.js';
 9 import 'codemirror/addon/fold/comment-fold.js';
10 
11 export default {
12     components: {
13         codemirror
14     },
15     data() {
16         return {
17             code: '',
18             cmOptions: {
19                 tabSize: 4,
20                 mode: 'text/javascript',
21                 lineNumbers: true
22             }
23         }
24     },
25     mounted() {
26     },
27     methods: {
28         ……，
29         displayFileData(content) {
30             this.code = content;
31         }
32     }
33 }

4. 在xxx.vue文件中<style></style>部分，需要使用的地方引入樣式代碼（略）

 

6. 基於electron-vue二次開發

  • 使用腳手架樣板構建項目

  1. vue init simulatedgreg/electron-vue my-project
  2. cd my-project
  3. npm install
  4. npm run dev

（如果遇到run dev或者run build的時候出錯，可能是因為國內的網絡下載“electron-v1.8.3-win32-x64.zip”出錯。參照我的上篇文章：https://www.cnblogs.com/sunshine-blog/p/9915222.html）

  •  使用 —>官方文檔：

https://electron.org.cn/vue/index.html

https://simulatedgreg.gitbooks.io/electron-vue/content/cn/

  • 實際例子：

可參照網上大神的項目：https://www.cnblogs.com/GoodHelper/p/8527523.html

 

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 Vue-cli3 引入Element-ui vue-cli+element-ui使用axios 使用手腳架vue-cli3.0創建的vue項目，引入餓了么前端ui框架Element-ui vue Cli 按需引入Element UI 和全局引用Element UI electron-vue + element-ui構建桌面應用 Electron-vue實戰（一）—搭建項目與安裝Element UI 通過Vue-cli4搭建vue+element UI項目 vue element-UI純前端分頁 前端開發 vscode+vue+element-ui electron、vue.js、vuex、element-ui、sqlite3
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM