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

時間 2019-11-20

標籤前端 vue cli+element cli element ui+aceeditor+codemirror+electron aceeditor codemirror electron 简体版

原文原文鏈接

因項目工做須要，目前在研究前端的一些知識。主要想實現一個相似於webstorm，能夠實現對本地文件進行增刪改查等操做的IDE。下面經過幾個專題，按部就班，對某一些部分進行總結，但願能對你有幫助。（網上資料太多太雜，適合本身的仍是須要本身去理解~~~）javascript

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

0. 前端筆記

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

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

註釋：

html的註釋代碼格式： ，能夠單行註釋，也能夠註釋多行；
css的註釋代碼格式： /* 你的css */，多數狀況下也是用於說明，
js的註釋格式： // 你的js代碼；能夠用於說明你當前代碼的用途啊、做用啊等等~；js還能註釋多行代碼，格式跟css註釋同樣：/* 你的js */；

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

安裝：

前提是須要保證有node的環境
npm install webpack -g　　（安裝webpack打包工具，webpack -v）
npm install -g vue-cli　　（安裝vue-cli腳手架，vue -v）
vue init webpack my-project　　（建立了my-project目錄結構）
cd my-project
安裝項目依賴 npm install
啓動項目 npm run dev

官方教程：

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

2. element-ui框架簡單介紹

安裝element-ui

npm i element-ui --savehtml

開始使用

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

3. vue-cli element-ui融合

使用：

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

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>：java

 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介紹與使用：

簡單介紹：node

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

使用：

下載後，直接在項目中引用，便可（div的高度必須設置，不然不會顯示出來）。示例代碼以下（main.html文件）：webpack

 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模塊（前提是須要先安裝好）git

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 }