前端_vue-cli+element-ui+AceEditor+codemirror+electron-vue
因项目工作需要,目前在研究前端的一些知识。主要想实现一个类似于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模块(前提是需要先安装好)
……
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);
……
2. 在xxx.vue文件中<template></template>部分,需要使用的地方引入element-ui组件;<script></script>;<style></style>:
<template>
<div class="body">
<div>
<el-button @click="showDirDialog" plain>打开</el-button>
</div>
<el-container>
<!--顶部栏-->
<el-header height="50px">header</el-header>
<el-container>
<!--左侧侧边栏-->
<el-aside width="300px">
<el-tree ref="dirTree" :data="dirTree" :props="defaultProps" :load="loadSubFile" lazy
@node-click="treeNodeClick"></el-tree>
</el-aside>
<!--主-->
<el-main>
<!--编辑器-->
<codemirror :value="code" :options="cmOptions"></codemirror>
</el-main>
</el-container>
</el-container>
</div>
</template>
4. 富文本编辑器在前端页面的使用—AceEditor
什么是富文本编辑器?
AceEditor介绍与使用:
简单介绍:
ACE 是一个开源的、独立的、基于浏览器的代码编辑器,可以嵌入到任何web页面或JavaScript应用程序中。ACE支持超过60种语言语法高亮,具有良好的代码提示功能和大量的主题,并能够处理代码多达400万行的大型文档。ACE开发团队称,ACE在性能和功能上可以媲美本地代码编辑器(如Sublime Text、TextMate和Vim等)。
- 使用:
下载后,直接在项目中引用,即可(div的高度必须设置,否则不会显示出来)。示例代码如下(main.html文件):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test_demo</title>
<script src="../src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="../src-noconflict/ext-language_tools.js" type="text/javascript"></script>
</head> <body>
<div style="height: 300px" id="editorDiv"></div>
<script>
var editor = ace.edit("editorDiv");
editor.$blockScrolling = Infinity;
//字体大小
editor.setFontSize(16);
//设置编辑器样式,对应theme-*.js文件
editor.session.setMode("ace/mode/c_cpp");
//设置代码语言,对应mode-*.js文件
editor.session.setMode("ace/mode/javascript");
//设置打印线是否显示
editor.setShowPrintMargin(false);
//设置是否只读
editor.setReadOnly(false);
//与ctrl+f功能一致,搜索
editor.execCommand('find');
//设置代码折叠
editor.getSession().setUseWrapMode(true);
//设置高亮
//editor.setHighlightActiveLine(false); //以下部分是设置输入代码提示的,如果不需要可以不用引用ext-language_tools.js
ace.require("ace/ext/language_tools");
editor.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true
});
editor.setTheme("ace/theme/chrome");
</script>
</body>
</html>
5. vue-cli简单集成codemirror编辑器
使用:
1. 在入口main.js文件中引入codemirror模块(前提是需要先安装好)
……
import VueCodemirror from 'vue-codemirror';
import 'codemirror/lib/codemirror.css'; Vue.use(VueCodemirror);
……
2. 在xxx.vue文件中<template></template>部分,需要使用的地方引入codemirror:
……
<!--编辑器-->
<codemirror :value="code" :options="cmOptions"></codemirror>
……
3. 在xxx.vue文件中<script></script>部分,需要使用的地方引入js逻辑代码:
import {codemirror} from 'vue-codemirror';
import "codemirror/mode/python/python.js";
import 'codemirror/addon/fold/foldcode.js';
import 'codemirror/addon/fold/foldgutter.js';
import 'codemirror/addon/fold/brace-fold.js';
import 'codemirror/addon/fold/xml-fold.js';
import 'codemirror/addon/fold/indent-fold.js';
import 'codemirror/addon/fold/markdown-fold.js';
import 'codemirror/addon/fold/comment-fold.js'; export default {
components: {
codemirror
},
data() {
return {
code: '',
cmOptions: {
tabSize: 4,
mode: 'text/javascript',
lineNumbers: true
}
}
},
mounted() {
},
methods: {
……,
displayFileData(content) {
this.code = content;
}
}
}
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”出错。参照我的上篇文章: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
前端_vue-cli+element-ui+AceEditor+codemirror+electron-vue的更多相关文章
- vue+element ui 的时间控件选择 年月日时分
前言:工作中用到 vue+element ui 的前端框架,需要选择年月日时分,但element ui官网demo有没有,所以记录一下.转载请注明出处:https://www.cnblogs.com/ ...
- Vue + Element UI 实现权限管理系统 前端篇(十一):第三方图标库
使用第三方图标库 用过Elment的同鞋都知道,Element UI提供的字体图符少之又少,实在是不够用啊,幸好现在有不少丰富的第三方图标库可用,引入也不会很麻烦. Font Awesome Font ...
- vue2.0+Element UI 表格前端分页和后端分页
之前写过一篇博客,当时对element ui框架还不太了解,分页组件用 html + css 自己写的,比较麻烦,而且只提到了后端分页 (见 https://www.cnblogs.com/zdd20 ...
- [坑况]饿了么你是这样的前端——vue+element ui 【this dependency was not found:'element-ui/lib/theme-chalk/index.css'】
element ui 坑况:今日pull代码,潇洒npm run dev ,被告知:this dependency was not found:'element-ui/lib/theme-chalk/ ...
- Vue + Element UI 实现权限管理系统 前端篇(二):Vue + Element 案例
导入项目 打开 Visual Studio Code,File --> add Folder to Workspace,导入我们的项目. 安装 Element 安装依赖 Element 是国内饿 ...
- vue Cli 按需引入Element UI 和全局引用Element UI
全局引用: 一.安装 Element UI npm i element-ui -S 二.在main.js 中引入 element UI import ElementUI from 'element-u ...
- 分享一个自搭的框架,使用Spring boot+Vue+Element UI
废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...
- element UI table 过滤 筛选问题
一.问提描述 使用elementUI table 官方筛选案例,发现筛选不是服务器端筛选,而是浏览器端对每一页进行单独筛选. 如何在服务器端筛选? 二.查询Element UI 官网table组 ...
- Vue + Element UI 实现权限管理系统
Vue + Element UI 实现权限管理系统 前端篇(一):搭建开发环境 https://www.cnblogs.com/xifengxiaoma/p/9533018.html
随机推荐
- java collection集合
集合:用于存储对象的容器.集合中可以存储任意类型的对象,长度可变. 集合和数组的比较 集合和数组都是存储对象的容器,不同的是,数组可以存储基本数据类型(int.short.long.char.Bool ...
- MapReduce输入输出类型、格式及实例
输入格式 1.输入分片与记录 2.文件输入 3.文本输入 4.二进制输入 5.多文件输入 6.数据库格式输入 1.输入分片与记录 1.JobClient通过指定的输入文件的格式来生成数据分片Input ...
- Java设计模式-设计模式的六种原则
所谓无招胜有招,练一门功夫分为内功和外功. 外功好比招式,就是所谓的23种设计模式.而内功呢,就是心法,那就是这6种法则.光会外功那是花拳绣腿,内功修为才是境地. 如此众多的设计模式,学完2遍.3遍可 ...
- PHP swfupload图片上传实例
swfupload已经是第二次研究,这次自已整了个简单demo,无奈菜鸟最杯… PHP代码如下: if (isset($_FILES["Filedata"]) || !is_upl ...
- Android使用adb获得activity堆栈信息
很实用的命令: adb shell dumpsys activity 该命令能够看到当前执行的是哪个activity,执行的一些进程等 首先能够看到执行的进程: ACTIVITY MANAGER RU ...
- uva live 4394 String painter 区间dp
// uva live 4394 String painter // // 这一题是训练指南上dp专题的习题,初看之下认为仅仅是稍微复杂了一点 // 就敲阿敲阿敲,两个半小时后,发现例子过了.然而自己 ...
- 【Java 安全技术探索之路系列:J2SE安全架构】之二:安全管理器
作者:郭嘉 邮箱:allenwells@163.com 博客:http://blog.csdn.net/allenwells github:https://github.com/AllenWell 一 ...
- Memory Analysis环境安装
安装MAT(MAT在eclipse的页面:http://www.eclipse.org/mat/downloads.php) 显示饼图的时候,需要安装BIRT Chart Engine插件,通过Ins ...
- 安装BIRT Chart Engine的时候,提示Cannot complete the install because one or more required items could not be
http://wiki.eclipse.org/BIRT_Update_Site_URL 每个eclipse对应的BIRT版本 help-install new software: http://do ...
- Android 4.4.2 动态加入JNI库方法记录 (二 app应用层)
欢迎转载,务必注明出处:http://blog.csdn.net/wang_shuai_ww/article/details/44458553 源代码下载地址:http://download.csdn ...