因项目工作需要，目前在研究前端的一些知识。主要想实现一个类似于webstorm，可以实现对本地文件进行增删改查等操作的IDE。下面通过几个专题，循序渐进，对某一些部分进行总结，希望能对你有帮助。（网上资料太多太杂，适合自己的还是需要自己去理解~~~）
- 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/
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文件中部分，需要使用的地方引入element-ui组件；；：
1 232346打开 57 8 22header 910 11 2112 15 16lazy 13 @node-click="treeNodeClick"> 1417 18 2019
4. 富文本编辑器在前端页面的使用—AceEditor
-
什么是富文本编辑器？
-
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_demotitle> 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文件中部分，需要使用的地方引入codemirror：
1 …… 2 3 <codemirror :value="code" :options="cmOptions">codemirror> 4 ……
3. 在xxx.vue文件中部分，需要使用的地方引入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文件中部分，需要使用的地方引入样式代码（略）
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”出错。参照我的上篇文章：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