前端_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 }

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

6. 基于electron-vue二次开发

使用脚手架样板构建项目

vue init simulatedgreg/electron-vue my-project
cd my-project
npm install
npm run dev

（若是遇到run dev或者run build的时候出错，多是由于国内的网络下载“electron-v1.8.3-win32-x64.zip”出错。参照个人上篇文章：http://www.javashuo.com/article/p-betnfklm-gg.html）

使用 —>官方文档：

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

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

实际例子：

可参照网上大神的项目：http://www.javashuo.com/article/p-tbseenxp-g.html

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

0. 前端笔记

下面附上对于初学者友好的html、css、js教程连接：

注释：

1. vue-cli脚手架的简单介绍、安装等

安装：

官方教程：

2. element-ui框架简单介绍

安装element-ui

开始使用

3. vue-cli element-ui融合

使用：

4. 富文本编辑器在前端页面的使用—AceEditor

什么是富文本编辑器？

AceEditor介绍与使用：

5. vue-cli简单集成codemirror编辑器

使用：

6. 基于electron-vue二次开发

使用脚手架样板构建项目

使用 —>官方文档：

实际例子：